使用CSS Grid可以在网页上创建二维布局。以下内容将用大量示例来演示如何使用Grid布局。

网格容器（Grid Container）

通过将 display 属性设置为 grid 或 inline-grid 值来创建网格容器。

display: grid

示例

display: inline-grid

设置行内元素

显式网格（Explicit Grid）

grid-template-rows: 50px 100px

为每行指定高度，可以是任何非负值(px、% 、 em 等)，元素1和2的固定高度为50px和100px，剩余两项没有定义，由元素本身高度决定,示例

grid-template-columns: 90px 50px 120px

与行类似，指定列的宽度，由于只指定了三列，所以后三个元素被放到了第二行，他们的列宽与第一行的一致，示例

grid-template-columns: 1fr 1fr 2fr

使用fr单位，可以让元素宽度按比例分配，此示例总共分为4份，前两个元素占一半宽度，最后一个元素占一半宽度，示例

grid-template-columns: 3rem 25% 1fr 2fr

当fr于其他长度值组合，fr则根据剩余空间计算

在这个例子中，1fr=((网格宽度) - (3rem) - (25%网格宽度)) / 3

最大最小行列尺寸（Minimum and Maximum Grid Track Sizes)

grid-template-rows:    minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

Minmax ()函数接受2个参数: 第一个是最小尺寸，第二个是最大尺寸。除了长度值以外，也可以设置为auto，允许根据内容大小进行自适应。

此例子中，第一行最小高度为100px，最大为auto。第一列最小宽度为auto，但最大宽度为容器的50%。

重复网格（Repeating Grid Tracks）

grid-template-rows:    repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);

Repeat()接受两个参数：第一个表示重复的次数，第二个表示要重复的值。

此例子中，将元素分为4行3列，行高为100px，列宽1fr（平分）

grid-template-columns: 30px repeat(3, 1fr) 30px

在这个示例中，第一列和最后一列的宽度为30px，其中由 repeat ()创建的3列的宽度分别为1fr。

网格间隙(Grid Gaps)

grid-row-gap:    20px;
grid-column-gap: 5rem;

间隙大小值可以是任何非负的长度值(px、% 、 em 等),示例

grid-gap: 100px 1em

grid-gap第一个值是行间隙，第二个值是列间隙,示例

grid-gap: 2rem

一个值则设置相等的行列间隙距离，示例

根据网格线布置元素(Positioning Items by Grid Line Numbers)

grid-row-start:    2;
grid-row-end:      3;
grid-column-start: 2;
grid-column-end:   3;

这个由2列3行组成的网格将产生3条垂直线和4条水平线。item1元素按照行列重新排序。

如果元素只跨越一行或一列，可以不写grid-row/column-end

grid-row:    2;
grid-column: 3 / 4;

Grid-row 是 grid-row-start 和 grid-row-end 的缩写。

如果提供了一个值，则指定 grid-row/column-start。

如果指定了两个值，则第一个值对应于 grid-row/column-start 和第二个 grid-row/column-end，并且必须用正斜杠/分隔。

grid-area: 2 / 2 / 3 / 3

Grid-area 是 grid-row-start、 grid-column-start、 grid-row-end 和 grid-column-end 的缩写。

如果指定了四个值，则第一个值对应于 grid-row-start、第二个 grid-column-start、第三个 grid-row-end 和第四个 grid-column-end。示例

元素跨行与跨列(Spanning Items Across Rows and Columns)

grid-column-start: 1;
grid-column-end:   4;

通过将 grid-column-end 设置为距 grid-column-start 超过一列的列行号，将元素设置为跨越多个列。

示例

grid-row-start: 1;
grid-row-end:   4;

同样也可以设置跨行。示例

grid-row:    2 / 5;
grid-column: 2 / 4;

或者使用简写形式，示例

grid-row:    2 / span 3;
grid-column: span 2;

或者使用span关键字来设置跨行，示例

Naming Grid Lines（命名网格线）

在使用 Grid-template-rows 和 Grid-template-column 属性定义网格时，可以对网格线进行命名。然后可以引用行名称来定位网格项。

grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

在使用 grid-template-rows 和 grid-template-column 属性定义网格时，为网格线分配名称。

在行名中，避免出现在规范中的关键字(例如 span) ，以免引起混淆。
指定的行名必须放在方括号中[行名] ，并相对于网格轨道放置。

grid-template-rows:    [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

通过在方括号中添加名称并用空格分隔每个名称，可以为网格线分配多个名称。

网格线命名定位(Positioning Items by Line Names)

使用命名网格线，元素可以通过行名和编号定位。

grid-row-start:    row-2-start;
grid-row-end:      row-end;
grid-column-start: col-2-start;
grid-column-end:   col-end;

引用的行名不应该包装在方括号中。示例

grid-row:    row-2-start / row-end;
grid-column: col-2-start / col-end;

Grid-row 和 grid-column 简写形式也支持使用网格线名称。

同名网格线定位(Naming and Positioning Items by Grid Lines with the Same Name)

同样也可以使用 repeat ()函数为行分配相同的名称。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

同名的行列线会按出现的顺序添加序列号，用以区分。

grid-row:    row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

用同名行列线加对应序列号来定位元素。此例元素1行位置从row-start 2的网格线开始，在row-end 3网格线结束，列位置从clo-start 1开始，从 col-start 3结束。示例。

区域命名定位(Naming and Positioning Items by Grid Areas)

与网格线名称一样，网格区域也可以使用 grid-template-area 属性命名。然后可以引用名称来定位网格项。

grid-template-areas:   "header header"
                        "content sidebar"
                        "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

名称集应该用单引号或双引号括起来，每个名称之间用空格分隔。

每组名称定义一行，每个名称定义一列。

grid-area: sidebar;

元素使用grid-area来确定位置。示例

隐式网格(Implicit Grid)

当网格需要将项目放置在显式网格之外时，就会创建隐式网格。

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px;

在这个示例中，我们只定义了一条行轨道，因此元素1和2的高度是70px。第二行轨道是自动创建的，用来放置元素3和元素4。Grid-auto-rows 在隐式网格中定义行高。

grid-auto-flow: row

网格的默认流(方向)是 row。

grid-auto-flow: column

可以将网格的流更改为列。示例。

隐式网格命名(Implicitly Named Grid Areas)

用-start和-end来命名网格线，定位元素时会更方便。

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];

在这个示例中，行和列都由inner-start开始和inner-end结束，它们隐式地将网格区域的名称指定为inner。

grid-area: inner

然后，元素可以通过网格区域名定位，而不是通过行名定位。

内容分层(Layering Grid Items)

元素重叠时可以使用index来配置层级关系。

.item-1,
.item-2 {
  grid-row-start:  1;
  grid-column-end: span 2;
}

.item-1 { grid-column-start: 1; z-index: 1; }
.item-2 { grid-column-start: 2 }

在此示例中，元素1和元素2从第一行开始，跨越2列。元素1从列1开始，元素2从列2开始，这导致两个元素重叠，将元素1 index设置为1后，元素1处于元素2之上。

元素对齐(Aligning Grid Items)

justify-items、justify-self调整单元格内容的水平位置（左中右）, align-items、align-self调整单元格内容的垂直位置（上中下）。

.box {
  grid-template-rows: 80px 80px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content content"
                       "content content";
}
.item { grid-area: content }

.box{
    justify-items: center;
    align-items: center;
}

此示例，元素位于行和列轴的中心。

其余对齐属性

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

.item-1 { justify-self: start }
.item-2 { justify-self: center }
.item-3 { justify-self: end }

同样的justify-self和align-self属性则可以调整元素自身的位置。示例

其余属性

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

内容对齐(Aligning Grid Tracks)

justify-content属性调整整个内容区域在容器里面的水平位置（左中右），align-content属性调整整个内容区域的垂直位置（上中下）。

.box {
    height: 300px;
    border: 1px solid green;
    display: grid;
    grid-template-columns: repeat(4, 45px);
    grid-template-rows: repeat(4, 45px);
    grid-gap: 0.5em;
    justify-content: space-around;
    align-content: space-around;
}

示例，调整内容在容器水平和垂直分布都为space-around