CSS Grid柵格佈局

CSS 網格佈局(Grid Layout) 是CSS中最強大的佈局系統。 這是一個二維繫統，這意味着它可以同時處理列和行，不像 flexbox 那樣主要是一維繫統。 你可以通過將CSS規則應用於父元素（成爲網格容器）和該元素的子元素（網格元素），來使用網格佈局。

引言

CSS網格佈局（又名“網格”）是一個二維的基於網格的佈局系統，其目的只在於完全改變我們設計基於網格的用戶界面的方式。 CSS一直用來佈局網頁，但一直都不完美。 一開始我們使用table 做佈局，然後轉向浮動、定位以及inline-block，但所有這些方法本質上都是 Hack 的方式，並且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現在一定程度上解決了這個問題，但是它的目的是爲了更簡單的一維佈局，而不是複雜的二維佈局（Flexbox和Grid實際上一起工作得很好）。 只要我們一直在製作網站，我們就一直在爲解決佈局問題不斷探索， 而Grid是第一個專門爲解決佈局問題而生的CSS模塊。

有兩個東西，啓發我寫這篇指南。 第一個是雷切爾·安德魯（Rachel Andrew）的書爲CSS Grid佈局準備。 這本書對網格佈局做了徹底、清晰的介紹，也是是整篇文章的基礎，我強烈建議你購買並閱讀他的書。 我的另一個重要靈感是Chris Coyier的Flexbox完全指南，當需要查閱 flexbox 的一切資料時我就會找這篇文章。 這篇文章幫助了很多人學習 Flex 佈局，也是 Google 上搜索“flexbox”關鍵字排名第一的文章。你會發現他的文章和我的很多相似之處，有最好的範例在那放着爲什麼咱不偷師學着寫呢？

本指南的目的是介紹網格概念，因爲它們存在於最新版本的規範中。 因此我不會覆蓋過時的IE語法，而且隨着規範的成熟，我會盡最大努力保存更新本指南。

基礎知識以及瀏覽器支持情況

一開始你需要使用display：grid把容器元素定義爲一個網格，使用grid-template-columns和grid-template-rows設置列和行大小，然後使用grid-column 和 grid-row把它的子元素放入網格。 與flexbox類似，網格子元素的原始順序不重要。 你的可以在 CSS 裏以任意順序放置它們，這使得使用媒體查詢重新排列網格變得非常容易。 想象一下，我們需要定義整個頁面的佈局，然後爲了適應不同的屏幕寬度完全重新排列，我們只需要幾行CSS就能實現這個需求。 網格是有史以來最強大的CSS模塊之一。

截至2017年3月，許多瀏覽器都提供了原生的、不加前綴的對CSS Grid的支持，比如 Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。 另一方面，Internet Explorer 10和11支持它，但需要使用過時的語法。 Edge瀏覽器已經宣佈將支持標準的Grid語法，但暫未支持。

瀏覽器支持的詳細數據可在Caniuse查看。其中裏面的數字表示該版本以上的瀏覽器支持Grid。

桌面瀏覽器

移動端 / 平板

除了微軟之外，瀏覽器製造商在 Grid 規範完全落地以前似乎並沒有放手讓 Gird 野生也長的打算。 這是一件好事，這意味着我們不需要再去學習各種瀏覽器兼容版本的舊語法。

在生產環境中使用Grid只是時間問題，但現在是我們該學習的時候了。

重要術語

在深入瞭解網格的概念之前，理解術語是很重要的。 由於這裏所涉及的術語在概念上都是相似的，如果不先記住它們在網格規範中定義的含義，則很容易將它們彼此混淆。 但是不用太擔心，這些術語並不多。

Grid Container

設置了 display: gird 的元素。 這是所有grid item的直接父項。 在下面的例子中，.container就是是 grid container。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div> 

Grid Item

Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

這個分界線組成網格結構。 它們既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），並位於行或列的任一側。 下面例中的黃線就是一個列網格線。

Grid Track

兩個相鄰網格線之間的空間。 你可以把它們想象成網格的列或行。 下面是第二行和第三行網格線之間的網格軌道。

Grid Cell

兩個相鄰的行和兩個相鄰的列網格線之間的空間。它是網格的一個“單元”。 下面是行網格線1和2之間以及列網格線2和3的網格單元。

Grid Area

四個網格線包圍的總空間。 網格區域可以由任意數量的網格單元組成。 下面是行網格線1和3以及列網格線1和3之間的網格區域。

Grid 屬性列表

Grid Container 的全部屬性

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Grid Items 的全部屬性

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

父容器(Grid Container)的屬性

display

將元素定義爲 grid contaienr，併爲其內容建立新的網格格式化上下文(grid formatting context)。

值:

• grid - 生成一個塊級(block-level)網格
• inline-grid - 生成一個行級(inline-level)網格
• subgrid - 如果你的 grid container 本身就是一個 grid item（即,嵌套網格），你可以使用這個屬性來表示你想從它的父節點獲取它的行/列的大小，而不是指定它自己的大小。

.container {
  display: grid | inline-grid | subgrid;
}

注意：column, float, clear, 以及 vertical-align 對一個 grid container 沒有影響

grid-template-columns / grid-template-rows

使用以空格分隔的多個值來定義網格的列和行。這些值表示軌道大小(track size)，它們之間的空格代表表格線(grid line)。

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例子:

(如果未顯示的給網格線命名)，軌道值之間僅僅有空格時，網格線會被自動分配數字名稱：

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

但你可以給網格線指定確切的命名。 注意中括號裏的網格線命名語法：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

需要注意的是，一個網格線可以有不止一個名字。例如，這裏第2條網格線有兩個名字：row1-end 和 row2-start：

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定義中包含重複的部分，則可以使用repeat() 符號來簡化寫法：

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面的寫法和下面等價：

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

“fr”單位允許您將軌道大小設置爲網格容器自由空間的一部分。 例如，下面的代碼會將每個 grid item 爲 grid container 寬度的三分之一：

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

自由空間是在排除所有不可伸縮的 grid item 之後計算得到的。 在下面的示例中，fr單位可用的自由空間總量不包括50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

通過引用 grid-area屬性指定的網格區域的名稱來定義網格模板。 重複網格區域的名稱導致內容擴展到這些單元格。 點號表示一個空單元格。 語法本身提供了網格結構的可視化。

值：

• <grid-area-name> - 使用 grid-area 屬性設置的網格區域的名稱
• . - 點號代表一個空網格單元
• none - 沒有定義網格區域

舉例：

.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
“header header header header”
“main main . sidebar”
“footer footer footer footer”;
}" title="" data-original-title=“複製”>

.item-a {

grid-area: header;

}

.item-b {

grid-area: main;

}

.item-c {

grid-area: sidebar;

}

.item-d {

grid-area: footer;

}

.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
“header header header header”
“main main . sidebar”
“footer footer footer footer”;
}

這將創建一個四列寬三行高的網格。 整個第一行將由 header 區域組成。 中間一行將由兩個 main 區域、一個空單元格和一個 sidebar 區域組成。 最後一行是footer區域組成。

你的聲明中的每一行都需要有相同數量的單元格。

您可以使用任意數量的相鄰的.來聲明單個空單元格。 只要這些點號之間沒有空格，他們就代表了一個單一的單元格。

需要注意的是你不是在用這個語法命名網格線，而是在命名區域。 當你使用這種語法時，區域兩端的網格線實際上是自動命名的。 比如，如果網格區域的名稱是foo，那麼區域的起始的行網格線和列網格線名稱是 foo-start，並且區域終點的行網格線和列網格線名稱是 foo-end。 這意味着某些網格線可能有多個名稱，比如上面的例子中最左邊的一條網格線有三個名字：header-start，main-start 和 footer-start。

grid-template

在單個聲明中定義 grid-template-rows、grid-template-columns、grid-template-areas 的簡寫。

值：

• none - 將三個屬性都設置爲其初始值
• subgrid - 把 grid-template-rows 和 grid-template-columns 設置爲 subgrid, 並且 grid-template-areas 設置爲初始值
• grid-template-rows / <grid-template-columns - 把 grid-template-columns 和 grid-template-rows 設置爲指定值, 與此同時, 設置 grid-template-areas 爲 none

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

它也可以使用一個更復雜但相當方便的語法來指定這三個值。 一個例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

以上等價於：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由於 grid-template 不會重置隱式網格屬性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而這可能是大多數情況下你想要做的。因此建議使用grid屬性來代替grid-template。

grid-column-gap / grid-row-gap

指定網格線的大小，你可以把它想象爲設置列/行之間的間距的寬度。

值：

• line-size - 一個長度值

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

舉例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

只能在列/行之間創建縫隙，而不是在外部邊緣創建。

grid-gap

grid-row-gap 和 grid-column-gap 的縮寫

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

Example:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

如果沒有指定 grid-row-gap，則會被設置爲與 grid-column-gap 相同的值。

justify-items

沿着行軸對齊網格內的內容（與之對應的是 align-items, 即沿着列軸對齊），該值適用於容器內的所有的 grid items。

值：

• start: 內容與網格區域的左端對齊
• end: 內容與網格區域的右端對齊
• center: 內容位於網格區域的中間位置
• stretch: 內容寬度佔據整個網格區域空間(這是默認值)

.container {
  justify-items: start | end | center | stretch;
}

舉例：

.container {
  justify-items: start;
}

.container{
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

也可以通過給單個 grid item 設置justify-self屬性來達到上述效果。

align-items

沿着列軸對齊grid item 裏的內容（與之對應的是使用 justify-items 設置沿着行軸對齊），該值適用於容器內的所有 grid items。

值：

• start: 內容與網格區域的頂端對齊
• end: 內容與網格區域的底部對齊
• center: 內容位於網格區域的垂直中心位置
• stretch: 內容高度佔據整個網格區域空間(這是默認值)

.container {
  align-items: start | end | center | stretch;
}

舉例:

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

也可以通過給單個 grid item 設置align-self屬性來達到上述效果。

justify-content

有時，網格的總大小可能小於其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發生這種情況。此時，你可以設置網格容器內的網格的對齊方式。 此屬性沿着行軸對齊網格（與之對應的是 align-content, 沿着列軸對齊）。

值：

• start - 網格與網格容器的左邊對齊
• end - 網格與網格容器的右邊對齊
• center - 網格與網格容器的中間對齊
• stretch - 調整g rid item 的大小，讓寬度填充整個網格容器
• space-around - 在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小爲中間空白間隙寬度的一半
• space-between - 在 grid item 之間設置均等寬度空白間隙，其外邊緣無間隙
• space-evenly - 在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

舉例：

.container {
  justify-content: start;
}

.container {
  justify-content: end; 
}

.container {
  justify-content: center;  
}

.container {
  justify-content: stretch; 
}

.container {
  justify-content: space-around;  
}

.container {
  justify-content: space-between; 
}

.container {
  justify-content: space-evenly;  
}

align-content

有時，網格的總大小可能小於其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發生這種情況。此時，你可以設置網格容器內的網格的對齊方式。 此屬性沿着列軸對齊網格（與之對應的是 justify-content, 即沿着行軸對齊）。

值：

• start - 網格與網格容器的頂部對齊
• end - 網格與網格容器的底部對齊
• center - 網格與網格容器的中間對齊
• stretch - 調整 grid item 的大小，讓高度填充整個網格容器
• space-around - 在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小爲中間空白間隙寬度的一半
• space-between - 在 grid item 之間設置均等寬度空白間隙，其外邊緣無間隙
• space-evenly - 在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

舉例：

.container {
  align-content: start; 
}

.container {
  align-content: end; 
}

.container {
  align-content: center;  
}

.container {
  align-content: stretch; 
}

.container {
  align-content: space-around;  
}

.container {
  align-content: space-between; 
}

.container {
  align-content: space-evenly;  
}

grid-auto-columns / grid-auto-rows

指定自動生成的網格軌道（又名隱式網格軌道）的大小。 隱式網格軌道在你顯式的定位超出指定網格範圍的行或列（使用 grid-template-rows/grid-template-columns）時被創建。

值：

• <track-size> - 可以是一個長度值，一個百分比值，或者一個自由空間的一部分（使用 fr 單位）

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

爲了說明如何創建隱式網格軌道，思考如下代碼：

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

這裏創建了一個 2x2的網格。

但是，現在想象一下，使用 grid-column 和 grid-row 來定位你的網格項目，如下所示：

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

這裏我們指定 .item-b開始於列網格線 5 並結束於在列網格線 6，但我們並未定義列網格線 5 或 6。因爲我們引用不存在的網格線，寬度爲0的隱式軌道的就會被創建用與填補間隙。我們可以使用 grid-auto-columns 和 grid-auto-rows屬性來指定這些隱式軌道的寬度：

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

如果你存在沒有顯示指明放置在網格上的 grid item，則自動放置算法會自動放置這些項目。 而該屬性則用於控制自動佈局算法的工作方式。

值：

• row - 告訴自動佈局算法依次填充每行，根據需要添加新行
• column - 告訴自動佈局算法依次填充每列，根據需要添加新列
• dense - 告訴自動佈局算法，如果後面出現較小的 grid item，則嘗試在網格中填充空洞

.container {
  grid-auto-flow: row | column | row dense | column dense
}

需要注意的是，dense 可能導致您的 grid item 亂序。

舉例， 考慮如下 HTML：

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

你定義一個有5列和2行的網格，並將 grid-auto-flow 設置爲 row（這也是默認值）：

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

當把 grid item 放在網格上時，你只把其中兩個設置了固定的位置：

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因爲我們將 grid-auto-flow 設置爲row，所以我們的grid就像這樣。 注意觀察我們沒有做設置的三個項目（item-b，item-c和item-d）是如何在剩餘的行水平擺放位置的：

如果我們將 grid-auto-flow 設置爲 column，則 item-b，item-c 和 item-d 以列的順序上下襬放：

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

grid

在單個屬性中設置所有以下屬性的簡寫：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。 它同時也將 sets grid-column-gap 和 grid-row-gap 設置爲它們的初始值，即使它們不能被此屬性顯示設置。

值：

• none - 將所有子屬性設置爲其初始值
• <grid-template-rows> / <grid-template-columns> - 將 grid-template-rows 和 grid-template-columns 分別設置爲指定值，將所有其他子屬性設置爲其初始值
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] - 接受所有與grid-auto-flow，grid-auto-rows和grid-auto-columns相同的值。 如果省略grid-auto-columns，則將其設置爲爲grid-auto-rows指定的值。 如果兩者都被省略，則它們被設置爲它們的初始值

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

舉例：

以下代碼寫法等價

.container {
  grid: 200px auto / 1fr auto 1fr;
}
.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

以下代碼寫法等價

.container {
  grid: column 1fr / auto;
}
.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

它也可用使用一個更復雜但相當方便的語法來一次設置所有內容。 你可以指定 grid-template-areas、grid-template-rows 以及 grid-template-columns，並將所有其他子屬性設置爲其初始值。 你現在所做的是在其網格區域內，指定網格線名稱和內聯軌道大小。 可以看下面的例子：

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

上述代碼等價於

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

孩子(Grid Items)的屬性

grid-column-start / grid-column-end / grid-row-start /grid-row-end

使用特定的網格線確定 grid item 在網格內的位置。grid-column-start/grid-row-start 屬性表示grid item的網格線的起始位置，grid-column-end/grid-row-end屬性表示網格項的網格線的終止位置。

值：

• <line>: 可以是一個數字來指代相應編號的網格線，也可使用名稱指代相應命名的網格線
• span <number>: 網格項將跨越指定數量的網格軌道
• span <name>: 網格項將跨越一些軌道，直到碰到指定命名的網格線
• auto: 自動佈局， 或者自動跨越， 或者跨越一個默認的軌道

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

舉例：

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

如果沒有聲明 grid-column-end / grid-row-end，默認情況下，該網格項將跨越1個軌道。

網格項可以相互重疊。 您可以使用z-index來控制它們的堆疊順序。

grid-column / grid-row

grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式。

值：

• <start-line> / <end-line> - 每個值的用法都和屬性分開寫時的用法一樣

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

舉例：

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果沒有指定結束行值，則該網格項默認跨越1個軌道。

grid-area

給 grid item 進行命名以便於使用 grid-template-areas 屬性創建模板時來進行引用。另外也可以做爲 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式。

值：

• <name> - 你的命名
• <row-start> / <column-start> / <row-end> /<column-end> - 可以是數字，也可以是網格線的名字

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

舉例:

給一個網格項命名

.item-d {
  grid-area: header
}

作爲 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫:

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

沿着行軸對齊grid item 裏的內容（與之對應的是 align-self, 即沿列軸對齊）。 此屬性對單個網格項內的內容生效。

值：

• start - 將內容對齊到網格區域的左端
• end - 將內容對齊到網格區域的右端
• center - 將內容對齊到網格區域的中間
• stretch - 填充網格區域的寬度 (這是默認值)

舉例：

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

要爲網格中的所有grid items 設置對齊方式，也可以通過 justify-items 屬性在網格容器上設置此行爲。

align-self

沿着列軸對齊grid item 裏的內容（與之對應的是 justify-self, 即沿行軸對齊）。 此屬性對單個網格項內的內容生效。

值：

• start - 將內容對齊到網格區域的頂部
• end - 將內容對齊到網格區域的底部
• center - 將內容對齊到網格區域的中間
• stretch - 填充網格區域的高度 (這是默認值)

.item {
  align-self: start | end | center | stretch;
}

舉例:

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

要爲網格中的所有grid items 統一設置對齊方式，也可以通過 align-items 屬性在網格容器上設置此行爲。

加微信號: astak10或者長按識別下方二維碼進入前端技術交流羣 ，暗號：寫代碼啦

每日一題，每週資源推薦，精彩博客推薦，工作、筆試、面試經驗交流解答，免費直播課，羣友輕分享... ，數不盡的福利免費送