共计 2825 个字符，预计需要花费 8 分钟才能阅读完成。
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;