CSS:Grid布局梳理

96 阅读10分钟
概念

CSS Grid网格布局,是一个二维的基于网格的布局系统。它与Flex布局最大的区别是,Flex是一维布局,只能处理一个维度上的元素布局,一行或者一列。而Grid布局是将容器划分成了行和列,产生了一个个的网格,可以灵活的对页面进行布局。

相关术语

在深入了解 Grid 的概念之前,理解术语是很重要的。

网格容器(Grid Container)

在一个元素上使用display:grid属性设置,会将此元素变成网格容器,它是网格项的直接父级元素。

网格项(Grid Item)

网格项是网格容器的直接子元素。

网格线(Grid Line)

构成网格结构的分界线。它们既可以是垂直的,也可以是水平的,并位于行或列的任一侧。

网格轨道(Grid Track)

网格轨道就是两条相邻网格线之间的空间。可以把它们理解成网格的一行或一列。

网格单元格(Grid Cell)

网格单元格就是两个相邻的行和列之间的空间。也就是网格中的“一个格子”,也叫一个“单元”。

网格区域(Grid Area)

一个网格区域可以由任意数量的网格单元格组成。

容器的常用属性

网格容器的常用属性包括:display、grid-template-columns、grid-template-rows、grid-template-areas、grid-template、column-gap、row-gap、gap、justify-items、align-items、place-items、justify-content、align-content、place-content、grid-auto-columns、grid-auto-rows、grid-auto-flow、grid。

display

该属性的作用是将元素设置为网格容器,容器内子元素采用网格格式化上下文。可选的值有两个:

  • grid:生成一个块级网格容器
  • inline-grid:生成一个内联网格容器
grid-template-columns 和 grid-template-rows

这两个属性分别用来定义网格容器中网格轨道的尺寸<track-size>,也就是每行或每列的大小。<track-size>取值为一组使用空格分隔的值列表,可以是长度值、百分比或者等份网格容器中的可用空间(使用 fr 单位)。同时,还可以网格线的名称<line-name>

例如:

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

还可同时设置网格线名称。例如:

.container {
  grid-template-columns: [first] 40px [col-line2] 50px [col-line3] auto [col-line4] 50px [col-line5] 40px [end];
  grid-template-rows: [row-start] 25% [row-line2] 100px [row-line3] auto [row-last];
}

fr 单元代表使用等分网格容器剩余空间来设置网格轨道的大小 。例如,下面的代码会将每个网格项设置为网格容器宽度的三分之一:

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

通过引用网格项属性grid-area指定的“网格区域”名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号(.)代表一个空单元格。这个语法本身可视作网格的可视化结构。可选值如下:

  • grid-area-name:由网格项的 grid-area 属性指定的网格区域名称。
  • .(点号):代表一个空的网格单元。
  • none:不定义网格区域。
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为none。
column-gap / row-gap

该属性用来指定网格线的大小。也可以把它想象为设置行或列之间的间距。

注意:只能在行或列之间创建间距,网格边缘不会有这个间距。

gap

该属性是 column-gap 和 row-gap 的简写语法。即:

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

该属性用来设置沿着行轴线对齐网格项(grid items)。此值适用于容器内的所有网格项。可选值:

  • start:沿所在单元格左侧对齐
  • end:沿所在单元格右侧对齐
  • center:沿所在单元格水平居中对齐
  • stretch:填满单元格的宽度(默认值)
align-items

该属性用来设置沿着列轴线对齐网格项(grid items)。此值适用于容器内的所有网格项。可选值:

  • start:沿所在单元格顶部对齐
  • end:沿所在单元格底部对齐
  • center:沿所在单元格垂直居中对齐
  • stretch:填满单元格的高度(默认值)
place-items

该属性是align-items和justify-items的简写形式。即:

.container {
  place-items: <align-items> <justify-items>;
}

注意:如果省略第二个值,则将第一个值同时分配给这两个属性。

justify-content

该属性是针对整个网格而言的,当网格横向宽度小于容器宽度时,可以用该属性设置网格的对齐方式。可选的值包括:

  • start:网格左侧对齐。
  • end:网格右侧对齐。
  • center:网格水平居中对齐。
  • stretch:调整网格项(grid items) 的宽度,使其填充满整个网格容器的宽度。
  • space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间。
  • space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
  • space-evenly:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间
align-content

和justify-contend类似,该属性是设置竖直方向上的网格对齐方式。可选的值包括:

  • start:网格顶端对齐。
  • end:网格底部对齐。
  • center:网格垂直居中对齐。
  • stretch:调整网格项(grid items) 的高度,使其填充满整个网格容器的高度。
  • space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间。
  • space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
  • space-evenly:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间
place-content

该属性是align-content和justify-content的简写形式。即:

.container {
  place-content: <align-content> <justify-content>;
}

注意:如果省略第二个值,则将第一个值同时分配给这两个属性。

grid-auto-columns / grid-auto-rows

该属性用来指定任何自动生成的网格轨道(grid tracks)(又名隐式网格轨道)的大小。当网格中的网格项多于单元格时,或者当网格项位于显式网格之外时,就会创建隐式轨道。取值可以是长度值、百分比或者等分网格容器中可用空间的份数(使用 fr 单位)。即:

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

注意:当我们引用的网格线不存在的时候,会创建宽度为 0 的隐式网格轨道以填补空缺。所以 grid-auto-columns 和 grid-auto-rows 可以来指定这些隐式轨道的大小。

grid-auto-flow

当有一些没有明确放置在网格上的网格项,可以用该属性告诉自动放置算法如何防止这些网格项。可选值包括:

  • row:告诉自动布局算法依次填充每行,根据需要添加新行 (默认)。
  • column:告诉自动布局算法依次填入每列,根据需要添加新列。
  • dense:告诉自动布局算法在稍后出现较小的网格项时,尝试填充网格中较早的空缺。
grid

该属性是如下属性的简写形式:grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow。值的设置形式包括如下几种:

  • none:将所有子属性设置为其默认值。
  • grid-template:同grid-template写法定义相同。
  • grid-template-rows / [ auto-flow && dense? ] <grid-auto-columns>?:将grid-template-rows设置为指定的值。如果 auto-flow 关键字位于斜杠的右侧,则会将 grid-auto-flow 设置为 column。如果另外指定了 dense 关键字,则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-columns,则将其设置为 auto。
  • [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>:将 grid-template-columns 设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧,则会将grid-auto-flow 设置为 row 。 如果另外指定了 dense 关键字,则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-rows ,则将其设置为 auto。
网格项的常用属性

网格项,也就是网格容器内子元素的常用属性包括:grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-area、justify-self、align-self、place-self。

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-end / grid-row-end,默认情况下,该网格项将占据 1 个轨道。
  • 网格项可以相互重叠。可以使用 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>;
}

注意:如果没有声明分隔线结束位置,则该网格项默认占据 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>:数字或分隔线名称
justify-self

沿着行轴线对齐网格项,此值适用于单个网格项内的内容。可选值包括:

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

沿着列轴线对齐网格项,此值适用于单个网格项内的内容。可选值包括:

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

该属性是align-self 和 justify-self 的简写形式。可选值包括:

  • auto – 采用 “默认” 对齐方式。
  • <align-self> <justify-self>:第一个值设置 align-self 属性,第二个值设置 justify-self 属性。如果省略第二个值,则将第一个值同时分配给这两个属性。
总结

本文是对Grid网格模型的一些概念和属性的总结,方便日后查阅。

如有错漏,欢迎指正讨论!!!