grid 布局

一个简单的示例：

常见的容器属性

1. grid-template-*

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

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

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

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

3) fr 片段

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

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

4) minmax()

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

5) auto

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

6) 网格线

可以用方括号定义网格线名称，方便以后的引用（C 表示 columnmns）

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

2.gap

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

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

3. grid-template-areas

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

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>;

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

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

.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 的具体位置，根据在哪根网格线

.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 属性的用法完全一致， 也是只作用于单个项目 (垂直方向)