grid 网格布局实用

1. 父容器 display: grid; display: inline-grid;
   设为网格布局以后，容器子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效。

2. grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。

3. column-gap：列间距
   row-gap： 行间距
   grid-gap: <row-gap> <column-gap>;

4. 网格线，3 x 3 行的网格有 4 x 4 根网格线，每根线，从 row 或 column 方向从 1 开始递增。
   demo item-1 将一个项目放到网格固定的位置，通过 start、end 可以横跨单元格，其值可以是数字（代表网格线的名字），可以是 span关键字，代表占用几个单元格。
   grid-row-start
grid-row-end
grid-column-start
grid-column-end
   demo item-2 grid-row、grid-column
   grid-row : <grid-row-start> / <grid-row-end>
grid-column 同理
   demo item-3 grid-area
   grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end

实例

1. 使用绝对数字

.container {
  display: grid;
  /* 分 3 列，每列宽 100px */
  grid-template-columns: 100px 100px 100px; 
 /* 分 3 行，每行高 100px */
  grid-template-rows: 100px 100px 100px; 
}

2. 使用百分比

#container{
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

3. repeat() 简化重复的值

#container{
  display: grid;
  grid-template-columns: repeat(3, 100px);
}

repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

4. auto-fill 关键字自动填充

#container{
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

上面代码表示每列宽度 100px，然后自动填充，直到容器不能放置更多的列。

5. fr关键字 比例关系，可以与绝对长度的单位结合使用

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

6. minmax() 长度范围

#container{
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

表示最小 100px，最大 1fr。

7. auto 由浏览器自己决定长度

#container{
  display: grid;
  grid-template-columns: 100px 100px auto;
}

---

https://learncssgrid.com/
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html