算算算是一个实践文章吧。

Grid布局

简单的总结，很简单，太菜了。细节还是需要更多的了解和补充。

网格轨道（Grid Tracks）

网格轨道是两条网格线之间的空间。它们通过使用属性grid-template-columns和grid-template-rows在网格中定义。

none 关键字，表示不明确的网格。所有的行和其大小都将由grid-auto-rows 属性隐式的指定
非负值的长度大小：如px, em, vw
百分比：相对于网格容器的，如果是inline-grid，则百分比值将被视为`auto
flex：非负值，用单位fr来定义网格轨道大小的弹性系数。每个定义了flex 的网格轨道会按比例分配剩余的可用空间
max-content min-content关键字：表示以网格项的最大/最小内容来占据网格轨道
auto如果该网格轨道为最大时，等同于max-content，为最小时，等同于 min-content

网格线（Grid Lines）

使用Grid布局在显式网格中定义轨道的同时会创建网格线。网格线可以用它们的编号来寻址。在从左到右的语言中，列线1将位于网格的左侧，行线1将位于其顶部。

网络单元格（Grid Cell）

在Grid布局中，网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，非常像表格单元格。

网格区域（Grid Areas）

网格区域是网格中由一个或者多个网格单元格组成的一个矩形区域。本质上，网格区域一定是矩形的。

网格间距（Gutters）

网格间距是网格轨道之间的间距，可以通过grid-column-gap，grid-row-gap在Grid布局中创建。

定位

grid-row-start, grid-row-end, grid-column-start, grid-column-end 分别指定 grid item 在网格中的行起始位，行结束位，列起始位，列结束位。

auto表示自动放置，自动跨度或默认span为 1
数字表示网格线
span 数字表示跨越几个格子，数字小于等于0无效。如果超过网格大小会隐式创建行或列。

函数

repeat()函数可以以一种更简洁的方式去表示大量而且重复行的表达式。
minmax()定义了一个长宽范围的闭区间。它接受两个参数，最小值和最大值。它返回这个区间中的值。
fit-content()内容少就取内容的长度，内容长度大于参数长度时，它取参数长度。

网格项的内容对齐

可以用align-self和justify-self调整 grid item 的内容对齐方式。
align-self（start/center/end）用来垂直方向对齐，justify-self（start、left/center/end、right）用来水平方向对齐。

隐式创建的行和列

grid-auto-rows``grid-auto-columns指定了隐式创建行/列大小,取值同grid-template-columns和grid-template-rows。
grid-auto-flow: row指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。 column指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。在这两个关键字后面还可以加上dense关键字(让后面小的填补前面出现的空白)。

其他

grid-template-areas这个属性网格区块，需要和grid-area配合使用，它的值可以是none和字符串。每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元会生成一列。同名的跨越相邻行或列的单元变成网格区块(grid area)。 grid-template是grid-template-rows、grid-template-columns和grid-template-areas的简写。
grid-gap / gap是grid-row-gap / row-gap和grid-row-gap / row-gap的简写，调整元素间距大小，可以是长度值、百分比和normal。

简单的尝试一下下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item-a {
            grid-area: header;
            background-color: pink;
        }
        .item-b {
            grid-area: main;
            background-color: rgb(238, 130, 148);
        }
        .item-c {
            grid-area: sidebar;
            background-color: rgb(190, 45, 69);
        }
        .item-d {
            grid-area: footer;
            background-color: rgb(119, 22, 38);
        }
 
        .container {
            display: grid;
            grid-template-columns: 50px 50px 50px 50px;
            grid-template-rows: auto;
            grid-template-areas: 
            "header header header header"
            "main main . sidebar"
            "footer footer footer footer";
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item-a">header</div>
        <div class="item-b">main</div>
        <div class="item-c">sider</div>
        <div class="item-d">footer</div>
    </div>
</body>
</html>

D7|青训营