- A+
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)); auto-fit 效果几乎和 auto-fill一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); 嵌套网格 Nested Grid
将元素转换为网格只会影响其子元素（即直接后代元素，英文为 direct descendants。意思是一个元素的所有后代元素中，父级元素为该元素的所有元素）。 因此，如果把某个子元素设置为网格，就会得到一个嵌套的网格。
display: grid; grid-template-columns: auto 1fr; 
