在 CSS 网格中，父元素称为容器（ container ），它的子元素称为项（ item ）

将元素转换为网格只会影响其子元素。因此，把某个子元素设置为网格，就可以得到一个嵌套的网格

gird-template-columns 和 grid-template-rows

使用 grid-template-columns 添加列
使用 grid-template-rows 添加行

1
2
3
4
.container{
  display: grid;
  grid-template-columns: 50px 50px;
}

以上代码会在网格容器中添加两列，每列的宽度为 50px，也可以使用 repeat 批量生成列

1
grid-template-columns: repeat(2,50px) // 生成两个宽度为 50px 的列

还可以使用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用

1
2
3
grid-template-columns: repeat(2,1fr 50px) 20px;
// 以上代码效果相当于
grid-template-columns: 1fr 50px 1fr 50px 20px; // 1fr 50px  重复了两次，后面跟着 20px

可选值

值 说明
fr 设置行或列占剩余空间的比例
auto 设置行高或列宽自动等于它的内容的高度或宽度
% 将行或列调整为它的容器宽度或高度的百分比 
1
2
grid-template-columns: auto 50px 10% 2fr 1fr;
// 这段代码添加了五个列。 第一列的宽与它的内容宽度相等；第二列宽50px；第三列宽是它容器的10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。

grid-gap

添加网格间距

1
2
3
grid-gap: 10px;
// 等价于
grid-gap: 10px 10px; // 第一个值表示行间距，第二个值表示列间距

也可以分别使用 grid-column-gap 和 grid-row-gap 为行或列添加间距

1
2
grid-column-gap: 10px;
grid-row-gap: 10px;

grid-column 和 grid-row

这两个属性是用于网格项本身的属性
要设置一个网格项占据几列/行，可以使用 grid-column / grid-row 属性加上网格线条的编号来定义网格项开始和结束的位置

网格线

1
grid-column: 1 / 3;  // 这会让网格项从左侧第一条线开始到第三条线结束，占用两列

justify-self

设置单元格内容沿水平轴的对齐方式

可选值：

  • stretch 使内容占满整个单元格的宽度。默认值
  • start 使内容在单元格左对齐
  • center 内容居中
  • end 内容右对齐

align-items

设置单元格内容沿竖直方向对齐

可选值:

  • stretch 使内容占满单元格。默认值
  • start 内容在单元格顶部
  • center 内容居中
  • end 内容位于底部

grid-template-areas

将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称

1
2
3
4
grid-template-areas: 
    "header header header"
    "advert content content"
    "advert footer footer";

上面的代码将网格单元格分成四个区域：header、advert、content 和 footer。每个单词代表一个单元格，每对引号代表一行

grid-area

在为网格添加区域模板后，可以通过 grid-area 将元素放入相应的区域

1
2
3
.item1{
  grid-area: header; //将类名为item1的项放入了 header 区域里
}

如果网格中没有定义区域模板，可以使用 grid-area为它添加一个模板

1
2
3
4
5
6
7
8
9
10
11
12
13
.item1{
  grid-area: 1/1/2/4; // item1 从行1列1开始，行2列4结束
}
// 上面代码相当于下面四段代码的简写
grid-row-start: 1;
grid-column-start: 1;
gird-row-end: 2;
grid-column-end: 4;

// 也可以横跨多少行的写法
.item1{
  grid-area: 2 / 1 / span2 / span3; // item1从行2列1开始，并横跨两行三列
}

minmax

在网格容器改变大小时限制网格项的大小

1
2
grid-template-columns: 100px minmax(50px, 200px);
// 添加两列，第一列宽为100px，第二列宽最小为50px，最大为200px

auto-fill & auto-fit

可以通过结合 auto-fill 和 minmax 来创建更灵活的布局

auto-fill：尽可能容纳多的行或列；当容器的大小大于各网格项之和时，会在一端末尾留空
auto-fit：不会留空，而是将所有网格项拉伸至合适的大小，如果不足以将所有网格放在同一行，余下的网格会到下一行

1
2
3
4
5
6
7
8
9
10
11
12
.box{
  display: grid;
  grid-template-rows: repeat(2,100px);
  width: 500px;
  border: 1px solid lightgray;
}
.box1{
  grid-template-columns: repeat(auto-fill,minmax(70px,1fr));
}
.box2{
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

auto-fill 和 auto-fit