CSS二維網格系統Grid介紹

術語：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 深入理解的詳細內容，更多請關注億速云其它相關文章！