Grid布局

Grid 布局是 CSS 中最强大的布局系统。与 flex 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。

网格容器(Grid Container) 属性

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

网格项(Grid Items) 属性

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

display

将元素定义为网格容器，并为其内容建立新的 网格格式上下文。
grid ：生成一个块级网格
inline-grid ：生成一个内联网格

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

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

值：
– <track-size>： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
– <line-name>：你可以选择的任意名称

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

当你在 网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配正数和负数名称：

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

但是你可以明确的指定网格线(Grid Line)名称，例如 <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];
}

请注意，一条网格线(Grid Line)可以有多个名称。例如，这里的第二条 行网格线(row grid lines) 将有两个名字：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]);
}
.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

fr 单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：

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

剩余可用空间是除去所有非灵活网格项 之后 计算得到的。在这个例子中，可用空间总量减去 50px 后，再给 fr 单元的值 3 等分：

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

grid-template-areas

通过引用 grid-area 属性指定的 网格区域(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 区域组成。

你的声明中的每一行都需要有相同数量的单元格。

你可以使用任意数量的相邻的 点. 来声明单个空单元格。 只要这些点.之间没有空隙隔开，他们就代表一个单独的单元格。

注意你 不能 用这个语法来命名网格线，只是命名 网格区域 。当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线 和 起始列网格线 的名称将为 foo-start，而最后一条行网格线 和 最后一条列网格线 的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start

grid-template

用于定义 [grid-template-rows]，[grid-template-columns]，[grid-template-areas]简写属性。

值：

• none：将所有三个属性设置为其初始值
• <grid-template-rows> / <grid-template-columns>：将 [grid-template-columns]和 [grid-template-rows] 设置为相应地特定的值，并且设置[grid-template-areas]

.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

指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

值：

<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>;
}

如果grid-row-gap没有定义，那么就会被设置为等同于 grid-column-gap 的值。例如下面的代码是等价的：

.container{
  /* 设置 grid-column-gap 和 grid-row-gap */  
  grid-column-gap: 10px;
  grid-row-gap: 10px; 
 
  /* 等价于 */  
  grid-gap: 10px 10px;
 
  /* 等价于 */  
  grid-gap: 10px;
}

justify-items

沿着 inline（行）轴线对齐网格项(grid items)（相反的属性是 align-items 沿着 block（列）轴线对齐）。此值适用于容器内的所有网格项。

• start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
• end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
• center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
• stretch：填满单元格的宽度（默认值）

align-items

沿着 block（列）轴线对齐网格项(grid items)（相反的属性是 justify-items沿着 inline（行）轴线对齐）。此值适用于容器内的所有网格项。

• start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
• end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
• center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
• stretch：填满单元格的高度（默认值）

place-items

place-items 是设置 align-items 和 justify-items 的简写形式。

<align-items> <justify-items>：第一个值设置 align-items 属性，第二个值设置 justify-items 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

justify-content

有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 inline（行）轴线对齐网格（相反的属性是 align-content ，沿着 block（列）轴线对齐网格）。

值：

• start：将网格对齐到 网格容器(grid container) 的左侧起始边缘（左侧对齐）
• end：将网格对齐到 网格容器 的右侧结束边缘（右侧对齐）
• center：将网格对齐到 网格容器 的水平中间位置（水平居中对齐）
• stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
• space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
• space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
• space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

align-content

有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 block（列）轴线对齐网格（相反的属性是 justify-content，沿着 inline（行）轴线对齐网格）。

值：

• start：将网格对齐到 网格容器(grid container) 的顶部起始边缘（顶部对齐）
• end：将网格对齐到 网格容器 的底部结束边缘（底部对齐）
• center：将网格对齐到 网格容器 的垂直中间位置（垂直居中对齐）
• stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
• space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
• space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
• space-evenly：在每个网格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

place-content

place-content 是设置 align-content 和 justify-content 的简写形式。

<align-content> <justify-content>：第一个值设置 align-content 属性，第二个值设置 justify-content 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

grid-auto-columns / grid-auto-rows

指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。（参见显式网格和隐式网格之间的区别)
值：

<track-size>：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}
.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 来指定这些隐式轨道的大小：

子元素 网格项(Grid Items) 属性

注意：float，display: inline-block，display: table-cell，vertical-align 和 column-* 属性对网格项无效。

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

通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start是网格项开始的网格线，grid-column-end/ grid-row-end 是网格项结束的网格线。

值：

• <line> ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
• span <number> ：该网格项将跨越所提供的网格轨道数量
• span <name> ：该网格项将跨越到它与提供的名称位置
• auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度

grid-column / grid-row

分别为 grid-column-start + grid-column-end 和 grid-row-start) + grid-row-end 的简写形式。

• <start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度

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>：数字或分隔线名称

justify-self

沿着 inline（行）轴线对齐网格项（ 相反的属性是 align-self，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。

值：

• start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
• end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
• center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
• stretch：填满单元格的宽度（默认值）

align-self

沿着 block（列）轴线对齐网格项(grid items)（ 相反的属性是 justify-self，沿着 inline（行）轴线对齐）。此值适用于单个网格项内的内容。

值：

• start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
• end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
• center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
• stretch：填满单元格的高度（默认值）

place-self

place-self 是设置 align-self 和 justify-self 的简写形式。

值：

auto – 布局模式的 “默认” 对齐方式。
<align-self> <justify-self>：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。