CSS 網格布局——Grid

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

本文出自于 Chris House 的個人博客燥透，由若愚老師翻譯

引言

CSS網格布局（又名“網格”）是一個二維的基于網格的布局系統沙咏，其目的只在于完全改變我們設計基于網格的用戶界面的方式。 CSS一直用來布局網頁班套，但一直都不完美肢藐。 一開始我們使用table 做布局，然后轉向浮動吱韭、定位以及inline-block吆豹，但所有這些方法本質上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現在一定程度上解決了這個問題痘煤，但是它的目的是為了更簡單的一維布局凑阶，而不是復雜的二維布局（Flexbox和Grid實際上一起工作得很好）。 只要我們一直在制作網站速勇，我們就一直在為解決布局問題不斷探索晌砾，
而Grid是第一個專門為解決布局問題而生的CSS模塊。

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

一開始你需要使用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
10.3 NO NO 62 62 57

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

在生產環(huán)境中使用Grid只是時間問題苇瓣，但現在是我們該學習的時候了尉间。

重要術語

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

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”），并位于行或列的任一側挽霉。 下面例中的黃線就是一個列網格線防嗡。

image

Grid Track

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

image

Grid Cell

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

image

Grid Area

四個網格線包圍的總空間。 網格區(qū)域可以由任意數量的網格單元組成童芹。 下面是行網格線1和3以及列網格線1和3之間的網格區(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，并為其內容建立新的網格格式化上下文(grid formatting context)假褪。

值:

  • grid – 生成一個塊級(block-level)網格
  • inline-grid – 生成一個行級(inline-level)網格
  • subgrid – 如果你的 grid container 本身就是一個 grid item（即,嵌套網格）署咽，你可以使用這個屬性來表示你想從它的父節(jié)點獲取它的行/列的大小，而不是指定它自己的大小生音。
.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;
}
image

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

.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

需要注意的是台谊，一個網格線可以有不止一個名字蓉媳。例如，這里第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屬性指定的網格區(qū)域的名稱來定義網格模板。 重復網格區(qū)域的名稱導致內容擴展到這些單元格贼邓。 點號表示一個空單元格阶冈。 語法本身提供了網格結構的可視化。

值：

  • <grid-area-name> – 使用 grid-area 屬性設置的網格區(qū)域的名稱
  • . – 點號代表一個空網格單元
  • none – 沒有定義網格區(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)建一個四列寬三行高的網格立帖。 整個第一行將由 header 區(qū)域組成眼溶。 中間一行將由兩個 main 區(qū)域、一個空單元格和一個 sidebar 區(qū)域組成晓勇。 最后一行是footer區(qū)域組成堂飞。

image

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

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

需要注意的是你不是在用這個語法命名網格線描融，而是在命名區(qū)域铝噩。 當你使用這種語法時，區(qū)域兩端的網格線實際上是自動命名的窿克。 比如骏庸，如果網格區(qū)域的名稱是foo，那么區(qū)域的起始的行網格線和列網格線名稱是 foo-start年叮，并且區(qū)域終點的行網格線和列網格線名稱是 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;
}
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，則會被設置為與 grid-column-gap 相同的值霉翔。

justify-items

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

值：

  • start: 內容與網格區(qū)域的左端對齊
  • end: 內容與網格區(qū)域的右端對齊
  • center: 內容位于網格區(qū)域的中間位置
  • stretch: 內容寬度占據整個網格區(qū)域空間(這是默認值)
.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: 內容與網格區(qū)域的頂端對齊
  • end: 內容與網格區(qū)域的底部對齊
  • center: 內容位于網格區(qū)域的垂直中心位置
  • stretch: 內容高度占據整個網格區(qū)域空間(這是默認值)
.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這樣的非彈性單位來設置大小谚中，則可能發(fā)生這種情況渴杆。此時，你可以設置網格容器內的網格的對齊方式宪塔。 此屬性沿著行軸對齊網格（與之對應的是 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這樣的非彈性單位來設置大小，則可能發(fā)生這種情況抄囚。此時霉赡，你可以設置網格容器內的網格的對齊方式。 此屬性沿著列軸對齊網格（與之對應的是 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）時被創(chuàng)建攒驰。

值：

  • <track-size> – 可以是一個長度值蟆湖，一個百分比值，或者一個自由空間的一部分（使用 fr 單位）
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

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

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}
Example of 2 x 2 grid

這里創(chuàng)建了一個 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的隱式軌道的就會被創(chuàng)建用與填補間隙隧枫。我們可以使用 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嵌赠，并將所有其他子屬性設置為其初始值塑荒。 你現在所做的是在其網格區(qū)域內，指定網格線名稱和內聯軌道大小姜挺。 可以看下面的例子：

.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 屬性創(chuàng)建模板時來進行引用。另外也可以做為 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 – 將內容對齊到網格區(qū)域的左端
  • end – 將內容對齊到網格區(qū)域的右端
  • center – 將內容對齊到網格區(qū)域的中間
  • stretch – 填充網格區(qū)域的寬度 (這是默認值)

舉例：

.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 – 將內容對齊到網格區(qū)域的頂部
  • end – 將內容對齊到網格區(qū)域的底部
  • center – 將內容對齊到網格區(qū)域的中間
  • stretch – 填充網格區(qū)域的高度 (這是默認值)
.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 屬性在網格容器上設置此行為雇卷。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末鬓椭，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子关划，更是在濱河造成了極大的恐慌小染，老刑警劉巖，帶你破解...
    沈念sama閱讀 221,406評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件祭玉，死亡現場離奇詭異氧映，居然都是意外死亡，警方通過查閱死者的電腦和手機脱货，發(fā)現死者居然都...
    沈念sama閱讀 94,395評論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門岛都，熙熙樓的掌柜王于貴愁眉苦臉地迎上來律姨，“玉大人，你說我怎么就攤上這事臼疫≡穹荩” “怎么了？”我有些...
    開封第一講書人閱讀 167,815評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵烫堤，是天一觀的道長荣赶。 經常有香客問我，道長鸽斟，這世上最難降的妖魔是什么拔创？ 我笑而不...
    開封第一講書人閱讀 59,537評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮富蓄，結果婚禮上剩燥，老公的妹妹穿的比我還像新娘。我一直安慰自己立倍，他們只是感情好灭红，可當我...
    茶點故事閱讀 68,536評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著口注，像睡著了一般变擒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寝志，一...
    開封第一講書人閱讀 52,184評論 1贊 308
  • 城市分裂傳說
    那天娇斑，我揣著相機與錄音，去河邊找鬼澈段。 笑死悠菜，一個胖子當著我的面吹牛，可吹牛的內容都是我干的败富。 我是一名探鬼主播悔醋，決...
    沈念sama閱讀 40,776評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼兽叮！你這毒婦竟也來了芬骄？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 39,668評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤鹦聪，失蹤者是張志新（化名）和其女友劉穎账阻，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體泽本，經...
    沈念sama閱讀 46,212評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡淘太，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,299評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蒲牧。...
    茶點故事閱讀 40,438評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡撇贺，死狀恐怖，靈堂內的尸體忽然破棺而出冰抢，到底是詐尸還是另有隱情松嘶，我是刑警寧澤，帶...
    沈念sama閱讀 36,128評論 5贊 349
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布挎扰，位于F島的核電站翠订，受9級特大地震影響，放射性物質發(fā)生泄漏遵倦。R本人自食惡果不足惜尽超，卻給世界環(huán)境...
    茶點故事閱讀 41,807評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望骇吭。 院中可真熱鬧橙弱，春花似錦、人聲如沸燥狰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0贊 24
  • 一樁弒父案斜筐，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽龙致。三九已至，卻和暖如春顷链，著一層夾襖步出監(jiān)牢的瞬間目代，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工嗤练， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留榛了，地道東北人。 一個月前我還...
    沈念sama閱讀 48,827評論 3贊 376
  • 代替公主和親
    正文 我出身青樓煞抬，卻偏偏與公主長得像霜大，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子革答，可洞房花燭夜當晚...
    茶點故事閱讀 45,446評論 2贊 359

推薦閱讀更多精彩內容

  • CSS Grid布局（又名“網格布局”）是一個二維的基于網格的布局系統战坤，其目的只在于完全改變我們設計基于網格的用戶...
    一顆蛋_閱讀 897評論 0贊 1
  • 網格線(Grid Line) 構成網格結構的分界線。它們既可以是垂直的（“列網格線(column grid lin...
    晚溪呀閱讀 1,193評論 0贊 0
  • CSS Grid(網格) 布局（又稱為 “Grid(網格)” ）残拐，是一個二維的基于網格的布局系統它的目標是完全改變...
    諾CIUM閱讀 1,309評論 0贊 3
  • 上一篇途茫，介紹了grid的瀏覽器兼容和重要的幾個概念，接下來繼續(xù)介紹grid的容器屬性溪食。 Grid(網格) 屬性目錄...
    codeTao閱讀 2,066評論 0贊 1
  • 今天她很生氣囊卜，我們的房子被隔壁鄰居的客人用了，我能理解她的氣憤。 今天薇姐說要過來栅组，的確很開心 義工貌似招得有點多了……
    霍因海姆閱讀 62評論 0贊 0