深入探索 CSS Grid

微信扫一扫,分享到朋友圈

深入探索 CSS Grid

每日前端夜话 第337篇

翻译: 疯狂的技术宅

作者:Hammad Ahmed

来源:scotch

正文共:8941  字

预计阅读时间:15 分钟

简介

本教程将深入探讨 CSS 网格布局,并探索几乎所有的属性和功能。读完之后,你将能够用这种出色的 CSS 附加功能去处理任何一种布局。

目录

  • 简介

  • 数据类型

  • 显式网格和隐式网格

  • 自动放置

  • 基于行的放置

  • 跨网格的元素

  • 浏览器支持

  • 总结

术语:Grid

Grid 是二维网格系统。它可以用来构建复杂的布局以及较小的界面。

属性:display

只需要把一个元素的 display 属性设置为 grid ,它就成了网格。

1.grid-to-be {
2    display: grid;
3}

这样就使 .grid-to-be 成为 grid 容器 ,并使其子项成为 grid 项目

术语:网格线

在定义明确的网格轨道时会创建网格线。你可以用它们去放置 网格项

术语:网格轨道

网格线是两条网格线之间的空间。网格中的行和列是网格轨道。

属性:grid-template-columns

可以使用 grid-template-columns 属性来创建列。要定义列,应该按照你希望它们在网格中出现的顺序,把 grid -template-columns 属性设置为列大小。我们来看一下:

1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4}

这里定义了三个宽度为 100px 的列。所有网格项将会按顺序排列在这些列中。行高将等于该行中最高元素的高度,但是可以用 grid-template-rows 来进行更改。

请注意,在仅定义列而未定义行的情况下,元素将会填充列,然后在行中折返。这是由于 Grid 使用了网格线和网格线创建的隐式网格。

属性:grid-template-rows

grid-template-rows用于定义网格中行的数量和大小。它的语法和 grid-template-columns 类似。

1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-template-rows: 100px 100px 100px;
5}

如果只有 grid-template-rows 而没有 grid-template-columns 属性会导致列宽等于该行中最宽元素的宽度。

属性:grid-template

grid是 grid-template-rowsgrid-template-columnsgrid-template-areas 三个属性的简写。

使用方式如下:

1.grid {
2    grid-template:
3        "header    header     header"  80px
4        "nav       article    article" 600px
5        / 100px 1fr;
6}

你可以像平时那样去定义模板区域,将每行的宽度放在最右面,最后再把所有列的宽度放在正斜杠之后。像以前一样,你可以把所有内容放在一行。

数据类型:

fr 是为 CSS 网格布局创建的新单位。 fr 使你不需要计算百分比就能创建灵活的网格, 1fr 表示可用空间的一等份。可用空间被分为等份数字的总数个,所以 3fr 4fr 3fr 把空间划分为 3 + 4 + 3 = 10 个部分,分别为三行或列分配 3、4 和 3 个等份的可用空间。例如:

1.grid {
2    display: grid;
3    grid-template-columns: 3fr 4fr 3fr;
4}

如果将固定单位与弹性单位相混合,则每个等份的可用空间是在减去固定空间后计算的。让我们看另一个例子:

1.grid {
2    display: grid;
3    grid-template-columns: 3fr 200px 3fr;
4}

单个等份的宽度是这样计算的:( .grid 的宽度 – 200px) / (3 + 3) 。如果存在间隔(gutter)的话,其空间一开始也会从 .grid 的宽度中减去。这是 fr 之间的区别,即百分比不包括你用 grid-gap 定义的 gutter。

这里的 3fr 200px 3fr 基本上等于 1fr 200px 1fr。

显式网格和隐式网格

显式网格是使用属性 grid-template-rowsgrid-template-columns 创建的网格。隐式网格由 Grid 创建的 网格线网格轨道 组成,用来保存带有 grid-template -* 属性的手动创建的网格之外的项目。

自动放置(Auto-placement)

当我们创建这样的网格时:

1.grid {
2    display: grid;
3    grid-template-columns: 1fr 1fr 1fr;
4}

即使我们只定义了列,但作为 .grid 直接子项的单个单元格仍按行放置。这是因为 Grid 包含自动放置规则。

属性:grid-auto-columns

没有被 grid-template-columns 所定义的隐式创建的网格列轨道所创建的列的大小,可以用 grid-template-columns 属性定义,其默认值为 auto ;你可以把它设置为自己所需要的值。

1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-auto-columns: 50px;
5}

属性:grid-auto-rows

grid-auto-rows的工作方式类似于 gridtemplatecolumns

1.grid {
2    display: grid;
3    grid-template-rows: 100px 100px 100px;
4    grid-auto-rows: 50px;
5}

属性:grid-auto-flow

grid-auto-flow属性控制 网格单元 如何流入网格,其默认值为 row

1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-auto-flow: column;
5}

上面网格中的“网格单元”将会被一一填充,直到没有剩余的项目为止。

基于行的放置

用行号将项目放置在网格中的操作被称为基于行的放置。

属性:grid-row-start

如果你希望特定的网格项从特定的行开始,则可以这样:

1.grid-item {
2    grid-row-start: 3;
3}

属性:grid-row-end

如果你希望特定的网格项目在特定的行上结束,则可以这样:

1.grid-item {
2    grid-row-end: 6;
3}

属性:grid-column-start

如果你希望特定的网格项目从特定的列开始,可以这样:

1.grid-item {
2    grid-column-start: 3;
3}

属性:grid-column-end

如果你希望特定的网格项在特定的列上结束,可以这样:

1.grid-item {
2    grid-column-end: 6;
3}

属性:grid-row 和 grid-column

可以用 grid-rowgrid-column 属性来手动放置和调整网格项目的大小。每个属性都是其各自的 star 和 end 属性的简写: grid-row-startgrid-row-endgrid-column-start 和   grid-column-end

用正斜杠 “/ ”来分隔开始和结束值:

1.grid-item {
2    grid-column: 3 / 5;
3    grid-row: 2 / 7;
4}

属性:grid-area

你可以把 grid-area 用于对网格行和网格列的简写。它是这样的: / / /

1.grid-item {
2    grid-area: 2 / 3 / 7 / 5;
3}

该代码的行为与上一个标题中的代码相同。

跨网格的元素

要使一个元素跨网格,可以使用 grid-rowgrid-column 属性。设置起始行 1 和结束行 -1。此处 1 表示相关轴上最左边的网格线,-1 表示相关轴上最右边的网格线。在从右到左的书写脚本中,这是相反的,即 1 表示最右边的行,-1 表示最左边的行。

1.grid-item-weird {
2    grid-column: 1 / -1;
3}

如果你希望单个项目占据整个网格,可以对 grid-rowgrid-column 都这样做:

1.grid-item-weird {
2    grid-row: 1 / -1;
3    grid-column: 1 / -1;
4}

或者简单地:

1.grid-item-weird {
2    grid-area: 1 / 1 / -1 / -1;
3}

关键字:span

当使用 grid-rowgrid-column 时,不用显式定义行号,而是可以用 span 关键字来声明该项应涵盖的行数或列数:

1.grid-item {
2    grid-column: 3 / span 2;
3}

你也可以把项目固定在终点线上,并朝另一个方向跨越。下面的代码实现了与上面相同的结果:

1.grid-item {
2    grid-column: span 2 / 5;
3}

可以用相同的方式把 span 应用在行上。

术语:网格单元

网格单元格是四个相交的网格线之间的空间,就像表格中的单元格一样。

术语:网格区域

网格区域是占据网格上一个矩形区域的网格单元。它们是用命名的网格区域或基于行的放置创建的。

属性:grid-template-areas (& grid-area)

除了用诸如 spangrid-column 之类的东西放置和调整单个网格项目外,还可以用所谓的“模板区域”。 grid-template-area 允许你命名网格区域,以便网格项目可以进一步填充它们。

1.grid {
2    display: grid;
3    grid-template-columns: 100px 1fr 100px;
4    grid-template-rows: 100px 800px 100px;
5    grid-template-areas:
6        "header     header   header"
7        "sidebar-1  content  sidebar-2"
8        "footer     footer   footer"
9}

这里的一对引号代表一行网格。你可以将所有内容放在一行中,而不用列对齐,但是我所做的只是为了使它看起来更加整洁。我首先定义了三列三行,然后为每个单元命名。通过在第一行中重复执行三次 “header”,告诉 CSS 要做的是用名为 header 的网格项覆盖整个过程。其余的也一样。

以下是通过用 grid-template-areas 命名每个网格项目,使其拥有为其定义的空间的方式:

 1.header {
2    grid-area: header
3}
4
5.sidebar-1 {
6    grid-area: sidebar-1
7}
8
9.content {
10    grid-area: content
11}
12
13.sidebar-2 {
14    grid-area: sidebar-2
15}
16
17.footer {
18    grid-area: footer
19}

没有什么比这更容易了,尤其是用于布置内容的 CSS 其他方法。

在前面你已经看到 grid-area 也用于基于行的定位。

如果想把单元格留空,则可以用点 . 来设置:

1.grid {
2    display: grid;
3    grid-template-columns: 100px 1fr 100px;
4    grid-template-rows: 100px 800px 100px;
5    grid-template-areas:
6        "header header header"
7        "sidebar content sidebar"
8        "footer footer ."
9}

在这里,页脚以第二列结束。

属性:grid-template

grid是 grid-template-rowsgrid-template-columnsgrid-template-areas 三个属性的简写。

使用方式如下所示:

1.grid {
2    grid-template:
3        "header    header     header"  80px
4        "nav       article    article" 200px
5        / 100px auto;
6}

可以像通常那样定义模板区域,把每行的宽度放在其最右面,然后将所有列的宽度放在正斜杠之后。像以前一样,你可以把所有得内容放在同一行。

函数:repeat()

repeat() 函数有助于使 网格轨道 列表变得不是那么多余,并为其添加了语义层。使用起来非常简单直观。我们来看一下:

你也可以重复某种形式的轨道列表,如下所示:

1.grid {
2    display: grid;
3    grid-template-columns: repeat(3, 1fr 2fr); // this is the same as: 1fr 2fr 1fr 2fr 1fr 2fr
4}

repeat() 不必是值的唯一部分。你可以在其前后添加其他的值。例如: grid-template-columns:2fr repeat(5,1fr) 4fr;

属性:grid

这里的 gridgrid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columns 和   grid-auto-flow 六个属性的简写。

首先,你可以像这样使用 grid-template (上一个示例):

1.grid {
2    grid:
3        "header    header     header"     80px
4        "nav       article    article"    200px
5        / 100px auto;
6}

其次它不是你看上去的那样, gridcss 属性不一样:

是的,你没有看错:一个名为 css 的属性,所有 CSS 属性的简写。我也是在某次思考中偶然知道了它。但是现在我不会教你怎么用,以后有可能会。

第三,你以某种方式使用 grid 。你可以将   grid-template-rowsgrid-auto-columnsgrid-auto-rows 结合使用。语法非常简单:

1.grid-item {
2    grid: <grid-template-rows> / <grid-auto-columns>;
3    grid: <grid-auto-rows> / <grid-template-columns>;
4}

例如:

1.grid-item-1 {
2    grid: 50px 200px 200px/ auto-flow 60px;
3}
4
5.grid-item-2 {
6    grid: auto-flow 50px / repeat(5, 1fr);
7}

请注意,在该值之前应该先使用 auto-flow 关键字。

术语:Gutter

Gutter 是单独分隔 网格行网格列 的空间。 grid-column-gap , grid-row-gapgrid-gap 是用于定义 gutter 的属性。

属性:grid-row-gap

grid-row-gap用于定义各个 网格行 之间的空间。它是这样的:

1.grid {
2    display: grid;
3    grid-template-rows: 100px 100px 100px;
4    grid-row-gap: 10px;
5}

这会将 网格行 彼此隔开10个像素。

属性:grid-column-gap

grid-column-gap用于定义各个 网格列 之间的空间。它是这样的:

1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-column-gap: 10px;
5}

这会将 网格列 彼此隔开 10 个像素。

属性:grid-gap

grid-gap是将 grid-column-gapgrid-row-gap 结合在一起的简写属性。一个值定义了两个 gutter 。例如:

1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-template-rows: 100px 100px 100px;
5    grid-gap: 10px;
6}

属性:order

可以用 order 属性来控制网格单元的顺序。看下面的例子:

 1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-template-rows: 100px 100px 100px;
5    grid-gap: 10px;
6}
7
8.grid .grid-cell:nth-child(5) {
9    order: 1;
10}

在代码中,第五个网格单元被放置在网格的最后,因为其他网格单元根本没有定义顺序。如果定义了顺序,则会遵循数字顺序。两个或多个 网格单元 可以有相同的顺序。具有相同顺序或完全没有顺序的文件将会根据 HTML 文档的逻辑顺序进行放置。再看下面:

 1.grid {
2    display: grid;
3    grid-template-columns: 100px 100px 100px;
4    grid-template-rows: 100px 100px 100px;
5    grid-gap: 10px;
6}
7
8.grid .grid-cell {
9    order: 1
10}
11
12.grid .grid-cell:nth-child(5) {
13    order: 2;
14}

上面的例子产生的结果与前面的例子相同。

函数:minmax()

maxmax()函数是 CSS 网格布局的新增功能。此功能为我们提供了指定 网格轨道 的最小和最大尺寸的方法。

看下面的例子:

1.grid {
2    display: grid;
3    grid-template-columns: 1fr minmax(50px, 100px) 1fr;
4}

使用上面的代码,在减小窗口宽度时,中间列将保持 100px 的宽度,直到第一列和最后一列减小到其内容的宽度为止。这对于制作响应式布局特别有用。

关键字:auto

如果父容器的尺寸是固定的(例如固定宽度),则 auto 关键字作为网格项目的宽度将会使该项目充满容器的整个宽度。在有多个项目的情况下,就像 fr 那样划分空间。但是如果将 autofr 一起使用,则 auto 表现为该项目内容的宽度,剩余的可用空间被划分为 fr

函数:fitcontent()

当你希望宽度或高度表现得像 auto 一样,但又希望受到最大宽度或高度约束时,可以用 fitcontent() 函数.

1.grid-item {
2    width: fitcontent(200px);
3}

在这里,最小为适合内容,最大为 200px。

关键字:auto-fill

你可以用 auto-fill 来用最多的 网格轨道 填充相关的轴(行或列)而不会溢出。要实现这个目的,需要用到 repeat() 函数:

1.grid {
2    display: grid;
3    grid-template-columns: repeat(auto-fill, 50px);
4}

但这会降低单个轨道的灵活性。通过与 minmax() 一起使用,可以同时具有自动填充功能和灵活性。

1.grid {
2    display: grid;
3    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
4}

这样,你可以至少包含一列,并且在特定浏览器宽度中包含多个 50px 的列。

请注意,即使可能未用单元格填充, auto-fill 也会创建网格轨道。

auto-fit

auto-fit的行为与 auto-fill 相同,不同之处在于它会折叠所有空的重复轨道。空轨道是指没有放置网格项目或跨越网格项目的轨道。

dense

借助 dense 关键字,你可以将项目回填到 空网格单元 中,这些单元是因为你尝试做了一些的奇怪的事(例如 spanning )而被创建的。在任何 span 内你都可以将 dense 关键字与 grid-auto-flow 配合使用,如下所示:

1.grid {
2    display: grid;
3    grid-template-column: repeat(auto-fill, minmax(50px, 1fr));
4    grid-auto-flow: dense;
5}

你可以把它用在照片库之类的页面中,但在用于表单时要特别小心,因为这可能会打乱表单子元素的特定顺序。

浏览器支持

在撰写本文时,浏览器对 CSS 网格布局有很好的支持。根据 caniuse.com 的说法,除了 Internet Explorer 11部分支持 -ms 前缀和 Opera Mini 之外,所有主流浏览器均支持 CSS 网格布局。

总结

与以前的方法相比,CSS 网格使我们能够以更高的控制力、便捷性和速度来进行布局。在本教程中,我们学习了 Grid 的所有主要元素,包括创建轨道、定位和调整单元格的大小,以及使网格流畅和响应,以及使用诸如 auto-fillminmax() 之类的关键字。

原文链接

https://scotch.io/tutorials/deep-dive-into-css-grid-2

2020年

京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

点击文末  阅读全文   查看细节。

长按二维码,加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

微信扫一扫,分享到朋友圈

深入探索 CSS Grid

采编神器科大讯飞录音笔与智能本 入选两会安徽…

上一篇

52亿拿下中国三大电池厂?大众收购国轩高科或将成真

下一篇

你也可能喜欢

深入探索 CSS Grid

长按储存图像,分享给朋友