Skip to content

grid 布局

一个简单的示例:

常见的容器属性

1. grid-template-*

1) repeat() 第一个参数是重复的次数,第二个参数是所要重复的值

css
grid-template-columns: 100px 100px 100px;
/* 等价于 */
grid-template-columns: repeat(3, 100px);

2) auto-fill 单元格大小固定,但容器的大小不确定,使用它会自动填充

css
grid-template-columns: repeat(auto-fill, 100px);

3) fr 片段

为了方便表示比例关系,网格布局提供了fr 关键字(fraction 的缩写,意为“片段”)

css
/* 宽度平均分为4分 */
grid-template-columns: repeat(4, 1fr);
/* 等价于*/
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 改变比例 */
grid-template-columns: 1fr 2fr 3fr 1fr;

4) minmax()

css
/* 设置最小和最大宽度 */
grid-template-columns: 1fr minmax(150px, 1fr);

5) auto

css
/* auto 自适应宽度 */
grid-template-columns: 100px auto 100px;

6) 网格线

可以用方括号定义网格线名称,方便以后的引用(C 表示 columnmns)

css
/* 定义网格线名称,方便后面引用 */
grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] 100px [r5];

2.gap

项目(子元素)相互之间的距离

css
/* 子元素间隔 */
row-gap: 20px;
column-gap: 30px;
/* 等价于 */
gap: 20px 30px;

3. grid-template-areas

将项目(子元素)按照自定义方式划分区域,不需要利用的区域可以用. 表示,区域的命名会影响网格线,每个区域的起始网格线会自动命名为区域名-start,终止网格线自动命名为区域名-end

css
grid-template-areas: 'a a a' 'b a b' 'b b b';

4. grid-auto-flow

网格默认顺序为先行后列,属性可以修改为row 或者column 来改变网格排列顺序

同时还要一个属性dense ,意为密集排列

5.对齐方式

1) justify-items

设置单元格内的水平对齐方式:start | end | center | stretch

2) align-items

设置单元格内的垂直对齐方式:start | end | center | stretch

3) place-items

是 align-items 属性和 justify-items 属性的合并简写形式 place-items: <align-items> <justify-items>;

css
justify-items: center;
align-items: center;
/* 等效于 */
place-items: center center;

4) justify/align-content

设置整个内容区域的水平和垂直的对齐方式 justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly;

5) grid-auto-rows/columns

用来设置多出来项目的宽和高

css
.main{
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] ;
  ···
  grid-auto-rows: 50px;
}

常见的项目属性

1. grid-row/column-start/end

用来指定 item 的具体位置,根据在哪根网格线

css
.main {
  display: grid;
  border: #41d5f6 10px solid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] 100px [r5];
  gap: 20px 20px;
  /* 自定义网格区域 */
  grid-template-areas: 'a a a' 'b a b' 'b b b';
}
.item-1 {
  background-color: #ec5d3d;
  grid-column-start: 1;
  grid-column-end: 3;
  /* 等效于 */
  /* grid-column: 1 / 3 */
}
.item-2 {
  background-color: #f1a145;
  grid-column: 1/3;
}
.item-3 {
  background-color: #64a256;
  /* 等效于 */
  grid-column-start: span 2;
}

2. grid-area

指定项目放在哪一个区域

grid-area 属性还可用作 grid-row-start/end、grid-column-start/end 的合并简写形式,直接指定项目的位置

3. justify/align/place-self

justify-self 属性设置单元格内容的水平位置(左中右),跟 justify-items 属性的用法完全一致, 但只作用于单个项目 (水平方向) align-self 属性设置单元格内容的垂直位置(上中下),跟 align-items 属性的用法完全一致, 也是只作用于单个项目 (垂直方向)