Grid 網格布局

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

本文出自於 Chris House 的個人博客，由若愚翻譯，部分綜合代碼添加來自@evenyao

重點關注：grid-template-columns / grid-template-rows 划分網格，grid-template-areas區域，grid-template-gap / grid-rows-gap設置網格線（行列間的距離寬度），grid內容居中justify-items: center; / aligin-items: center;，容器居中justify-content : center;的使用方法。

特別關注： grid簡潔式 ，即最優方法實現布局 代碼示例

引言

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。

桌面瀏覽器

Chrome	Opera	Firefox	IE	Edge	Safari
57	44	52	11*	16	10.1

移動端 / 平板

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	No	No	62	62	57

除了微軟之外，瀏覽器制造商在 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 Line

Grid Track

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

 

Track

Grid Cell

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

 

Grid Cell

Grid Area

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

 

 

Grid Area

 

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; } 

 

grid-template-columns / grid-template-rows

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

.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 – 沒有定義網格區域

舉例：

.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區域組成。

代碼示例

 

grid-template-areas

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

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

需要注意的是你不是在用這個語法命名網格線，而是在命名區域。 當你使用這種語法時，區域兩端的網格線實際上是自動命名的。 比如，如果網格區域的名稱是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-column-gap / grid-row-gap

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

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; } 

 

image

.container{ justify-items: end; } 

 

image

.container { justify-items: center; } 

 

image

.container { justify-items: stretch; } 

 

image

也可以通過給單個 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; } 

 

image

.container { align-items: end; } 

 

image

.container { align-items: center; } 

 

Example of align-items set to center

.container { align-items: stretch; } 

 

Example of align-items set to 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; } 

 

Example of justify-content set to start

.container { justify-content: end; } 

 

Example of justify-content set to end

.container { justify-content: center; } 

 

Example of justify-content set to center

.container { justify-content: stretch; } 

 

Example of justify-content set to stretch

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

 

Example of justify-content set to space-around

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

 

Example of justify-content set to space-between

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

 

Example of justify-content set to 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; } 

 

Example of align-content set to start

.container { align-content: end; } 

 

Example of align-content set to end

.container { align-content: center; } 

 

Example of align-content set to center

.container { align-content: stretch; } 

 

Example of align-content set to stretch

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

 

Example of align-content set to space-around

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

 

Example of align-content set to space-between

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

 

Example of align-content set to 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 } 

 

Example of 2 x 2 grid

這里創建了一個 2×2的網格。

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

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

 

Example of implicit tracks

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

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

 

Example of implicit tracks

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）是如何在剩余的行水平擺放位置的：

 

Example of grid-auto-flow set to row

如果我們將 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; } 

 

Example of grid-auto-flow set to 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 } 

 

Example of grid-row/column-start/end

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

 

Example of grid-row/column-start/end

如果沒有聲明 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; } 

 

Example of grid-column/grid-row

如果沒有指定結束行值，則該網格項默認跨越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 } 

 

Example of grid-area

justify-self

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

值：

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

舉例：

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

 

Example of justify-self set to start

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

 

Example of justify-self set to end

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

 

Example of justify-self set to center

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

 

Example of justify-self set to 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; } 

 

Example of align-self set to start

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

 

Example of align-self set to end

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

 

Example of align-self set to center

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

 

Example of align-self set to stretch

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

最優方法實現布局

代碼示例

簡單模擬知乎布局