解析CSS中的Grid布局完全指南10分钟理解CSS3 Grid布局CSS Grid 网格布局全解析5分钟教你学会 CSS Grid 布局CSS Grid布局教程之网格单元格布局CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之什么是网格布局使用CSS Grid布局实现网格的流动

Grid 是一个基于二维网格布局的系统，有了它我们可以非常方便的实现过去很复杂布局，无需再使用 float , inline-block , position 这些本质上是 hack 的方法。

CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。

它像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。

网格布局概念

在学习之前需要了解以下网格的几个概念。

网格轨道（Grid Tracks）

网格轨道 是两条网格线之间的空间。它们通过使用属性 grid-template-columns 和 grid-template-rows 在网格中定义。

上图中有两行三列，一行或一列就叫做轨道。

网格线（Grid Lines）

使用 Grid 布局在显式网格中定义轨道的同时会创建网格线。

网格线可以用它们的编号来寻址。在从左到右的语言中， 列线1 将位于网格的左侧， 行线1 将位于其顶部。线编号遵循文档的写入模式，因此在从右到左的语言中， 列线1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。

网络单元格（Grid Cell）

在 Grid 布局中，网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，非常像表格单元格。

网格区域（Grid Areas）

网格区域是网格中由一个或者多个网格单元格组成的一个矩形区域。本质上，网格区域一定是矩形的。例如，不可能创建T形或L形的网格区域。

网格间距（Gutters）

网格间距是网格轨道之间的间距，可以通过 grid-column-gap ， grid-row-gap 在Grid布局中创建。

使用 Grid 布局

和 flex 类似，要使用网格布局，首先要有一个容器，将一个元素的 display 设置为 grid 就可以得到一个 grid 容器。容器的子项就是网格项（grid items），它有点类似 table 中的 td ，但是更加灵活。

float , clear , 和 vertical-align 元素对网格容器不起作用。

容器上的属性

网格模板

创建了网格容器，我们就可以定义这个网格有多少行有多少列，并且每一行每一列的大小。

grid-template-rows

我们使用 grid-template-rows 来显性定义网格有多少行。它可以取如下的值：

none 关键字，表示不明确的网格。所有的行和其大小都将由 grid-auto-rows 属性隐式的指定。

非负值的长度大小 ：如 px, em, vw 等

百分比 ：相对于网格容器的，如果是 inline-grid ，则百分比值将被视为 auto

flex ：非负值，用单位 fr 来定义网格轨道大小的弹性系数。每个定义了 flex 的网格轨道会按比例分配剩余的可用空间

max-content 关键字，表示以网格项的最大的内容来占据网格轨道的

min-content 关键字，表示以网格项的最大的最小内容来占据网格轨道

auto 如果该网格轨道为最大时，等同于 max-content ，为最小时，等同于 min-content

grid-template-columns

它和 grid-template-rows 类似，一个设置网格行，一个是设置网格列。

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

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; }

Grid 中可以使用的函数

在 Grid 布局中我们还可以使用如下 3 个函数

repeat()

repeat 函数可以以一种更简洁的方式去表示大量而且重复行的表达式。

比如上面 grid-template-columns: 1fr 1fr 1fr; 我们可以写成 repeat(3, 1fr) 。它的第一个参数是重复的次数，而可以为 auto-fill 和 auto-fit 。

auto-fill

如果容器有明确的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果任何重复次数都会溢出，则重复次数为1。

auto-fit

与 auto-fill 的行为相同，只是在放置网格项后，任何空的重复轨道都会折叠。

 #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; }

minmax()

定义了一个长宽范围的闭区间。它接受两个参数，最小值 和 最大值。它返回这个区间中的值。

如 minmax(max-content, 300px) ，最大不能大于 300px

minmax(200px, 1fr) 最小不能小于 200px

fit-content()

它相当于 min(maximum size, max(minimum size, argument)) 。参数可以是长度值和百分比。

它在内容的最小值和参数中去一个最大值，然后再在内容的最大值中取一个最小值。

也就是当内容少时，它取内容的长度，如果内容多，内容长度大于参数长度时，它取参数长度。

grid-template-areas

这个属性网格区块，需要和 grid-area 配合使用，它的值可以是 none 和 字符串 。

为字符串时每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元(cell)会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。

 #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; }

grid-template-areas 字符串，关联 grid item 的 grid-area ，用它定义一片区域。

grid-template

是 grid-template-rows 、 grid-template-columns 和 grid-template-areas 的简写。

它的值可以分三种情况：

• none
• 只有定义行和列时可以使用 rows/columns 语法，如 grid-template: 100px 1fr / 50px 1fr;
• 当三个都有时，也用一个 / 分隔，而且它的右边也还是 columns ，但是它的左边语法是 ? ? ? 。

 .page { grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto; } /* line-names 是可选的，自定义名称，需要使用中括号包裹，它其实相当于注释 string 网格项 grid-area 的关联值 track-size 这一行的大小 */

 #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-column: foot; }

grid-row-gap / row-gap

用来设置行元素之间的间隙(gutter) 大小。它的值可以是长度值、百分比和 normal 。

CSS Grid Layout 起初是用 grid-row-gap 属性来定义的，目前逐渐被 row-gap 替代。但是，为了兼容那些不支持 row-gap 属性的浏览器，你需要使用带有前缀的属性。

 .box{ grid-row-gap: 1em; }

grid-column-gap / column-gap

用来设置元素列之间的间隔 (gutter) 大小。它的值可以是长度值、百分比和 normal 。

normal 在 多列布局 时默认间隔为1em，其他类型布局默认间隔为 0。

和 grid-row-gap 一样，它渐渐被 column-gap 取代。

 .page { grid-column-gap: 1em; }

grid-gap / gap

是上面两个属性的简写，语法是 row-gap column-gap 。如果没有 column-gap 那么它将被设置成跟 row-gap 一样的的值。

它也渐渐被 gap 取代。

 #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { background-color: lime; }

隐式创建的行和列

css gird 会根据周围项目的大小和跨度自动调整网格上每个项目的位置。

比如：

 .box { display: grid; grid-template: 25px / 100px 160px; background: #000; } .box * { background: #ccc; } .box *:nth-child(even) { background: #777; }

我们只定义了一行，两列。但是我们却有 5 个子元素。CSS网格决定将它们扩展到隐式创建的空间，新建的隐式行中的列自动从先前指定的 grid-template-rows 属性继承行高。

grid-column-start , grid-column-e

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！