「CSS篇」CSS 网格 Grid 布局完整指南

整理的这篇关于 css grid 网格布局的文章,是相对比较全面易懂的,篇幅有点长还需您耐心的往下看。

CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像弹性盒 Flexbox 主要是一维系统。您可以使用网格布局,通过将CSS规则应用于父元素(成为网格容器)和该元素的子元素(它们成为网格项)。

父级的属性-网格容器

将父级属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器,所有容器直接子结点自动成为网格项。

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

1.grid-template-rows 和 grid-template-columns

属性 grid-template-rows 和 grid-template-columns 使用以空格分隔的值列表定义网格的列和行。值表示轨道大小,它们之间的空间表示网格线。

value 值的设置有两种:

<track-size> - 可以是任何非负的长度值(px,%,em,fr等)。

<line-name> - 命名法,可设置任意名称。

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

看了上边的代码是不是一头雾水,别急咱们先看个使用 <track-size> 设置值的例子:

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

上边代码将 container 容器设置成了3行5列的网格布局(当您在轨道值之间留出空白区域时,网格线会自动分配正数和负数)。

我们使用第二中方法 <line-name> 命名法设置网格,请注意行名称的括号语法:

.container {
  display: grid;
  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]);
}

这相当于:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

fr 单元允许您将轨道的大小设置为网格容器的可用空间的一部分。例如,如下会将每个项设置为网格容器宽度的三分之一:

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

2.grid-template-areas

通过引用使用 grid-area 属性指定的网格区域的名称来定义网格模板。

重复网格区域的名称会导致内容跨越这些单元格。 . 表示空单元格。

value值设置:

<grid-area-name>

  • 使用指定的网格区域的名称 header/main 等。
  • . 表示空网格单元格
  • none 没有定义网格区域

例如:

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

.container {
  display: grid;
  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 主要区域 ,一个空单元格和一个侧边栏区域。最后一行是所有 footer 页脚区域。

4.grid-column-gap 和 grid-row-gap

指定网格线的大小。您可以将其视为设置列/行之间的间隙宽度。

value 值设置:

<line-size> - 长度值

例子:

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

网格线仅在列/行之间创建,而不会在外边缘上创建。

注:grid-前缀将被删除,grid-column-gap 和 grid-row-gap 重新命名为 column-gap 和 row-gap。Chrome 68 +,Safari 11.2 Release 50+和Opera 54+已经支持无前缀的属性。

5.grid-gap

grid-row-gap 和 grid-column-gap 组合的简写形式。

values 值设置:

<grid-row-gap> <grid-column-gap> - 长度值

上一个示例代码可以简写成:

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

如果第一个值 grid-row-gap 未指定,则将其值与第二值 grid-column-gap 相同。

注意:grid-前缀将被删除 ,grid-gap 并重命名为 gap。Chrome 68 +,Safari 11.2 Release 50+和Opera 54+已经支持这种无前缀的属性。

6.justify-items

沿着内联(行)轴对齐网格项(而不是 align-items 沿着块(列)轴对齐)。此值适用于容器内的所有网格项。

values 值设置:

start - 将要与其单元格的起始边缘齐平的项对齐

end - 将项目与其单元格的结束边缘齐平

center - 对齐其单元格中心的项

stretch - 填充单元格的整个宽度(默认值)

例子:

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

7.align-items

沿着块(列)轴对齐网格项(而不是 justify-items 沿着内联(行)轴对齐)。此值适用于容器内的所有网格项。

values 设置:

start - 将要与其单元格的起始边缘齐平的项目对齐

end - 将项目与其单元格的结束边缘齐平

center - 对齐其单元格中心的项目

stretch - 填充单元格的整个高度(这是默认值)

例子:

.container {
  align-items: start;
}

align-items 与 justify-items 类似,默认沿着网格垂直方向的对齐方式。这里就不一一列举啦。

8.place-items

place-items 可以统一设置 align-items 和 justify-items ,提供了一种简写形式。

values 设置:

<align-items> / <justify-items> - 第一个值是设置 align-items,第二个值是设置 justify-items。如果省略第二个值,则将第一个值分配给这两个属性。

除 Edge 之外的所有主要浏览器都支持 place-items 属性。

9.justify-content

设置网格的对齐方式,如果所有网格项的大小都是非自适应单位(如 px),网格的总大小可能小于其网格容器的大小。在这种情况下,您可以在网格容器中设置网格的对齐方式。

此属性沿着内联(行)轴align-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;
}

10.align-content

设置网格的对齐方式,如果所有网格项的大小都是非自适应单位(如 px),网格的总大小可能小于其网格容器的大小。在这种情况下,您可以在网格容器中设置网格的对齐方式

此属性沿着块(列)轴 justify-content 对齐网格(而不是沿着内联(行)轴对齐网格)。

values 设置:

start - 将网格与网格容器的起始边缘齐平

end - 将网格与网格容器的末端边缘齐平

center - 将网格对齐网格容器的中心

stretch - 调整网格项的大小以允许网格填充网格容器的整个高度

space-around - 在每个网格项之间放置一个均匀的空间,在远端放置半个大小的空格

space-between - 在每个网格项之间放置一个均匀的空间,在远端没有空格

space-evenly- 在每个网格项之间放置一个均匀的空间,包括远端

例子:

.container {
  align-content: center;    
}

align-content 与 justify-content 类似,是沿着垂直方向对齐网格,其他属性就不一一列举拉。

11.place-content

place-content 可以同时设置 align-content 和 justify-content 属性。

values 值设置:

<align-content> / <justify-content> - 第一个值表示align-content,第二个值表示justify-content。如果省略第二个值,则将第一个值分配给这两个属性。

注:除 Edge 之外的所有主要浏览器都支持 place-content 属性。

12.grid-auto-columns 和 grid-auto-rows

设置隐式网格轨道的大小。当网格项目多于网格中的单元格或网格项目放置在显式网格之外时,将创建隐式轨道。

values 值设置:

<track-size> - 可以是任何非负的长度值(px,%,em,fr等)。

使用 grid-column grid-row 定位你的网格项如下:

.container {
  display: grid;
  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 指定这些隐式轨道的宽度:

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

13.grid-auto-flow

如果您没有明确放置在网格上的网格项,则会根据自动放置算法会自动放置项。此属性控制自动放置算法的工作方式。

values 设置:

row - 告诉自动放置算法依次填充每一行,根据需要添加新行(默认)

column - 告诉自动放置算法依次填写每个列,根据需要添加新列

dense - 告诉自动放置算法尝试在网格中较早填充空洞,如果较小的项目稍后出现

14.grid

用于同时设置下列属性grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns,和 grid-auto-flow 的值。

注:您只能指定显式或单格声明的隐含网格属性。

例子:

/*两种写法是等效的*/
.container {
    grid: 100px 300px / 3fr 1fr;
}


.container {
    grid-template-rows: 100px 300px;
    grid-template-columns: 3fr 1fr;
}
/*两种写法是等效的*/
.container {
    grid: auto-flow / 200px 1fr;
 }


.container {
    grid-auto-flow: row;
    grid-template-columns: 200px 1fr; }
/*两种写法是等效的*/
.container {
    grid: auto-flow dense 100px / 1fr 2fr;
 }



.container {
    grid-auto-flow: row dense;
    grid-auto-rows: 100px;
    grid-template-columns: 1fr 2fr;
 }
/*两种写法是等效的*/

.container {
    grid: 100px 300px / auto-flow 200px; }



.container {
    grid-template-rows: 100px 300px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
 }

Children 属性-网格项

注:float,display: inline-block,display: table-cell,vertical-align和column-*属性对网格项目没有影响。

1.grid-column-start / grid-column-end / grid-row-start / grid-row-end

通过引用特定网格线确定网格项在网格中的位置。

grid-column-start / grid-row-start是项目开始的行,grid-column-end / grid-row-end 是项目结束的行。

values 设置:

<line> - 可以是一个引用编号网格线的数字,也可以是一个引用命名网格线的名称

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,则默认情况下该项目将跨越1个轨道。

2.grid-column/grid-row

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

values 设置:

<start-line> / <end-line> - 接受与正常写法相同的所有值,包括 span。

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

如果未声明结束行值,则默认情况下该项目将跨越1个轨道。

3.grid-area

为项目指定名称,以便可以使用该 grid-template-areas 属性创建的模板引用该项目。或者,此属性可用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短简写。

values 设置:

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

4.justify-self

沿着内联(行)轴对齐单元格内的网格项(而不是 align-self 沿着块(列)轴对齐)。此值适用于单个单元格内的网格项。

values 值设置:

start - 将网格项对齐以与单元格的起始边缘齐平

end - 将网格项对齐以与单元格的结束边缘齐平

center - 将网格项对齐在单元格的中心

stretch - 填充单元格的整个宽度(这是默认值)

例子:

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

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

5.align-self

沿着块(列)轴对齐单元格内的网格项(而不是justify-self沿着内联(行)轴对齐)。此值适用于单个网格项内的内容。

values 设置:

start - 将网格项对齐以与单元格的起始边缘齐平

end - 将网格项对齐以与单元格的结束边缘齐平

center - 将网格项对齐在单元格的中心

stretch - 填充单元格的整个高度(这是默认值)

例子:

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

6.place-self

place-self 在单个声明中设置 align-self 和 justify-self 属性。

values 设置:

auto - 布局模式的“默认”对齐方式。

<align-self> / <justify-self> - 第一个值 align-self,第二个值 justify-self。如果省略第二个值,则将第一个值分配给这两个属性。

例子:

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

除 Edge 之外的所有主要浏览器都支持 place-self 速记属性。

原文发布于微信公众号 - 前端infoQ(webinfoq)

原文发表时间:2019-04-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券