CSSGridGirdLayout创建网格通过将display属性的值设置为grid，可以将HTML元素变成网格容器。注意：在CSSGrid中，父元素称为容器，其子元素称为项。#container{display:grid;}Column,rowColumnRow在网格容器中使用grid-template-columns属性添加一些列，示例如下：.container{display:grid;网格模板列：50px50px；}上面的代码将向网格容器添加两列，均为50px宽。grid-template-columns属性值的个数表示网格中的列数，每个值表示对应的列宽。创建的网格会自动设置行数。要手动调整行，请使用grid-template-rows属性。.container{显示：网格；网格模板列：50px50px；grid-template-rows:50px50px;}UnitUnit在CSS网格中，可以使用绝对单位（如px）或相对单位（如em）来定义行或列的大小。也可以使用以下单位：fr：设置列或行占剩余空间的比例，auto：设置列宽或行高自动等于其内容的宽度或高度，%：调整列或行到其容器宽度或高度百分比，grid-template-columns:1fr100px2fr;spacingGap如果需要在列之间增加一些间距，我们可以使用grid-column-gap.grid-column-gap:20px;您还可以使用grid-row-gap设置行间距。网格行间距：5px；grid-gap属性是前两次挑战中出现的grid-row-gap和grid-column-gap的简写属性，使用起来比较方便。如果grid-gap只有一个值，那么这个值表示行和列之间的距离就是这个值。如果有两个值，那么第一个值代表行间距，第二个值代表列间距grid-gap:10px20px;spacesizeSpacing到目前为止，所有的讨论都是围绕网格容器展开的。grid-column属性是网格项本身的属性。在网格中，假想的水平线和垂直线称为线。这些线从网格左上角的1开始编号，垂直线从右开始计数，水平线从右开始计数。要设置网格项占据多少列，请使用grid-column属性加上网格行号来定义网格项的开始和结束位置。网格列：2/4；也可以设置占用多行。使用grid-row属性定义网格项开始和结束的水平线。网格行：2/4；对齐Align在CSS网格中，每个网格项的内容都位于一个称为单元格（cell）的框中。使用网格项的justify-self属性设置其内容在单元格中的位置沿水平轴的对齐方式。默认情况下，此属性的值为stretch，这将使内容填满单元格的整个宽度。CSS网格属性还可以使用其他值：start：将内容对齐到单元格的左侧，center：将内容对齐到单元格的中心，end：将内容对齐到单元格的右侧justify-self:center;正如我们可以设置网格项沿水平方向的对齐方式一样，我们也可以设置网格项沿垂直方向的对齐方式。为此，您可以在网格项上使用align-self属性。对齐自我：结束；CSS网格中的网格项共享对齐方式。您可以单独设置它们的对齐方式，或使用网格容器上的justify-items将它们同时沿水平轴对齐。这个属性接受前面两个学习到的所有值作为属性值，但是和之前不同的是，它把grid中的所有griditem对齐为set。证明项目：中心；使用网格容器上的align-items属性使网格中的所有网格项目垂直对齐。对齐项目：结束；PartitionArea可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称。可以通过在容器中添加grid-template-areas来实现：grid-template-areas:"headerheaderheader""advertcontentcontent""advertfooterfooter";将区域模板添加到网格后，可以通过引用定义区域的名称，将元素放置到相应的区域中。为此，您需要为网格项使用grid-area：.item1{grid-area:header;}还有另一种使用grid-area属性的方法。如果网格中没有定义区域模板，你也可以为它添加一个模板，如下所示：item1{grid-area:1/1/2/4;上面例子中的数字表示这些值：grid-area:水平线开始于/垂直线开始于/水平线结束于/垂直线结束于；RepeatRepeat使用repeat方法指定行或列的重复次数，后跟逗号和要重复的值。网格模板列：重复（2,1fr,50px）20px；limititemsize限制项目大小内置函数minmax也可以用来设置grid-template-columns和grid-template-rows的值。它的作用是在网格容器调整大小时限制网格项的大小。为此，您需要指定网格项允许的大小范围。网格模板列：100pxminmax(50px,200px)；自动填充AutoFillrepeat方法具有称为自动填充的功能。它的作用是根据容器的大小，尽可能多地容纳指定大小的行或列。通过结合自动填充和minmax可以实现更灵活的布局。grid-template-columns:repeat(auto-fill,minmax(60px,1fr));auto-fit与auto-fill的效果几乎相同。唯一不同的是，当容器的大小大于网格项的总和时，自动填充会不断在一端放置空行或空列，这会将所有网格项挤到另一侧；而自动填充适合不会在一端放置空行或列，而是会拉伸所有网格项目以适合。注意：如果容器的宽度不足以容纳同一行上的所有网格项，则剩余的网格项将移至新行。grid-template-columns:repeat(auto-fit,minmax(60px,1fr));nestedgridNestedGrid将一个元素转换为网格只会影响它的子元素（即直接后代元素，英文directdescendants。意思是一个元素的所有后代元素，其父元素是该元素的所有元素）。因此，如果将子元素设置为网格，则会得到嵌套网格。显示：网格；网格模板列：自动1fr；
