岸在彼方

创建显式网格

定义网格

• grid-template-columns 定义列数
• grid-template-rows 定义行数

这两个属性是在父容器定义

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/**
 * 定义一个四列两行的容器
 */
.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 2em 2em;
}

一个简单的网格布局就定义完成了(由于只有6个项目，所以有两个位置空着)。

子项目位置

接下来可以在网格中定位项目：

• grid-column 定义要放置网格项的列
• grid-row 定义要放置网格项的行

grid-column 是 grid-column-start 与 grid-column-end 的简写，它们之间用 / 隔开，grid-column-start 是放置该项目的起始列，grid-column-end 是放置该项目的结束列，包括头不包括尾。

grid-row 也是 grid-row-start 与 grid-row-end 的缩写，语法、功能跟 grid-column 一样，只是它控制行。

<div class="box">
  <div class="item item-1">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/**
 * 定义一个四列三行的容器
 */
.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 2em 2em 2em;
}
/**
 * 从第 2 列开始，到第 5 列截止（包括头不包括尾）
 * 从第 2 行开始，到第 4 行截止（包括头不包括尾）
 */
.item-1 {
  grid-column: 2 / 5;
  grid-row: 2 / 4;
}

另外还可以加个 span 关键字，意思为占用的列 or 行数

.box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 2em 2em 2em 2em 2em 2em;
}
/**
 * 占 2 列，到第 5 列截止（包括头不包括尾）
 * 从第 3 行开始，占 3 行（包括头不包括尾）
 */
.item-1 {
  grid-column: span 2 / 5;
  grid-row: 3 / span 3;
}

/**
 * 从第 2 列开始，占 3 列（包括头不包括尾）
 * 占 3 行，到第 6 行截止（包括头不包括尾）
 */
.item-1 {
  grid-column: 2 / span 3;
  grid-row: span 3 / 6;
}

经测试，在 start 与 end 中只能其中之一出现 span，像 grid-column: span 2 / span 3; 这样写似乎是没有效果的。

命名网格

如果不想计算行和列，可以命名网格的一部分，这些命名的部件称为网格区域。

• grid-template-areas 在父容器上定义行列
• grid-area 在子元素中应用定义的名字

<div class="box">
    <div class="item header">1</div>
    <div class="item main">2</div>
    <div class="item footer">3</div>
</div>

/*
注意：
必须为每个网格区域命名
每组引号表示一行（"row1" "row2"）
引号里面空格隔开的个值表示一列（"area1 area2"）
如果不想命名某个区域，使用 . 占位
-----------------
三个header表示header占3列
中间一个main表示只占中间的那列
 . 是空列占位符
*/
.box {
  grid-template-areas: "header header header"
                       ".      main   .     "
                       "footer footer footer";
}
.item.header {
  grid-area: header;
}
.item.main {
  grid-area: main;
}
.item.footer {
  grid-area: footer;
}

项目间距

创建网格时，还可以在列和行之间创建间距。

• grid-column-gap 确定列之间的空间
• grid-row-gap 确定行之间的空间
• grid-gap 是 grid-row-gap 和 grid-column-gap 的简写

<div class="box">
    <div class="item header">header</div>
    <div class="item aside">aside</div>
    <div class="item main">main</div>
    <div class="item footer">footer</div>
</div>

/*
grid-gap: grid-row-gap | grid-column-gap;
当使用单个值时，则grid-row-gap与grid-column-gap都是该值
*/
.box {
    display: grid;
    grid-template-areas: "header header header header"
                         "aside main main main"
                         "footer footer footer footer";
    grid-gap: .5rem;
}
.item.header {
  grid-area: header;
}
.item.aside {
  grid-area: aside;
}
.item.main {
  grid-area: main;
}
.item.footer {
  grid-area: footer;
}

对齐方式

将网格本身与网格外部的可用空间对齐：

• justify-content 内联轴方向
• align-content 块轴方向

设置全部网格项与其各自单元格中的任何可用空间对齐：

• justify-items
• align-items

设置单个网格项与其各自单元格中的任何可用空间对齐：

• justify-self
• align-self

其中，以 justify- 开头的是内联轴方向，以 align- 开头的是块轴方向。在一般情况下，内联轴的方向是从左到右，块轴为从上到下。
注意：在用 writing-mode 改变文本方向后，内联轴和块轴会发生变化。

上面的三组属性中，前两组是在父容器中设置，最后一组是在表格项中设置。

-content 属性

该属性有一下可用值：

• start 将网格对齐到轴的起点
• end 将网格对齐到轴的末端
• center 将网格对齐轴的中心
• stretch 网格填充满整个轴（这是默认值）
• space-between 两端对齐，两端没有空白
• space-around 两端对齐，两端有空白
• space-evenly 所有网格项均匀地分布空白

上面的图片来自 CSS Tricks 的 完整网格指南，它解释了每个值的详细信息。你可以阅读它以获取更多信息。

-items 属性

该属性有一下可用值：

• start 将项目对齐到轴的起点
• end 将项目对齐到轴的末端
• center 将项目对齐轴的中心
• stretch 填充满整个轴（这是默认值）

-self 属性

justify-self align-self 和 justify-items align-items 做同样的事情。不同之处在于它允许你仅更改一个网格项的对齐方式。

隐式网格

假设你创建了一个CSS Grid，但是没有足够的行。在下面的这个例子中，我只为三个项目创建了一个显式网格。（3列，1行）

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2rem;
}

但容器内有6个子元素

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

当你的显式网格中没有足够的空间时，CSS Grid 将自动创建其他网格。默认情况下，它会创建更多行。
如果要切换网格方向，则设置 grid-auto-flow 为 row。
这种自动创建的网格称为隐式网格，你可以使用以下两个属性调整自动创建的列或行：

• grid-auto-columns
• grid-auto-rows

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2rem;
  grid-auto-rows: 4rem;
}

总结

创建网格：

• 显式
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
• 隐式
  • grid-auto-flow 定义方向 [ row | column ] || dense
  • grid-auto-columns
  • grid-auto-rows

网格中项目定位：

• grid-column
• grid-row

网格间距：

• grid-column-gap
• grid-row-gap
• grid-gap 前两个属性的简写（row column）

对齐方式：

• justify-content 网格容器对齐
• align-content
• justify-items 所有网格项对齐
• align-items
• justify-self 单个网格项对齐
• align-self

当然，以上只是 CSS Grid 常用的语法，还有一些语法没有介绍到，比如 grid-template、repeat() 等，不过上面的这些内容足以揭开 Grid 布局的神秘面纱，如果想要继续深入了解，请移步 https://devdocs.io/css/grid 继续阅读。