CSS Grid 系列(上)-Grid布局完整指南

.container {
  grid-template: none | subgrid |  / ;
}

它也可以使用一个更复杂但相当方便的语法来指定这三个值。 一个例子：

.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-template 不会重置隐式网格属性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而这可能是大多数情况下你想要做的。因此建议使用grid属性来代替grid-template。

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

值：

line-size - 一个长度值

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

举例：

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

只能在列/行之间创建缝隙，而不是在外部边缘创建。

grid-row-gap 和 grid-column-gap 的缩写

.container {
  grid-gap:  ;
}

Example:

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

如果没有指定 grid-row-gap，则会被设置为与 grid-column-gap 相同的值。

沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。

值：

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

也可以通过给单个 grid item 设置justify-self属性来达到上述效果。

沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

值：

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

也可以通过给单个 grid item 设置align-self属性来达到上述效果。

有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。

值：

start - 网格与网格容器的左边对齐

end - 网格与网格容器的右边对齐

center - 网格与网格容器的中间对齐

stretch - 调整g rid item 的大小，让宽度填充整个网格容器

space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙

space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

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

有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着列轴对齐网格（与之对应的是 justify-content, 即沿着行轴对齐）。

值：

start - 网格与网格容器的顶部对齐

end - 网格与网格容器的底部对齐

center - 网格与网格容器的中间对齐

stretch - 调整 grid item 的大小，让高度填充整个网格容器

space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙

space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

.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-template-rows/grid-template-columns）时被创建。

值：

- 可以是一个长度值，一个百分比值，或者一个自由空间的一部分（使用 fr 单位）

.container {
  grid-auto-columns:  ...;
  grid-auto-rows:  ...;
}

为了说明如何创建隐式网格轨道，思考如下代码：

.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 item，则自动放置算法会自动放置这些项目。 而该属性则用于控制自动布局算法的工作方式。

值：

row - 告诉自动布局算法依次填充每行，根据需要添加新行

column - 告诉自动布局算法依次填充每列，根据需要添加新列

dense - 告诉自动布局算法，如果后面出现较小的 grid item，则尝试在网格中填充空洞

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

需要注意的是，dense 可能导致您的 grid item 乱序。

举例， 考虑如下 HTML：

  
item-a
  
item-b
  
item-c
  
item-d
  
item-e

你定义一个有5列和2行的网格，并将 grid-auto-flow 设置为 row（这也是默认值）：

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

当把 grid item 放在网格上时，你只把其中两个设置了固定的位置：

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

因为我们将 grid-auto-flow 设置为row，所以我们的grid就像这样。 注意观察我们没有做设置的三个项目（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-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。 它同时也将 sets grid-column-gap 和 grid-row-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 |  /  |  [ [/ ]];
}

举例：

以下代码写法等价

.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 item 在网格内的位置。grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。

值：

: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线

span : 网格项将跨越指定数量的网格轨道

span : 网格项将跨越一些轨道，直到碰到指定命名的网格线

auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道

.item {
  grid-column-start:  |  | span  | span  | auto
  grid-column-end:  |  | span  | span  | auto
  grid-row-start:  |  | span  | span  | auto
  grid-row-end:  |  | span  | span  | 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，默认情况下，该网格项将跨越1个轨道。

网格项可以相互重叠。 您可以使用z-index来控制它们的堆叠顺序。

grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的简写形式。

值：

/ - 每个值的用法都和属性分开写时的用法一样

.item {
  grid-column:  /  |  / span ;
  grid-row:  /  |  / span ;
}

举例：

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

如果没有指定结束行值，则该网格项默认跨越1个轨道。

给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。另外也可以做为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写形式。

值：

- 你的命名

/ / / - 可以是数字，也可以是网格线的名字

.item {
  grid-area:  |  /  /  / ;
}

举例:

给一个网格项命名

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

沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）。 此属性对单个网格项内的内容生效。

值：

start - 将内容对齐到网格区域的左端

end - 将内容对齐到网格区域的右端

center - 将内容对齐到网格区域的中间

stretch - 填充网格区域的宽度 (这是默认值)

举例：

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

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

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

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

要为网格中的所有grid items 设置对齐方式，也可以通过 justify-items 属性在网格容器上设置此行为。

沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）。 此属性对单个网格项内的内容生效。

值：

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

要为网格中的所有grid items 统一设置对齐方式，也可以通过 align-items 属性在网格容器上设置此行为。

加微信号: astak10或者长按识别下方二维码进入前端技术交流群 ，暗号：写代码啦

每日一题，每周资源推荐，精彩博客推荐，工作、笔试、面试经验交流解答，免费直播课，群友轻分享... ，数不尽的福利免费送