CSSGrid深入了解
简介
本教程将深入探究 CSS 网格布局，并摸索险些所有的属性和功能。读完之后，你将能够用这种精彩的 CSS 附加功能去处置任何一种布局。
术语：Grid
Grid 是二维网格系统。它可以用来构建复杂的布局以及较小的界面。
属性：display
只需要把一个元素的 display 属性设定为 grid，它就成了网格。
.grid-to-be {
display: grid;
}这样就使 .grid-to-be 成为 grid 容器，并使其子项成为 grid 项目。
术语：网格线
在定义明白的网格轨道时会新建网格线。你可以用它们去放置网格项。
术语：网格轨道
网格线是两条网格线之间的空间。网格中的行和列是网格轨道。
属性：grid-template-columns
可以运用 grid-template-columns 属性来新建列。要定义列，应当按照你但愿它们在网格中涌现的次序，把grid -template-columns 属性设定为列大小。我们来看一下：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
}这里定义了三个宽度为 100px 的列。所有网格项将会按次序罗列在这些列中。行高将等于该行中最高元素的高度，但是可以用 grid-template-rows 来进行更改。
请注意，在仅定义列而不决义行的状况下，元素将会添补列，然后在行中折返。这是因为 Grid 运用了网格线和网格线新建的隐式网格。
属性：grid-template-rows
grid-template-rows 用于定义网格中行的数目和大小。它的语法和 grid-template-columns 相似。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}要是只要 grid-template-rows 而没有 grid-template-columns 属性会致使列宽等于该行中最宽元素的宽度。
属性：grid-template
grid 是 grid-template-rows、grid-template-columns 和 grid-template-areas 三个属性的简写。
运用方式如下：
.grid {
grid-template:
"header header header" 80px
"nav article article" 600px
/ 100px 1fr;
}你可以像平时那样去定义模板区域，将每行的宽度放在最右面，最后再把所有列的宽度放在正歪杠之后。像之前同样，你可以把所有内容放在一行。
数据类型：
fr 是为 CSS 网格布局新建的新单位。 fr 使你不需要盘算百分比就能新建灵便的网格， 1fr 表示可用空间的一等份。可用空间被分为等份数字的总数个，所以 3fr 4fr 3fr 把空间划分为 3 + 4 + 3 = 10 个局部，离别为三行或列分配 3、4 和 3 个等份的可用空间。例如：
.grid {
display: grid;
grid-template-columns: 3fr 4fr 3fr;
}要是将牢固单位与弹性单位相混合，则每个等份的可用空间是在减去牢固空间后盘算的。让我们看另一个例子：
.grid {
display: grid;
grid-template-columns: 3fr 200px 3fr;
}单个等份的宽度是这样盘算的：( .grid 的宽度 - 200px) / (3 + 3) 。要是存在隔断（gutter）的话，其空间一开端也会从 .grid 的宽度中减去。这是 fr 和 ％ 之间的区别，即百分比不包含你用 grid-gap 定义的 gutter。
这里的 3fr 200px 3fr 根本上等于 1fr 200px 1fr。
显式网格和隐式网格
显式网格是运用属性 grid-template-rows 或 grid-template-columns 新建的网格。隐式网格由 Grid 新建的 网格线 和 网格轨道 组成，用来保留带有 grid-template-* 属性的手动新建的网格以外的项目。
主动放置（Auto-placement）
当我们新建这样的网格时：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}即便我们只定义了列，但作为 .grid 直接子项的单个单元格仍按行放置。这是由于 Grid 包括主动放置法则。
属性：grid-auto-columns
没有被 grid-template-columns 所定义的隐式新建的网格列轨道所新建的列的大小，可以用 grid-template-columns 属性定义，其默许值为 auto；你可以把它设定为本人所需要的值。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-auto-columns: 50px;
}属性：grid-auto-rows
grid-auto-rows 的工作方式相似于 grid-template-columns 。
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}属性：grid-auto-flow
grid-auto-flow 属性控制 网格单元 怎样流入网格，其默许值为 row。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-auto-flow: column;
}上面网格中的“网格单元”将会被一一添补，直到没有剩余的项目为止。
基于行的放置
用行号将项目放置在网格中的操纵被称为基于行的放置。
属性：grid-row-start
要是你但愿特定的网格项从特定的行开端，则可以这样：
.grid-item {
grid-row-start: 3;
}属性：grid-row-end
要是你但愿特定的网格项目在特定的行上完毕，则可以这样：
.grid-item {
grid-row-end: 6;
}属性：grid-column-start
要是你但愿特定的网格项目从特定的列开端，可以这样：
.grid-item {
grid-column-start: 3;
}属性：grid-column-end
要是你但愿特定的网格项在特定的列上完毕，可以这样：
.grid-item {
grid-column-end: 6;
}属性：grid-row 和 grid-column
可以用 grid-row 和 grid-column 属性来手动放置和调整网格项目的大小。每个属性都是其各自的 star 和 end 属性的简写：grid-row-start，grid-row-end，grid-column-start 和 grid-column-end。
用正歪杠 “/ ”来分隔开端和完毕值：
.grid-item {
grid-column: 3 / 5;
grid-row: 2 / 7;
}属性：grid-area
你可以把 grid-area 用于对网格行和网格列的简写。它是这样的：
.grid-item {
grid-area: 2 / 3 / 7 / 5;
}该代码的行为与上一个标题中的代码雷同。
跨网格的元素
要使一个元素跨网格，可以运用 grid-row 或 grid-column 属性。设定起始行 1 和完毕行 -1。此处 1 表示相干轴上最左边的网格线，-1 表示相干轴上最右侧的网格线。在从右到左的书写足本中，这是相反的，即 1 表示最右侧的行，-1 表示最左边的行。
.grid-item-weird {
grid-column: 1 / -1;
}要是你但愿单个项目占领整个网格，可以对 grid-row 和 grid-column 都这样做：
.grid-item-weird {
grid-row: 1 / -1;
grid-column: 1 / -1;
}或者简略地：
.grid-item-weird {
grid-area: 1 / 1 / -1 / -1;
}关键字：span
当运用 grid-row 和 grid-column 时，不消显式定义行号，而是可以用 span 关键字来声明该项应涵盖的行数或列数：
.grid-item {
grid-column: 3 / span 2;
}你也可以把项目牢固在终点线上，并朝另一个标的目的跨过。下面的代码实现了与上面雷同的效果：
.grid-item {
grid-column: span 2 / 5;
}
可以用雷同的方式把 span 利用在行上。
术语：网格单元
网格单元格是四个订交的网格线之间的空间，就像表格中的单元格同样。
术语：网格区域
网格区域是占领网格上一个矩形区域的网格单元。它们是用命名的网格区域或基于行的放置新建的。
属性：grid-template-areas (& grid-area)
除了用诸如 span、grid-column之类的东西放置和调整单个网格项目外，还可以用所谓的“模板区域”。grid-template-area 允许你命名网格区域，以便网格项目可以进一步添补它们。
.grid {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px 800px 100px;
grid-template-areas:
"header header header"
"sidebar-1 content sidebar-2"
"footer footer footer"
}这里的一对引号代表一行网格。你可以将所有内容放在一行中，而不消列对齐，但是我所做的只是为了使它看起来更加整齐。我第一定义了三列三行，然后为每个单元命名。通过在首先行中反复施行三次 “header”，告诉 CSS 要做的是用名为 header 的网格项遮盖整个历程。其余的也同样。
下列是通过用 grid-template-areas 命名每个网格项目，使其具有为其定义的空间的方式：
.header {
grid-area: header
}
.sidebar-1 {
grid-area: sidebar-1
}
.content {
grid-area: content
}
.sidebar-2 {
grid-area: sidebar-2
}
.footer {
grid-area: footer
}没有什么比这更容易了，尤为是用于安插内容的 CSS 其他办法。
在前面你已经看到 grid-area 也用于基于行的定位。
要是想把单元格留空，则可以用点 . 来设定：
.grid {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px 800px 100px;
grid-template-areas:
"header header header"
"sidebar content sidebar"
"footer footer ."
}在这里，页足以第二列完毕。
属性：grid-template
grid 是 grid-template-rows，grid-template-columns 和grid-template-areas 三个属性的简写。
运用方式如下所示：
.grid {
grid-template:
"header header header" 80px
"nav article article" 200px
/ 100px auto;
}可以像平常那样定义模板区域，把每行的宽度放在其最右面，然后将所有列的宽度放在正歪杠之后。像之前同样，你可以把所有得内容放在统一行。
函数：repeat()
repeat() 函数有助于使 网格轨道 列表变得不是那么余外，并为其增加了语义层。运用起来非常简略直不雅。我们来看一下：
你也可以反复某种情势的轨道列表，如下所示：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr 2fr); // this is the same as: 1fr 2fr 1fr 2fr 1fr 2fr
}repeat() 无须是值的独一局部。你可以在其先后增加其他的值。例如：grid-template-columns:2fr repeat(5，1fr) 4fr;。
属性：grid
这里的 grid 是 grid-template-rows、 grid-template-columns、 grid-template-areas、 grid-auto-rows、 grid-auto-columns 和 grid-auto-flow 六个属性的简写。
第一，你可以像这样运用 grid-template（上一个示例）：
.grid {
grid:
"header header header" 80px
"nav article article" 200px
/ 100px auto;
}其次它不是你看上去的那样，grid 与 css 属性不同：
是的，你没有看错：一个名为 css 的属性，所有 CSS 属性的简写。我也是在某次思索中偶尔晓得了它。但是此刻我不会教你如何用，今后有可能会。
第三，你以某种方式运用 grid。你可以将 grid-template-rows 与 grid-auto-columns 或 grid-auto-rows 联合运用。语法非常简略：
.grid-item {
grid: / ;
grid: / ;
} 例如：
.grid-item-1 {
grid: 50px 200px 200px/ auto-flow 60px;
}
.grid-item-2 {
grid: auto-flow 50px / repeat(5, 1fr);
}请注意，在该值以前应当先运用 auto-flow 关键字。
术语：Gutter
Gutter 是独自分隔 网格行 和 网格列 的空间。 grid-column-gap, grid-row-gap 和 grid-gap 是用于定义 gutter 的属性。
属性：grid-row-gap
grid-row-gap 用于定义各个 网格行 之间的空间。它是这样的：
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-row-gap: 10px;
}这会将 网格行 相互隔开10个像素。
属性：grid-column-gap
grid-column-gap 用于定义各个 网格列 之间的空间。它是这样的：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-column-gap: 10px;
}这会将 网格列 相互隔开 10 个像素。
属性：grid-gap
grid-gap 是将 grid-column-gap 和 grid-row-gap 联合在一起的简写属性。一个值定义了两个 gutter。例如：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}属性：order
可以用 order 属性来控制网格单元的次序。看下面的例子：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.grid .grid-cell:nth-child(5) {
order: 1;
}在代码中，第五个网格单元被放置在网格的最后，由于其他网格单元基本没有定义次序。要是定义了次序，则会遵循数字次序。两个或多个 网格单元 可以有雷同的次序。拥有雷同次序或完全没有次序的文件将会依据 HTML 文档的逻辑次序进行放置。再看下面：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.grid .grid-cell {
order: 1
}
.grid .grid-cell:nth-child(5) {
order: 2;
}上面的例子发生的效果与前面的例子雷同。
函数：minmax()
maxmax() 函数是 CSS 网格布局的新增功能。此功能为我们供给了指定 网格轨道 的最小和最大尺寸的办法。
看下面的例子：
.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 1fr;
}运用上面的代码，在减小窗口宽度时，中间列将维持 100px 的宽度，直到首先列和最后一列减小到其内容的宽度为止。这关于制作相应式布局特殊实用。
关键字：auto
要是父容器的尺寸是牢固的（例如牢固宽度），则 auto 关键字作为网格项目的宽度将会使该项目洋溢容器的整个宽度。在有多个项目的状况下，就像 fr 那样划分空间。但是要是将 auto 与 fr 一起运用，则 auto 体现为该项目内容的宽度，剩余的可用空间被划分为 fr。
函数：fitcontent()
当你但愿宽度或高度体现得像 auto 同样，但又但愿挨到最大宽度或高度束缚时，可以用 fitcontent() 函数.
.grid-item {
width: fitcontent(200px);
}在这里，最小为适合内容，最大为 200px。
关键字：auto-fill
你可以用 auto-fill 来用最多的 网格轨道 添补相干的轴（行或列）而不会溢出。要实现这个目的，需要用到 repeat() 函数：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
}但这会落低单个轨道的灵便性。通过与 minmax() 一起运用，可以同时拥有主动添补功能和灵便性。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}这样，你可以至少包括一列，而且在特定阅读器宽度中包括多个 50px 的列。
请注意，即便可能未用单元格添补，auto-fill 也会新建网格轨道。
auto-fit
auto-fit 的行为与 auto-fill 雷同，不一样之处在于它会折叠所有空的反复轨道。空轨道是指没有放置网格项目或跨过网格项目的轨道。
dense
借助 dense 关键字，你可以将项目回填到 空网格单元 中，这些单元是由于你尝试做了一些的蹊跷怪僻的事（例如spanning）而被新建的。在任何 span 内你都可以将 dense 关键字与 grid-auto-flow 配合运用，如下所示：
.grid {
display: grid;
grid-template-column: repeat(auto-fill, minmax(50px, 1fr));
grid-auto-flow: dense;
}你可以把它用在相片库之类的页面中，但在用于表单时要特殊当心，由于这可能会打乱表票据元素的特定次序。
阅读器支撑
在撰写本文时，阅读器对 CSS 网格布局有非常不错的支撑。依据 caniuse.com 的说法，除了 Internet Explorer 11局部支撑 -ms 前缀和 Opera Mini 以外，所有主流阅读器均支撑 CSS 网格布局。
总结
与之前的办法比拟，CSS 网格使我们能够以更高的控制力、便利性和速度来进行布局。在本教程中，我们学习了 Grid 的所有主要元素，包含新建轨道、定位和调整单元格的大小，以及使网格流通和相应，以及运用诸如 auto-fill 和 minmax() 之类的关键字。
以上就是CSS Grid 深入了解的细致内容，更多请关注 百分百源码网 其它相干文章！
