CSS 网格 Gird 布局

创建网格 Gird

通过将属性

display

的值设为

grid

，HTML 元素就可以变为网格容器。

注意：在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。

#container {
  display: grid;
}

列，行 Column Row

在一个网格容器中使用

grid-template-columns

属性可以添加一些列，示例如下：

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

上面的代码会在网格容器中添加两列，宽度均为 50px。

grid-template-columns

属性值的个数表示网格的列数，每个值表示相应的列宽度。

创建的网格会自动设置行数。要手动调整行，使用

grid-template-rows

属性。

.container {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
}

单位 Unit

在 CSS 网格中，可以使用绝对单位（如

px

）或相对单位（如

em

）来定义行或列的大小。下面的单位也可以使用：

fr

：设置列或行占剩余空间的比例，

auto

：设置列宽或行高自动等于它的内容的宽度或高度，

：将列或行调整为它的容器宽度或高度的百分比，

grid-template-columns: 1fr 100px 2fr;

间距 Gap

如果需要在列与列之间添加一些间距，我们可以使用

grid-column-gap

grid-column-gap: 20px;

还可以用

grid-row-gap

设置行间距。

grid-row-gap: 5px;

grid-gap

属性是前两个挑战中出现的

grid-row-gap

和

grid-column-gap

的简写属性，它更方便使用。如果

grid-gap

只有一个值，那么这个值表示行与行之间、列与列之间的间距均为这个值。

如果有两个值，那么第一个值表示行间距，第二个值表示列间距

grid-gap: 10px 20px;

空间大小 Spacing

到目前为止，所有的讨论都是围绕网格容器的。

grid-column

属性是用于网格项本身的属性。

网格中，假想的水平线和垂直线被称为线（lines）。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

要设置一个网格项占据几列，使用

grid-column

属性加上网格线条的编号来定义网格项开始和结束的位置。

grid-column: 2 / 4;

也可以设置它占用多行。使用

grid-row

属性来定义一个网格项开始和结束的水平线。

grid-row: 2 / 4;

对齐 Align

在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。使用网格项的

justify-self

属性，设置其内容的位置在单元格内沿水平轴的对齐方式。默认情况下，这个属性的值是

stretch

，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：

start

：使内容在单元格左侧对齐，

center

：使内容在单元格居中对齐，

end

：使内容在单元格右侧对齐

justify-self: center;

正如能设置网格项沿水平方向的对齐方式一样，我们也可以设置网格项沿竖直方向的对齐方式。为此，可以对网格项使用

align-self

属性来实现。

align-self: end;

CSS 网格中的网格项共享对齐方式。可以分别设置它们的对齐方式，也可以对网格容器使用

justify-items

使它们一次性沿水平轴对齐。这个属性能接受之前两个中学到的所有值作为属性值，但与之前不同的是，它会将网格中所有的网格项按所设置的方式对齐。

justify-items: center;

对网格容器使用

align-items

属性可以让网格中所有的网格项沿竖直方向对齐。

align-items: end;

分区 Area

可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称。可以通过给容器加上

grid-template-areas

来实现：

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";

在为网格添加区域模板后，可以通过引用所定义的区域的名称，将元素放入相应的区域。为此，需要对网格项使用

grid-area

：

.item1 {
  grid-area: header;
}

grid-area

属性还有另一种使用方式。如果网格中没有定义区域模板，也可以像这样为它添加一个模板：

item1 { grid-area: 1/1/2/4; }

上例中数字代表这些值：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

重复 Repeat

使用

repeat

方法指定行或列的重复次数，后面加上逗号以及需要重复的值。

grid-template-columns: repeat(2,1fr,50px) 20px;

限制项目大小 Limit Item Size

内置函数

minmax

也可用于设置

grid-template-columns

和

grid-template-rows

的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，需要指定网格项允许的尺寸范围。

grid-template-columns: 100px minmax(50px, 200px);

自动填充 Auto Fill

repeat 方法带有一个名为自动填充（auto-fill）的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。可以通过结合

auto-fill

和

minmax

来更灵活地布局。

grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

嵌套网格 Nested Grid

display: grid;
grid-template-columns: auto 1fr;

CSS 网格 Gird 布局