CSS 网格 Web 布局完全指南中文版

Question

网页的布局方式千变万化，但是根本的技术就三种，从最开始的 table 布局到现在 div 布局，网页的呈现方式没变，背后的技术却发生很大的变化，这篇文章就来聊聊 CSS 网格 Web 布局完全指南。

原文：https://css-tricks.com/snippets/css/complete-guide-grid/

术语表

• 网格布局（Grid）：由网格容器和网格项组合而成的现代CSS布局形式。
• 网格容器（Grid Container）：设置display:grid的元素，所有网格项（Grid Items）的直属父级元素。网格容器中的子元素也可以为网格容器——嵌套网格布局。
• 网格项（Grid Items）：网格容器的直接子元素（直属后代元素），一旦直属父元素设置为grid布局，那么这个父元素的子元素自动为网格项。
• 网格分隔线（Grid Items）：组成网格基本结构的分隔线。分隔线可以是垂直的（列分隔线），也可以是水平的（行分隔线）。
• 网格单元（Grid Items）：由两个相邻行分隔线和列分隔线交汇出的区域。当执行网格项定位的时候，网格项引用的最小网格单位（注：网格布局中的逻辑概念，实际中并不使用）。
• 网格轨道（Grid Track）：网格单元的一种逻辑布局形式，表示网格中的一行或者一列，其前身是Grid Column和Grid row。
• 网格区域（Grid Area）：网格单元的一种逻辑布局形式，指定网格分隔线包围起来的区域，包含一个或多个连续相邻的网格单元。

网格属性表

这里给出的是 CSS 属性表，不是值不要搞错了。

网格容器（Grid Container）

• display
• grid
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• justify-items
• justify-content
• align-items
• align-content

网格项（Grid Items）

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

CSS Grid 是目前 CSS 中可用的最强大的布局系统。不像 flexbox 的一维布局那样，这个二维布局系统可以操纵行和列。将父元素（网格容器 Grid Container）和子元素（网格项 Grid Items）分别设置CSS规则即可应用网格布局。

介绍

CSS网格布局（亦直接称为“网格”），这个一个二维网格基准的布局系统完全改变了我们传统创建网格布局界面方式。一直以来，我们用CSS设置我们的页面布局，但是从来都做得不够好。一开始我们用表格（tables），然后是浮动（floats），再是定位（postioning）和行内块（inline-block），但是这些方法都只是hack而已，还留下一大堆麻烦的功能性问题（比如垂直居中）。Flexbox在这其中脱颖而出，不过它只能在一维布局上有所建树，而在更加复杂的二维布局面前就显得力不从心了（Flexbox和Grid组合使用风味更佳）。网格（Grid）是第一个专门用来解决布局问题的CSS模块，我们终于不需要想尽办法hack页面布局样式了。

浏览器支持和基本知识

首先，你得定义一个包裹元素（container element），加上dispaly:grid样式，用grid-template-columns和grid-template-rows设置其子元素模板的【行】 【列】样式。

将子元素（child elements）放置到包裹元素之中，对这个子元素应用grid-column和gird-row样式。和flexbox类似的是，网格项的顺序并不重要。你的CSS可以将子元素设置任意的顺序，你还可以用媒体查询（media queries）非常方面地重排元素。想象一下，只要通过几行CSS代码就可以在各种屏幕上重排整个页面，网格布局绝对是有史以来最棒的CSS模块。

到2017年3月为止，很多浏览器已经原生支持而不用前缀定义的Grid属性：Chrome（包括Android），Firefox，Edge，Safari（包括IOS）和Opera。IE10和IE11虽然也能支持，但是它们实现的方式已经老掉牙了，还有一堆过时的语法。

重要术语

在深入网格布局的概念之前，你需要理解一个非常重要的术语。我们这里要介绍的术语长得都非常相像，你如果不去理解其中的含义并记住它们，很快你就会晕头转向了，不过好在这些术语不是很多，现在让我们一起看看吧。

网格容器（Grid Container）

• 定义：使用display:grid的元素，所有网格项（Grid Items）的直属父级元素。
• 例子：在这个例子中，div.container就是网格容器。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

网格项（Grid Item）

• 定义：网格容器的直接子元素。
• 例子：在这个例子中，.item就是网格项，但.sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
  	<p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

网格分隔线（Grid Line）

• 定义：组成网格基本结构的分隔线。分隔线可以是垂直的（列分隔线），也可以是水平的（行分隔线）。
• 例子：这里黄色的竖线就是列分隔线。

网格单元（Grid Cell）

• 定义：由两个相邻行分隔线和列分隔线交汇出的区域。是网格布局中的最小单元。
• 例子：第1,2两条行分隔线和第3,4两条列分隔线交汇出的空间。

网格轨道（Grid Track）

• 定义：两个相邻网格分隔线分隔出来的中间区域。你可以把这个术语看成是网站布局中的一行或者一列。
• 例子：这里第二条行分隔线和第三条行分隔线之间的区域就是网格轨道。

网格区域（Grid Area）

• 定义：由4条分隔线交汇出的全部区域。一个网格区域可能由任意多个网格单元组成。
• 例子：第1,3两条行分隔线和第1,3两条列分隔线交汇出的空间。

本篇详细介网格属性表中的各个属性值和其用法。

• 说明：
  • 网格项(grid item)可以为网格容器(grid container)，也可能为网格单元(grid cell)，因此本篇不使用网格单元作为各属性的描述对象。
  • 网格区域(grid area)是网格单元的一种组织形式。
  • 同理，网格轨道(grid track)也是网格网格单元的一种组织形式。

display

• 定义：将元素定义为一个网格容器，并将其内容设置为网格格式化环境。
• 值：
  • grid：网格项为块级元素
  • inline-grid：网格项为行内元素
  • subgrid：如果你想要设置为网格容器元素本身已经是网格项（嵌套网格布局），用这个属性指明这个容器内部的网格项的行列尺寸直接继承其父级的网格容器属性。

.container {
    display: grid | inline-grid | subgrid;
}

• 注意：在网格容器上使用column, float, clear, vertical-align不会产生任何效果。

grid-template-columns / grid-template-rows

• 定义：定义网格的行和列，值列表用空格分隔。其值代表网格轨道（Grid Track）的尺寸和分隔线之间的空间大小。
• 值：
  • <track-size>： 可以是数值，百分比，fr单位（网格可自由使用的分隔单位，如1fr，2fr）
  • <line-name>：定义网格分隔线的名字（任意）

.container {
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

• 示例： 当你把<line-name>留空时，分隔线会自动使用值作为自己的名称。

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

填充<line-name>，用方括号把分隔线包起来。

.container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

• 注意：一根分隔线可以有超过一个的名字。例如：第二根分隔线可以有两个名字：row1-end和row2-start。

.container{
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

• 如果你的定义中包含重复值，你可以用repeat()函数将它们包裹起来，看起来就像这样：

.container {
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
/* 等价于 */
.container {
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

• fr（fraction of the free space）弹性单位允许你按比例将空余的网格轨道设置分区。比如，下面这行代码会把网格容器的宽度一分为三。

.container {
    grid-template-columns: 1fr 1fr 1fr;
}

• 空余空间在所有非弹性项布局之后才计算。在这个例子里面，剩余空间的宽度首先减去了50px。

.container {
    grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

• 定义：通过引用下属带有grid-area属性的网格区域，组成一个网格模板。重复使用网格区域名称会把网格单元放置在一行中。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。
• 值：
  • <grid-area-name>：由grid-area定义的网格区域名称
  • .（点号） ：代表一个空的网格单元
  • none：不定义网格区域

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

• 示例：

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  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";
}

以上代码生成一个4列3行的网格。整个第一行由header组成，第二行由main区域，空单元和一个sidebar区域组成。最后一行由footer组成。

• 你每行grid-template-areas的值都必须与grid-template-columns定义的单元数量一致。
• 你可以用几个点号表示一个单独的空网格区域。
• 注意：
  • 你是在用这种方式命名网格区域，而不是分隔线。
  • 实际上，当你用这种语法命名网格区域的时候，包裹这个区域两侧的分隔线会自动地获取这个命名。如果你的网格区域叫foo，那么这个网格区域开始的列分隔线和行分隔线都会叫作foo-start，而结束交汇的两根行列分隔线会叫做foo-end。这意味着有些线可能有很多名字，就如上面这个例子中，最左边的分隔线同时拥有三个名字：header-start, main-start, footer-start

grid-template

• 定义：grid-template-rows，grid-template-columns，grid-template-areas的单个声明形式。
• 值：
  • none：将三个属性都设为默认值
  • subgrid：将grid-template-rows，grid-template-columns的值设为subgrid，grid-template-areas设为初始值
  • <grid-template-rows> / <grid-template-columns>：给grid-template-rows，grid-template-columns一个特定的值，相应地，把grid-template-areas置为none

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

• 这个属性也接受更加复杂但更方便的语法，例如：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
/* 等价于 */
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

grid-column-gap / grid-row-gap

• 定义：定义网格线的大小。你可以认为这是在设置两个行/列之间空隙的宽度。
• 值：
  • <line-size>：长度值

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• 示例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

• 行列中才会有空隙，网格外部和边缘不会有这个间距

grid-gap

• 定义：grid-column-gap和grid-row-gap的缩写
• 值：
  • <grid-row-gap> <grid-column-gap>：长度值

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

• 示例：

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

如果grid-row-gap没有定义，那么就会等同grid-column-gap的值。

justify-items

• 定义：沿X轴（行）对齐网格项，align-items则是沿Y轴（列）对齐。这个值会影响容器内的所有网格项。
• 值：
  • start：将内容对齐到网格区域的左侧
  • end：将内容对齐到网格区域的右侧
  • center：将内容对齐到网格区域的中央
  • stretch：填满网格区域宽度（默认值）

.container {
    justify-items: start | end | center | stretch;
}

• 示例：

.container {
  justify-items: start;
}

.container{
  justify-items: end;
}

.container{
  justify-items: center;
}

.container{
  justify-items: stretch;
}

• 这个行为可以由网格项属性justify-self自行定义

align-items

• 定义：沿Y轴（列）对齐网格项，justify-items则是沿X轴（行）对齐。这个值会影响容器内的所有网格项。
• 值：
  • start：将内容对齐到网格区域的顶部
  • end：将内容对齐到网格区域的底部
  • center：将内容对齐到网格区域的中央
  • stretch：填满网格区域高度（默认值）

.container {
  align-items: start | end | center | stretch;
}

• 示例：

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

• 这个行为可以由网格项属性align-self自行定义

justify-content

• 定义：沿X轴（行）对齐网格容器内的网格，align-content则是沿Y轴（列）对齐。有时候你的网格总大小可能会小于网格容器的尺寸。尤其是网格项用非弹性单位（px）布局的时候，所以这个属性就派上用场了。
• 值：
  • start：将网格对齐到网格容器的最左边
  • end：将网格对齐到网格容器的最右边
  • center：将网格对齐到网格容器的中间
  • stretch：将网格项的宽度调整为占满整个网格容器
  • space-around：将空余的空间平均分配在网格项中，左右两侧的空间只有这个平均值的一半
  • space-between：将空余的空间平均分配在网格项中，左右两侧的空间不会有剩余的空间
  • space-evenly：将空余的空间平均分配在网格项中，左右两侧的空间也等同这个值

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

• 示例：

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

align-content

• 定义：沿Y轴（列）对齐网格容器内的网格，align-content则是沿X轴（行）对齐。有时候你的网格总大小可能会小于网格容器的尺寸。尤其是网格项用非弹性单位（px）布局的时候，所以这个属性就派上用场了。
• 值：
  • start：将网格对齐到网格容器的顶部
  • end：将网格对齐到网格容器的底部
  • center：将网格对齐到网格容器的中间
  • stretch：将网格项的高度调整为占满整个网格容器
  • space-around：将空余的空间平均分配在网格项中，上下两侧的空间只有这个平均值的一半
  • space-between：将空余的空间平均分配在网格项中，上下两侧的空间不会有剩余的空间
  • space-evenly：将空余的空间平均分配在网格项中，上下两侧的空间也等同这个值

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

• 示例：

.container {
  align-content: start;	
}

.container {
  align-content: end;	
}

.container {
  align-content: center;	
}

.container {
  align-content: stretch;	
}

.container {
  align-content: space-around;	
}

.container {
  align-content: space-between;	
}

.container {
  align-content: space-evenly;	
}

grid-auto-columns / grid-auto-rows

• 定义：指定任何默认生成的网格轨道（不可见网格轨道）尺寸。当你用grid-template-rows/grid-template-columns指明行或列的位置，而且超出定义好的网格时就会产生不可见网格轨道
• 值：
  • <track-size>：长度数值，百分比，fr单位

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• 为了学习不可见网格轨道是怎么产生的，我们来看看这个例子：

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

这里产生了一个2x2的网格但是想象一下，其中的网格项是这样用grid-column和grid-row定位的：

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

我们让.item-b定位在第5，6根列分隔线之中，但是我们并没有定义第5，6根分隔线。由于我们引用了不存在的分隔线，宽度为0的不可见网格轨道就填充了这个间隙。我们可以用grid-auto-columns和grid-auto-rows指定这些不可见网格轨道的尺寸。

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

• 定义：控制自动放置算法。如果你有不想指定位置的网格项，那么自动放置算法就会从中接手把它们排列好。
• 值：
  • row：告诉自动放置算法将每行按顺序填满，有必要的话新增行
  • column：告诉自动放置算法将每列按顺序填满，有必要的话新增列
  • dense：如果后面产生的网格项比之前留下的空隙要小，自动放置算法会把这个空洞填满

.container {
  grid-auto-flow: row | column | row dense | column dense
}

• 注意：dense可能会让你的网格呈现无序的状态
• 示例：

<section class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</section>

你定义了一个2行5列的网格，将grid-auto-flow设为row（也就是默认值）

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

此时，你只将其中两个网格项做了设置

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因为我们把grid-auto-flow设成了row，所以我们的网格看起来会是这样。注意我们没有进行定位的3个网格项（item-b，item-c，item-d）会这样排列在可用的行中。

相反地，如果我们把grid-auto-flow设成了column，item-b，item-c，item-d会沿着列向下排列：

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

grid

• 定义：下列属性的缩写形式：
  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow
  • 也会把grid-column-gap，grid-column-gap设为初始值，即使这个属性不可以显式地设置这两个属性。
• 值：
  • none：将所有包含属性设为初始值
  • <grid-template-rows> / <grid-template-columns>：指定这两个值，其他子属性设为初始值
  • <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]：相应地为这些属性设置特定值。如果漏了grid-auto-columns，那就会使用grid-auto-rows的值，如果这两个值都漏写了，就会设为它们的初始值

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

• 例子：

.container {
  grid: 200px auto / 1fr auto 1fr;
}

/* 等价于 */

.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

.container {
  grid: column 1fr / auto;
}

/* 等价于 */

.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

• 这个属性也能使用更复杂也更方便的语法。你可以指定grid-template-areas，grid-template-rows和grid-template-columns，并将所有其他子属性设为初始值。这么做可以在它们网格区域里相应地指定分隔线名字和轨道的大小，以下是一个简单的例子：

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

/* 等价于 */

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

本篇详细介网格属性表中的各个属性值和其用法。

grid-column-start / grid-column-end /grid-row-start / grid-row-end

• 定义：指定分隔线使网格项在网格容器内定位。grid-column-start和grid-row-start确定网格项起始位置，grid-column-end，grid-row-end确定网格项结束位置。
• 值：
  • <line>：分隔线序号，或者分隔线名称
  • span<number>：网格项从起始分隔线走过的网格轨道数量
  • span<name>：网格项会扩展到给定分隔线名字的位置
  • auto：自动定位和扩展，默认会扩展一个网格轨道宽度（长度）

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

• 示例：

.item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start
    grid-row-end: 3
}

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

• 如果没有指定grid-column-end / grid-row-end，那么网格项会默认占用一格网格轨道。
• 可以指定z-index控制网格项重叠。

grid-column / grid-row

• 定义：grid-column-start / grid-column-end /grid-row-start / grid-row-end的对应缩写形式。
• 值：
  • <start-line> / <end-line>：每一项都接受其原本的值类型（见上）

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

• 示例：

.item-c {
    grid-column: 3 / span 2;
    grid-row: third-line / 4;
}

• 如果不指定分隔线结束位置，那么网格项默认占1个网格轨道。

grid-area

• 定义：定义一组网格项的名称，这样网格容器的grid-template-areas属性就能使用它们了。这个属性甚至可当做grid-row-start + grid-column-start + grid-row-end + grid-column-end的缩写。
• 值：
  • <name>：你所选的名称
  • <row-start> / <column-start> / <row-end> / <column-end>：数字或分隔线名称

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

• 示例： 给网格项设置一个名称

.item-d {
    grid-area: header
}

作为grid-row-start + grid-column-start + grid-row-end + grid-column-end属性的缩写形式

.item-d {
    grid-area: 1 / col4-start / last-line / 6
}

justify-self

• 定义：将网格项内的内容沿【行】对齐（x轴对齐），而align-self是与【列】对齐（y轴对齐）。这个属性会影响每一个网格项的内容。
• 值：
  • start：将内容沿左侧对齐
  • end：将内容沿右侧对齐
  • center：将内容左右居中对齐
  • stretch：拉伸至网格项的宽度(默认)
• 示例：

.item-a {
    justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
    justify-self: center;
}

.item-a {
    justify-self: stretch;
}

• 你可以通过网格容器的justify-items属性一次性设置所有的网格项。

align-self

• 定义：将网格项内的内容沿【列】对齐（y轴对齐），而justify-self是与【行】对齐（x轴对齐）。这个属性会影响每一个网格项的内容。
• 值：
  • start：将内容沿顶部对齐
  • end：将内容沿底部对齐
  • center：将内容垂直居中对齐
  • stretch：拉伸至网格项的高度(默认)

.item{
  align-self: start | end | center | stretch;
}

• 示例：

.item-a {
    align****-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
    align-self: center;
}

.item-a {
    align-self: stretch;
}

• 你可以通过网格容器的align-items属性一次性设置所有的网格项。