CSS 網(wǎng)格布局(Grid Layout) 是CSS中最強(qiáng)大的布局系統(tǒng)。這是一個(gè)二維系統(tǒng)，這意味著它可以同時(shí)處理列和行，不像 flexbox 那樣主要是一維系統(tǒng)。你可以通過將CSS規(guī)則應(yīng)用于父元素（成為網(wǎng)格容器）和該元素的子元素（網(wǎng)格元素），來使用網(wǎng)格布局。

本文出自于 Chris House 的個(gè)人博客，由若愚老師翻譯

引言

CSS網(wǎng)格布局（又名“網(wǎng)格”）是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng)，其目的只在于完全改變我們設(shè)計(jì)基于網(wǎng)格的用戶界面的方式。 CSS一直用來布局網(wǎng)頁，但一直都不完美。一開始我們使用table 做布局，然后轉(zhuǎn)向浮動、定位以及inline-block，但所有這些方法本質(zhì)上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現(xiàn)在一定程度上解決了這個(gè)問題，但是它的目的是為了更簡單的一維布局，而不是復(fù)雜的二維布局（Flexbox和Grid實(shí)際上一起工作得很好）。只要我們一直在制作網(wǎng)站，我們就一直在為解決布局問題不斷探索，
而Grid是第一個(gè)專門為解決布局問題而生的CSS模塊。

基礎(chǔ)知識以及瀏覽器支持情況

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

截至2017年3月，許多瀏覽器都提供了原生的、不加前綴的對CSS Grid的支持，比如 Chrome（包括Android），F(xiàn)irefox，Safari（包括iOS）和Opera。另一方面，Internet Explorer 10和11支持它，但需要使用過時(shí)的語法。 Edge瀏覽器已經(jīng)宣布將支持標(biāo)準(zhǔn)的Grid語法，但暫未支持。

瀏覽器支持的詳細(xì)數(shù)據(jù)可在Caniuse查看。其中里面的數(shù)字表示該版本以上的瀏覽器支持Grid。

桌面瀏覽器

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

移動端 / 平板

iOS Safari	Opera Mobile	Opera Mini	Android	Android	Chrome
10.3	NO	NO	62	62	57

除了微軟之外，瀏覽器制造商在 Grid 規(guī)范完全落地以前似乎并沒有放手讓 Gird 野生也長的打算。這是一件好事，這意味著我們不需要再去學(xué)習(xí)各種瀏覽器兼容版本的舊語法。

在生產(chǎn)環(huán)境中使用Grid只是時(shí)間問題，但現(xiàn)在是我們該學(xué)習(xí)的時(shí)候了。

重要術(shù)語

在深入了解網(wǎng)格的概念之前，理解術(shù)語是很重要的。由于這里所涉及的術(shù)語在概念上都是相似的，如果不先記住它們在網(wǎng)格規(guī)范中定義的含義，則很容易將它們彼此混淆。但是不用太擔(dān)心，這些術(shù)語并不多。

Grid Container

設(shè)置了 display: gird 的元素。這是所有 grid item 的直接父項(xiàng)。在下面的例子中，.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

這個(gè)分界線組成網(wǎng)格結(jié)構(gòu)。它們既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一側(cè)。下面例中的黃線就是一個(gè)列網(wǎng)格線。

image

Grid Track

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

image

Grid Cell

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

image

Grid Area

四個(gè)網(wǎng)格線包圍的總空間。網(wǎng)格區(qū)域可以由任意數(shù)量的網(wǎng)格單元組成。下面是行網(wǎng)格線1和3以及列網(wǎng)格線1和3之間的網(wǎng)格區(qū)域。

image

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，并為其內(nèi)容建立新的網(wǎng)格格式化上下文(grid formatting context)。

值:

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

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

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

grid-template-columns / grid-template-rows

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

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

例子:

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

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

image

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

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

image

需要注意的是，一個(gè)網(wǎng)格線可以有不止一個(gè)名字。例如，這里第2條網(wǎng)格線有兩個(gè)名字：row1-end 和 row2-start：

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

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

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

上面的寫法和下面等價(jià)：

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

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

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

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

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

grid-template-areas

通過引用 grid-area屬性指定的網(wǎng)格區(qū)域的名稱來定義網(wǎng)格模板。重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容擴(kuò)展到這些單元格。點(diǎn)號表示一個(gè)空單元格。語法本身提供了網(wǎng)格結(jié)構(gòu)的可視化。

值：

<grid-area-name> – 使用 grid-area 屬性設(shè)置的網(wǎng)格區(qū)域的名稱
. – 點(diǎn)號代表一個(gè)空網(wǎng)格單元
none – 沒有定義網(wǎng)格區(qū)域

舉例：

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

這將創(chuàng)建一個(gè)四列寬三行高的網(wǎng)格。整個(gè)第一行將由 header 區(qū)域組成。中間一行將由兩個(gè) main 區(qū)域、一個(gè)空單元格和一個(gè) sidebar 區(qū)域組成。最后一行是footer區(qū)域組成。

image

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

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

需要注意的是你不是在用這個(gè)語法命名網(wǎng)格線，而是在命名區(qū)域。當(dāng)你使用這種語法時(shí)，區(qū)域兩端的網(wǎng)格線實(shí)際上是自動命名的。比如，如果網(wǎng)格區(qū)域的名稱是foo，那么區(qū)域的起始的行網(wǎng)格線和列網(wǎng)格線名稱是 foo-start，并且區(qū)域終點(diǎn)的行網(wǎng)格線和列網(wǎng)格線名稱是 foo-end。這意味著某些網(wǎng)格線可能有多個(gè)名稱，比如上面的例子中最左邊的一條網(wǎng)格線有三個(gè)名字：header-start，main-start 和 footer-start。

grid-template

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

值：

none – 將三個(gè)屬性都設(shè)置為其初始值
subgrid – 把 grid-template-rows 和 grid-template-columns 設(shè)置為 subgrid, 并且 grid-template-areas 設(shè)置為初始值
grid-template-rows / <grid-template-columns – 把 grid-template-columns 和 grid-template-rows 設(shè)置為指定值, 與此同時(shí), 設(shè)置 grid-template-areas 為 none

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

它也可以使用一個(gè)更復(fù)雜但相當(dāng)方便的語法來指定這三個(gè)值。一個(gè)例子：

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

以上等價(jià)于：

.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 不會重置隱式網(wǎng)格屬性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而這可能是大多數(shù)情況下你想要做的。因此建議使用grid屬性來代替grid-template。

grid-column-gap / grid-row-gap

指定網(wǎng)格線的大小，你可以把它想象為設(shè)置列/行之間的間距的寬度。

值：

line-size – 一個(gè)長度值

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

image

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

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，則會被設(shè)置為與 grid-column-gap 相同的值。

justify-items

沿著行軸對齊網(wǎng)格內(nèi)的內(nèi)容（與之對應(yīng)的是 align-items, 即沿著列軸對齊），該值適用于容器內(nèi)的所有的 grid items。

值：

start: 內(nèi)容與網(wǎng)格區(qū)域的左端對齊
end: 內(nèi)容與網(wǎng)格區(qū)域的右端對齊
center: 內(nèi)容位于網(wǎng)格區(qū)域的中間位置
stretch: 內(nèi)容寬度占據(jù)整個(gè)網(wǎng)格區(qū)域空間(這是默認(rèn)值)

.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

也可以通過給單個(gè) grid item 設(shè)置justify-self屬性來達(dá)到上述效果。

align-items

沿著列軸對齊grid item 里的內(nèi)容（與之對應(yīng)的是使用 justify-items 設(shè)置沿著行軸對齊），該值適用于容器內(nèi)的所有 grid items。

值：

start: 內(nèi)容與網(wǎng)格區(qū)域的頂端對齊
end: 內(nèi)容與網(wǎng)格區(qū)域的底部對齊
center: 內(nèi)容位于網(wǎng)格區(qū)域的垂直中心位置
stretch: 內(nèi)容高度占據(jù)整個(gè)網(wǎng)格區(qū)域空間(這是默認(rèn)值)

.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

也可以通過給單個(gè) grid item 設(shè)置align-self屬性來達(dá)到上述效果。

justify-content

有時(shí)，網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設(shè)置大小，則可能發(fā)生這種情況。此時(shí)，你可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式。此屬性沿著行軸對齊網(wǎng)格（與之對應(yīng)的是 align-content, 沿著列軸對齊）。

值：

start – 網(wǎng)格與網(wǎng)格容器的左邊對齊
end – 網(wǎng)格與網(wǎng)格容器的右邊對齊
center – 網(wǎng)格與網(wǎng)格容器的中間對齊
stretch – 調(diào)整g rid item 的大小，讓寬度填充整個(gè)網(wǎng)格容器
space-around – 在 grid item 之間設(shè)置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半
space-between – 在 grid item 之間設(shè)置均等寬度空白間隙，其外邊緣無間隙
space-evenly – 在每個(gè) grid item 之間設(shè)置均等寬度的空白間隙，包括外邊緣

.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

有時(shí)，網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設(shè)置大小，則可能發(fā)生這種情況。此時(shí)，你可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式。此屬性沿著列軸對齊網(wǎng)格（與之對應(yīng)的是 justify-content, 即沿著行軸對齊）。

值：

start – 網(wǎng)格與網(wǎng)格容器的頂部對齊
end – 網(wǎng)格與網(wǎng)格容器的底部對齊
center – 網(wǎng)格與網(wǎng)格容器的中間對齊
stretch – 調(diào)整 grid item 的大小，讓高度填充整個(gè)網(wǎng)格容器
space-around – 在 grid item 之間設(shè)置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半
space-between – 在 grid item 之間設(shè)置均等寬度空白間隙，其外邊緣無間隙
space-evenly – 在每個(gè) grid item 之間設(shè)置均等寬度的空白間隙，包括外邊緣

.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

指定自動生成的網(wǎng)格軌道（又名隱式網(wǎng)格軌道）的大小。隱式網(wǎng)格軌道在你顯式的定位超出指定網(wǎng)格范圍的行或列（使用 grid-template-rows/grid-template-columns）時(shí)被創(chuàng)建。

值：

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

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

為了說明如何創(chuàng)建隱式網(wǎng)格軌道，思考如下代碼：

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

Example of 2 x 2 grid

這里創(chuàng)建了一個(gè) 2×2的網(wǎng)格。

但是，現(xiàn)在想象一下，使用 grid-column 和 grid-row 來定位你的網(wǎng)格項(xiàng)目，如下所示：

.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開始于列網(wǎng)格線 5 并結(jié)束于在列網(wǎng)格線 6，但我們并未定義列網(wǎng)格線 5 或 6。因?yàn)槲覀円貌淮嬖诘木W(wǎng)格線，寬度為0的隱式軌道的就會被創(chuàng)建用與填補(bǔ)間隙。我們可以使用 grid-auto-columns 和 grid-auto-rows屬性來指定這些隱式軌道的寬度：

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

Example of implicit tracks

grid-auto-flow

如果你存在沒有顯示指明放置在網(wǎng)格上的 grid item，則自動放置算法會自動放置這些項(xiàng)目。而該屬性則用于控制自動布局算法的工作方式。

值：

row – 告訴自動布局算法依次填充每行，根據(jù)需要添加新行
column – 告訴自動布局算法依次填充每列，根據(jù)需要添加新列
dense – 告訴自動布局算法，如果后面出現(xiàn)較小的 grid item，則嘗試在網(wǎng)格中填充空洞

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

需要注意的是，dense 可能導(dǎo)致您的 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>

你定義一個(gè)有5列和2行的網(wǎng)格，并將 grid-auto-flow 設(shè)置為 row（這也是默認(rèn)值）：

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

當(dāng)把 grid item 放在網(wǎng)格上時(shí)，你只把其中兩個(gè)設(shè)置了固定的位置：

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

因?yàn)槲覀儗?grid-auto-flow 設(shè)置為row，所以我們的grid就像這樣。注意觀察我們沒有做設(shè)置的三個(gè)項(xiàng)目（item-b，item-c和item-d）是如何在剩余的行水平擺放位置的：

Example of grid-auto-flow set to row

如果我們將 grid-auto-flow 設(shè)置為 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

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

值：

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

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

舉例：

以下代碼寫法等價(jià)

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

以下代碼寫法等價(jià)

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

它也可用使用一個(gè)更復(fù)雜但相當(dāng)方便的語法來一次設(shè)置所有內(nèi)容。你可以指定 grid-template-areas、grid-template-rows 以及 grid-template-columns，并將所有其他子屬性設(shè)置為其初始值。你現(xiàn)在所做的是在其網(wǎng)格區(qū)域內(nèi)，指定網(wǎng)格線名稱和內(nèi)聯(lián)軌道大小。可以看下面的例子：

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

上述代碼等價(jià)于

.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

使用特定的網(wǎng)格線確定 grid item 在網(wǎng)格內(nèi)的位置。grid-column-start/grid-row-start 屬性表示grid item的網(wǎng)格線的起始位置，grid-column-end/grid-row-end屬性表示網(wǎng)格項(xiàng)的網(wǎng)格線的終止位置。

值：

<line>: 可以是一個(gè)數(shù)字來指代相應(yīng)編號的網(wǎng)格線，也可使用名稱指代相應(yīng)命名的網(wǎng)格線
span <number>: 網(wǎng)格項(xiàng)將跨越指定數(shù)量的網(wǎng)格軌道
span <name>: 網(wǎng)格項(xiàng)將跨越一些軌道，直到碰到指定命名的網(wǎng)格線
auto: 自動布局，或者自動跨越，或者跨越一個(gè)默認(rèn)的軌道

.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，默認(rèn)情況下，該網(wǎng)格項(xiàng)將跨越1個(gè)軌道。

網(wǎng)格項(xiàng)可以相互重疊。您可以使用z-index來控制它們的堆疊順序。

grid-column / grid-row

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

值：

<start-line> / <end-line> – 每個(gè)值的用法都和屬性分開寫時(shí)的用法一樣

.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

如果沒有指定結(jié)束行值，則該網(wǎng)格項(xiàng)默認(rèn)跨越1個(gè)軌道。

grid-area

給 grid item 進(jìn)行命名以便于使用 grid-template-areas 屬性創(chuàng)建模板時(shí)來進(jìn)行引用。另外也可以做為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式。

值：

<name> – 你的命名
<row-start> / <column-start> / <row-end> / <column-end> – 可以是數(shù)字，也可以是網(wǎng)格線的名字

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

舉例:

給一個(gè)網(wǎng)格項(xiàng)命名

.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 里的內(nèi)容（與之對應(yīng)的是 align-self, 即沿列軸對齊）。此屬性對單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容生效。

值：

start – 將內(nèi)容對齊到網(wǎng)格區(qū)域的左端
end – 將內(nèi)容對齊到網(wǎng)格區(qū)域的右端
center – 將內(nèi)容對齊到網(wǎng)格區(qū)域的中間
stretch – 填充網(wǎng)格區(qū)域的寬度 (這是默認(rèn)值)

舉例：

.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

要為網(wǎng)格中的所有g(shù)rid items 設(shè)置對齊方式，也可以通過 justify-items 屬性在網(wǎng)格容器上設(shè)置此行為。

align-self

沿著列軸對齊grid item 里的內(nèi)容（與之對應(yīng)的是 justify-self, 即沿行軸對齊）。此屬性對單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容生效。

值：

start – 將內(nèi)容對齊到網(wǎng)格區(qū)域的頂部
end – 將內(nèi)容對齊到網(wǎng)格區(qū)域的底部
center – 將內(nèi)容對齊到網(wǎng)格區(qū)域的中間
stretch – 填充網(wǎng)格區(qū)域的高度 (這是默認(rèn)值)

.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

要為網(wǎng)格中的所有g(shù)rid items 統(tǒng)一設(shè)置對齊方式，也可以通過 align-items 屬性在網(wǎng)格容器上設(shè)置此行為。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS 網(wǎng)格布局——Grid

CSS 網(wǎng)格布局——Grid

引言

基礎(chǔ)知識以及瀏覽器支持情況

桌面瀏覽器

移動端 / 平板

重要術(shù)語

Grid Container

Grid Item

Grid Line

Grid Track

Grid Cell

Grid Area

Grid 屬性列表

Grid Items 的全部屬性

父容器(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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS 網(wǎng)格布局——Grid

引言

基礎(chǔ)知識以及瀏覽器支持情況

桌面瀏覽器

移動端 / 平板

重要術(shù)語

Grid Container

Grid Item

Grid Line

Grid Track

Grid Cell

Grid Area

Grid 屬性列表

Grid Items 的全部屬性

父容器(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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av