簡介
本教學將深入探討 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-template-rows> / <grid-auto-columns>;
grid: <grid-auto-rows> / <grid-template-columns>;
}例如：
.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 深入理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
