CSS Grid 布局完全指南(圖解 Grid 詳細(xì)教程)

flybywind 發(fā)布于2019-04-23 11:50 / 1675人閱讀

摘要：重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格。中間一排將由兩個(gè)區(qū)域，一個(gè)是空單元格，一個(gè)區(qū)域組成。你可以使用任意數(shù)量的相鄰的點(diǎn)來聲明單個(gè)空單元格。只要這些點(diǎn)之間沒有空隙隔開，他們就代表一個(gè)多帶帶的單元格。

CSS Grid 布局是 CSS 中最強(qiáng)大的布局系統(tǒng)。與 flexbox 的一維布局系統(tǒng)不同，CSS Grid 布局是一個(gè)二維布局系統(tǒng)，也就意味著它可以同時(shí)處理列和行。通過將 CSS 規(guī)則應(yīng)用于?父元素?(成為 Grid Container 網(wǎng)格容器)和其?子元素（成為 Grid Items 網(wǎng)格項(xiàng)），你就可以輕松使用 Grid(網(wǎng)格) 布局。

簡介

CSS Grid(網(wǎng)格) 布局（又稱為 “Grid(網(wǎng)格)” ），是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng)，它的目標(biāo)是完全改變我們基于網(wǎng)格的用戶界面的布局方式。

CSS 一直用來布局我們的網(wǎng)頁，但一直以來都存在這樣或那樣的問題。

一開始我們用表格（table），然后是浮動(dòng)（float），再是定位（postion）和內(nèi)嵌塊（inline-block），但是所有這些方法本質(zhì)上都是只是 hack 而已，并且遺漏了很多重要的功能（例如垂直居中）。

Flexbox 的出現(xiàn)很大程度上改善了我們的布局方式，但它的目的是為了解決更簡單的一維布局，而不是復(fù)雜的二維布局（實(shí)際上 Flexbox 和 Grid 能協(xié)同工作，而且配合得非常好）。

Grid(網(wǎng)格) 布局是第一個(gè)專門為解決布局問題而創(chuàng)建的 CSS 模塊，只要我們一直在制作網(wǎng)站，我們就一直要討論這些問題。

有兩個(gè)主要因素激發(fā)了我創(chuàng)建本指南的靈感。第一個(gè)是 Rachel Andrew 出色的書籍?為 CSS Grid 布局做好準(zhǔn)備。

這本書對(duì) Grid 布局做了全面，清晰的介紹，也是本指南的基礎(chǔ)。我強(qiáng)烈建議你購買并閱讀。

另一個(gè)靈感來自 Chris Coyier 的?Flexbox 布局完整指南，這也是我學(xué)習(xí) flexbox 首選的資源。

這篇文章是幫助了很多人，這點(diǎn)從 Google “flexbox” 排名第一就可以看出來。你會(huì)發(fā)現(xiàn)那篇文章和我的文章有很多相似之處，為什么不跟隨最好的文章呢？

本指南的目的是介紹存在于最新版本的規(guī)范中 Grid(網(wǎng)格) 概念。所以我不會(huì)覆蓋過時(shí)的 IE 語法，而且隨著規(guī)范的逐漸成熟，我會(huì)盡我最大的努力去更新這個(gè)指南。

基礎(chǔ)知識(shí)和瀏覽器支持

首先，你必須使用?display: grid?將容器元素定義為一個(gè) grid(網(wǎng)格) 布局，使用?grid-template-columns和?grid-template-rows?設(shè)置列和行的尺寸大小，然后通過?grid-column?和?grid-row?將其子元素放入這個(gè) grid(網(wǎng)格) 中。

與 flexbox 類似，網(wǎng)格項(xiàng)（grid items）的源(HTML結(jié)構(gòu))順序無關(guān)緊要。你的 CSS 可以以任何順序放置它們，這使得使用媒體查詢（media queries）重新排列網(wǎng)格變得非常容易。

定義整個(gè)頁面的布局，然后完全重新排列布局以適應(yīng)不同的屏幕寬度，這些都只需要幾行 CSS ，想象一下就讓人興奮。Grid(網(wǎng)格) 布局是有史以來最強(qiáng)大的 CSS 模塊之一。

截至2017年3月，許多瀏覽器都提供了對(duì) CSS Grid 的原生支持，而且無需加瀏覽器前綴：Chrome（包括 Android ），F(xiàn)irefox，Edge，Safari（包括iOS）和 Opera 。另一方面，Internet Explorer 10和11支持它，但是是一個(gè)過時(shí)的語法實(shí)現(xiàn)。現(xiàn)在是時(shí)候使用 Grid 布局網(wǎng)頁了！

這個(gè)瀏覽器支持 CSS Grid 的數(shù)據(jù)，來自?Caniuse?，你可以查看更多的細(xì)節(jié)。數(shù)字表示支持以上功能的瀏覽器版本號(hào)。

桌面(Desktop) 瀏覽器

Chrome	Opera	Firefox	IE	Edge	Safari
57	44	52	11*(舊語法)	16	10.1

手機(jī)(Mobile) / 平板(Tablet)瀏覽器

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	46	No	67	70	63

除了微軟之外，瀏覽器廠商似乎還沒有對(duì) Grid(網(wǎng)格) 搞自己的一套實(shí)現(xiàn)（比如加前綴），直到規(guī)范完全成熟。這是一件好事，因?yàn)檫@意味著我們不必?fù)?dān)心學(xué)習(xí)多個(gè)語法。

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

重要術(shù)語

在深入了解 Grid 的概念之前，理解術(shù)語是很重要的。由于這里涉及的術(shù)語在概念上都很相似，如果不先記住 Grid 規(guī)范定義的含義，很容易混淆它們。但是別擔(dān)心，術(shù)語并不多。

網(wǎng)格容器(Grid Container)

應(yīng)用?display: grid?的元素。這是所有網(wǎng)格項(xiàng)（grid item）的直接父級(jí)元素。在這個(gè)例子中，container就是?網(wǎng)格容器(Grid Container)。

HTML 代碼:

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

網(wǎng)格項(xiàng)(Grid Item)

網(wǎng)格容器（Grid Container）的子元素（例如直接子元素）。這里?item?元素就是網(wǎng)格項(xiàng)(Grid Item)，但是?sub-item?不是。

HTML 代碼:

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

網(wǎng)格線(Grid Line)

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

網(wǎng)格軌道(Grid Track)

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

網(wǎng)格單元格(Grid Cell)

兩個(gè)相鄰的行和兩個(gè)相鄰的列網(wǎng)格線之間的空間。這是 Grid(網(wǎng)格) 系統(tǒng)的一個(gè)“單元”。下圖是第 1 至第 2 條行網(wǎng)格線和第 2 至第 3 條列網(wǎng)格線交匯構(gòu)成的網(wǎng)格單元格(Grid Cell)。

網(wǎng)格區(qū)域(Grid Area)

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

Grid(網(wǎng)格) 屬性目錄

網(wǎng)格容器(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
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

網(wǎng)格項(xiàng)(Grid Items) 屬性

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

父元素網(wǎng)格容器(Grid Container) 屬性

display

將元素定義為網(wǎng)格容器，并為其內(nèi)容建立新的?網(wǎng)格格式上下文。

值：

grid?：生成一個(gè)塊級(jí)網(wǎng)格
inline-grid?：生成一個(gè)內(nèi)聯(lián)網(wǎng)格

CSS 代碼:

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

注意：通過嵌套元素（也稱為子網(wǎng)格，即 subgrid ）向下傳遞網(wǎng)格參數(shù)的能力已移至?CSS Grid 規(guī)范的 Level 2 版本。這里有?一個(gè)快速解釋。

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用來定義網(wǎng)格的列和行。這些值表示網(wǎng)格軌道(Grid Track) 大小，它們之間的空格表示網(wǎng)格線。

值：
–?：可以是長度值，百分比，或者等份網(wǎng)格容器中可用空間（使用?fr?單位）
–?：你可以選擇的任意名稱

CSS 代碼:

.container {
  grid-template-columns:  ... | 
  ...;
  grid-template-rows:  ... | 
  ...;
}

示例：

當(dāng)你在網(wǎng)格軌道(Grid Track) 值之間留出空格時(shí)，網(wǎng)格線會(huì)自動(dòng)分配正數(shù)和負(fù)數(shù)名稱：

CSS 代碼:

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

但是你可以明確的指定網(wǎng)格線(Grid Line)名稱，例如值。請注意網(wǎng)格線名稱的括號(hào)語法：

CSS 代碼:

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

請注意，一條網(wǎng)格線(Grid Line)可以有多個(gè)名稱。例如，這里的第二條行網(wǎng)格線(row grid lines) 將有兩個(gè)名字：row1-end 和 row2-start ：

CSS 代碼:

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

如果你的定義包含多個(gè)重復(fù)值，則可以使用?repeat()?表示法來簡化定義：

CSS 代碼:

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

上面的代碼等價(jià)于：

CSS 代碼:

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

如果多行共享相同的名稱，則可以通過其網(wǎng)格線名稱和計(jì)數(shù)來引用它們。

CSS 代碼:

.item {
  grid-column-start: col-start 2;
}

fr?單元允許你用等分網(wǎng)格容器剩余可用空間來設(shè)置網(wǎng)格軌道(Grid Track) 的大小。例如，下面的代碼會(huì)將每個(gè)網(wǎng)格項(xiàng)設(shè)置為網(wǎng)格容器寬度的三分之一：

CSS 代碼:

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

剩余可用空間是除去所有非靈活網(wǎng)格項(xiàng)?之后?計(jì)算得到的。在這個(gè)例子中，可用空間總量減去 50px 后，再給?fr?單元的值 3 等分：

CSS 代碼:

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

grid-template-areas

通過引用?grid-area?屬性指定的網(wǎng)格區(qū)域(Grid Area) 名稱來定義網(wǎng)格模板。重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格。一個(gè)點(diǎn)號(hào)（.）代表一個(gè)空單元格。這個(gè)語法本身可視作網(wǎng)格的可視化結(jié)構(gòu)。

值：

：由網(wǎng)格項(xiàng)的?grid-area?指定的網(wǎng)格區(qū)域名稱
.（點(diǎn)號(hào)）：代表一個(gè)空的網(wǎng)格單元
none：不定義網(wǎng)格區(qū)域

CSS 代碼:

.container {
  grid-template-areas: 
    " | . | none | ..."
    "...";
}

示例：

CSS 代碼:

.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è) 4 列寬 3 行高的網(wǎng)格。整個(gè)頂行將由?header?區(qū)域組成。中間一排將由兩個(gè)?main?區(qū)域，一個(gè)是空單元格，一個(gè)?sidebar?區(qū)域組成。最后一行全是?footer?區(qū)域組成。

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

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

注意你?不能?用這個(gè)語法來命名網(wǎng)格線，只是命名?網(wǎng)格區(qū)域?。當(dāng)你使用這種語法時(shí)，區(qū)域兩端的網(wǎng)格線實(shí)際上會(huì)自動(dòng)命名。如果你的網(wǎng)格區(qū)域的名字是?foo，該區(qū)域的起始行網(wǎng)格線和起始列網(wǎng)格線的名稱將為?foo-start，而最后一條行網(wǎng)格線和最后一條列網(wǎng)格線的名稱將為?foo-end。這意味著某些網(wǎng)格線可能有多個(gè)名字，如上例中最左邊的網(wǎng)格線，它將有三個(gè)名稱：header-start，main-start 和 footer-start 。

grid-template

用于定義?grid-template-rows?，grid-template-columns?，grid-template-areas?簡寫屬性。

值：

none：將所有三個(gè)屬性設(shè)置為其初始值
/ ：將?grid-template-columns?和?grid-template-rows?設(shè)置為相應(yīng)地特定的值，并且設(shè)置grid-template-areas為none

CSS 代碼:

.container {
  grid-template: none |  / ;
}

這個(gè)屬性也接受一個(gè)更復(fù)雜但非常方便的語法來指定三個(gè)上訴屬性。這里有一個(gè)例子：

CSS 代碼:

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

等價(jià)于：

CSS 代碼:

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

grid-column-gap / grid-row-gap

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

值：

?：長度值

CSS 代碼:

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

示例：

CSS 代碼:

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

只能在列/行之間創(chuàng)建間距，網(wǎng)格外部邊緣不會(huì)有這個(gè)間距。

注意：這兩個(gè)屬性將刪除?grid-?前綴，就是將?grid-column-gap?和?grid-row-gap重命名為?column-gap和?row-gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已經(jīng)支持無前綴的屬性。

grid-gap

grid-column-gap?和?grid-row-gap?的簡寫語法

值：

：長度值

CSS 代碼:

.container {
  grid-gap:  ;
}

示例：

CSS 代碼:

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

如果grid-row-gap沒有定義，那么就會(huì)被設(shè)置為等同于?grid-column-gap?的值。例如下面的代碼是等價(jià)的：

CSS 代碼:

.container{
  /* 設(shè)置 grid-column-gap 和 grid-row-gap */  
  grid-column-gap: 10px;
  grid-row-gap: 10px; 
 
  /* 等價(jià)于 */  
  grid-gap: 10px 10px;
 
  /* 等價(jià)于 */  
  grid-gap: 10px;
}

注意：這個(gè)屬性將刪除?grid-?前綴，就是將?grid-gap?重命名為?gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已經(jīng)支持無前綴的屬性。

justify-items

沿著?inline（行）軸線對(duì)齊網(wǎng)格項(xiàng)(grid items)（相反的屬性是?align-items?沿著?block（列）軸線對(duì)齊）。此值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)。

值：

start：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的左側(cè)起始邊緣（左側(cè)對(duì)齊）
end：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的右側(cè)結(jié)束邊緣（右側(cè)對(duì)齊）
center：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的水平中間位置（水平居中對(duì)齊）
stretch：填滿單元格的寬度（默認(rèn)值）

CSS 代碼:

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

示例：

CSS 代碼:

.container {
  justify-items: start;
}

CSS 代碼:

.container{
  justify-items: end;
}

CSS 代碼:

.container{
  justify-items: center;
}

CSS 代碼:

.container{
  justify-items: stretch;
}

這些行為也可以通過每個(gè)多帶帶網(wǎng)格項(xiàng)(grid items) 的?justify-self?屬性設(shè)置。

align-items

沿著?block（列）軸線對(duì)齊網(wǎng)格項(xiàng)(grid items)（相反的屬性是?justify-items?沿著?inline（行）軸線對(duì)齊）。此值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)。

值：

start：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的頂部起始邊緣（頂部對(duì)齊）
end：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的底部結(jié)束邊緣（底部對(duì)齊）
center：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的垂直中間位置（垂直居中對(duì)齊）
stretch：填滿單元格的高度（默認(rèn)值）

CSS 代碼:

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

示例：

CSS 代碼:

.container {
  align-items: start;
}

CSS 代碼:

.container {
  align-items: end;
}

CSS 代碼:

.container {
  align-items: center;
}

CSS 代碼:

.container {
  align-items: stretch;
}

這些行為也可以通過每個(gè)多帶帶網(wǎng)格項(xiàng)(grid items) 的?align-self?屬性設(shè)置。

place-items

place-items?是設(shè)置?align-items?和?justify-items?的簡寫形式。

值：

：第一個(gè)值設(shè)置?align-items?屬性，第二個(gè)值設(shè)置?justify-items屬性。如果省略第二個(gè)值，則將第一個(gè)值同時(shí)分配給這兩個(gè)屬性。

除 Edge 之外的所有主要瀏覽器都支持?place-items?簡寫屬性。

有關(guān)更多詳細(xì)信息，請參閱align-items?和?justify-items。

justify-content

有時(shí)，你的網(wǎng)格合計(jì)大小可能小于其網(wǎng)格容器(grid container) 大小。如果你的所有網(wǎng)格項(xiàng)(grid items) 都使用像?px?這樣的非靈活單位設(shè)置大小，就可能出現(xiàn)這種情況。

在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。此屬性沿著?inline（行）軸線對(duì)齊網(wǎng)格（相反的屬性是?align-content?，沿著?block（列）軸線對(duì)齊網(wǎng)格）。

值：

start：將網(wǎng)格對(duì)齊到網(wǎng)格容器(grid container) 的左側(cè)起始邊緣（左側(cè)對(duì)齊）
end：將網(wǎng)格對(duì)齊到網(wǎng)格容器的右側(cè)結(jié)束邊緣（右側(cè)對(duì)齊）
center：將網(wǎng)格對(duì)齊到網(wǎng)格容器的水平中間位置（水平居中對(duì)齊）
stretch：調(diào)整網(wǎng)格項(xiàng)(grid items) 的寬度，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器的寬度
space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端放置一半的空間
space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端沒有空間
space-evenly：在每個(gè)網(wǎng)格項(xiàng)目之間放置一個(gè)均勻的空間，左右兩端放置一個(gè)均勻的空間

CSS 代碼:

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

示例：

CSS 代碼:

.container {
  justify-content: start;
}

CSS 代碼:

.container {
  justify-content: end;
}

CSS 代碼:

.container {
  justify-content: center;
}

CSS 代碼:

.container {
  justify-content: stretch;
}

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

align-content

在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。此屬性沿著?block（列）軸線對(duì)齊網(wǎng)格（相反的屬性是?justify-content?，沿著?inline（行）軸線對(duì)齊網(wǎng)格）。

值：

start：將網(wǎng)格對(duì)齊到網(wǎng)格容器(grid container) 的頂部起始邊緣（頂部對(duì)齊）
end：將網(wǎng)格對(duì)齊到網(wǎng)格容器的底部結(jié)束邊緣（底部對(duì)齊）
center：將網(wǎng)格對(duì)齊到網(wǎng)格容器的垂直中間位置（垂直居中對(duì)齊）
stretch：調(diào)整網(wǎng)格項(xiàng)(grid items) 的高度，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器的高度
space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端放置一半的空間
space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端沒有空間
space-evenly：在每個(gè)網(wǎng)格項(xiàng)目之間放置一個(gè)均勻的空間，上下兩端放置一個(gè)均勻的空間

CSS 代碼:

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

示例：

CSS 代碼:

.container {
  align-content: start; 
}

CSS 代碼:

.container {
  align-content: end;   
}

CSS 代碼:

.container {
  align-content: center;    
}

CSS 代碼:

.container {
  align-content: stretch;   
}

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

place-content

place-content?是設(shè)置?align-content?和?justify-content?的簡寫形式。

值：

：第一個(gè)值設(shè)置?align-content?屬性，第二個(gè)值設(shè)置?justify-content?屬性。如果省略第二個(gè)值，則將第一個(gè)值同時(shí)分配給這兩個(gè)屬性。

除 Edge 之外的所有主要瀏覽器都支持?place-content?簡寫屬性。

有關(guān)更多詳細(xì)信息，請參閱align-content?和?justify-content。

grid-auto-columns / grid-auto-rows

指定任何自動(dòng)生成的網(wǎng)格軌道(grid tracks)（又名隱式網(wǎng)格軌道）的大小。當(dāng)網(wǎng)格中的網(wǎng)格項(xiàng)多于單元格時(shí)，或者當(dāng)網(wǎng)格項(xiàng)位于顯式網(wǎng)格之外時(shí)，就會(huì)創(chuàng)建隱式軌道。（參見顯式網(wǎng)格和隱式網(wǎng)格之間的區(qū)別）

值：

：可以是長度值，百分比，或者等份網(wǎng)格容器中可用空間的分?jǐn)?shù)（使用?fr?單位）

CSS 代碼:

.container {
  grid-auto-columns:  ...;
  grid-auto-rows:  ...;
}

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

CSS 代碼:

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

這將生成了一個(gè) 2×2 的網(wǎng)格。

但現(xiàn)在想象一下，你使用?grid-column?和?grid-row?來定位你的網(wǎng)格項(xiàng)，像這樣：

CSS 代碼:

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

我們告訴?.item-b?從第 5 條列網(wǎng)格線開始到第 6 條列網(wǎng)格線結(jié)束，但我們從來沒有定義過第5 或第6 列網(wǎng)格線。
因?yàn)槲覀円玫木W(wǎng)格線不存在，所以創(chuàng)建寬度為 0 的隱式網(wǎng)格軌道以填補(bǔ)空缺。我們可以使用?grid-auto-columns?和?grid-auto-rows?來指定這些隱式軌道的大?。?/p>

CSS 代碼:

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

grid-auto-flow

如果你有一些沒有明確放置在網(wǎng)格上的網(wǎng)格項(xiàng)(grid items)，自動(dòng)放置算法?會(huì)自動(dòng)放置這些網(wǎng)格項(xiàng)。該屬性控制自動(dòng)布局算法如何工作。

值：

row：告訴自動(dòng)布局算法依次填充每行，根據(jù)需要添加新行（默認(rèn)）
column：告訴自動(dòng)布局算法依次填入每列，根據(jù)需要添加新列
dense：告訴自動(dòng)布局算法在稍后出現(xiàn)較小的網(wǎng)格項(xiàng)時(shí)，嘗試填充網(wǎng)格中較早的空缺

CSS 代碼:

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

請注意，dense?只會(huì)更改網(wǎng)格項(xiàng)的可視順序，并可能導(dǎo)致它們出現(xiàn)亂序，這對(duì)可訪問性不利。

示例：

考慮以下 HTML :

HTML 代碼:

<section class="container">
  <div class="item-a">item-adiv>
  <div class="item-b">item-bdiv>
  <div class="item-c">item-cdiv>
  <div class="item-d">item-ddiv>
  <div class="item-e">item-ediv>
section>

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

CSS 代碼:

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

將網(wǎng)格項(xiàng)放在網(wǎng)格上時(shí)，只能為其中的兩個(gè)指定位置：

CSS 代碼:

.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?，所以我們的網(wǎng)格看起來會(huì)是這樣。注意?我們沒有進(jìn)行定位的網(wǎng)格項(xiàng)（item-b，item-c，item-d）會(huì)這樣排列在可用的行中：

相反地，如果我們把?grid-auto-flow?設(shè)成了?column?，那么?item-b，item-c，item-d?會(huì)沿著列向下排列：

CSS 代碼:

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

grid

在一個(gè)聲明中設(shè)置所有以下屬性的簡寫：?grid-template-rows,?grid-template-columns,?grid-template-areas,?grid-auto-rows,?grid-auto-columns, 和?grid-auto-flow?。（注意：您只能在單個(gè)網(wǎng)格聲明中指定顯式或隱式網(wǎng)格屬性）。

值：

none：將所有子屬性設(shè)置為其初始值。
：與grid-template?簡寫的工作方式相同。
/ [ auto-flow && dense? ] ??：將grid-template-rows設(shè)置為指定的值。如果?auto-flow?關(guān)鍵字位于斜杠的右側(cè)，則會(huì)將?grid-auto-flow?設(shè)置為?column。如果另外指定了?dense?關(guān)鍵字，則自動(dòng)放置算法使用 “dense” 算法。如果省略?grid-auto-columns，則將其設(shè)置為?auto。
[ auto-flow && dense? ] ? / ：將?grid-template-columns?設(shè)置為指定值。如果?auto-flow?關(guān)鍵字位于斜杠的左側(cè)，則會(huì)將grid-auto-flow?設(shè)置為?row?。如果另外指定了?dense?關(guān)鍵字，則自動(dòng)放置算法使用 “dense” 打包算法。如果省略?grid-auto-rows?，則將其設(shè)置為?auto。

例子：

以下兩個(gè)代碼塊是等效的：

CSS 代碼:

.container {
  grid: 100px 300px / 3fr 1fr;
}

CSS 代碼:

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

以下兩個(gè)代碼塊是等效的：

CSS 代碼:

.container {
  grid: auto-flow / 200px 1fr;
}

CSS 代碼:

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

以下兩個(gè)代碼塊是等效的：

CSS 代碼:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

CSS 代碼:

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

以下兩個(gè)代碼塊是等效的：

CSS 代碼:

.container {
  grid: 100px 300px / auto-flow 200px;
}

CSS 代碼:

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

它也接受一個(gè)更復(fù)雜但相當(dāng)方便的語法來一次設(shè)置所有內(nèi)容。您可以指定?grid-template-areas，grid-template-rows和grid-template-columns，并所有其他的子屬性都被設(shè)置為它們的初始值。這么做可以在它們網(wǎng)格區(qū)域內(nèi)相應(yīng)地指定網(wǎng)格線名字和網(wǎng)格軌道的大小。用最簡單的例子來描述：

CSS 代碼:

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

等價(jià)于：

CSS 代碼:

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

子元素網(wǎng)格項(xiàng)(Grid Items) 屬性

注意：float，display: inline-block，display: table-cell，vertical-align?和?column-*?屬性對(duì)網(wǎng)格項(xiàng)無效。

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

通過引用特定網(wǎng)格線(grid lines) 來確定網(wǎng)格項(xiàng)(grid item) 在網(wǎng)格內(nèi)的位置。?grid-column-start?/?grid-row-start?是網(wǎng)格項(xiàng)開始的網(wǎng)格線，grid-column-end?/?grid-row-end?是網(wǎng)格項(xiàng)結(jié)束的網(wǎng)格線。

值：

?：可以是一個(gè)數(shù)字引用一個(gè)編號(hào)的網(wǎng)格線，或者一個(gè)名字來引用一個(gè)命名的網(wǎng)格線
span ?：該網(wǎng)格項(xiàng)將跨越所提供的網(wǎng)格軌道數(shù)量
span ?：該網(wǎng)格項(xiàng)將跨越到它與提供的名稱位置
auto：表示自動(dòng)放置，自動(dòng)跨度，默認(rèn)會(huì)擴(kuò)展一個(gè)網(wǎng)格軌道的寬度或者高度

CSS 代碼:

.item {
  grid-column-start:  |  | span  | span  | auto
  grid-column-end:  |  | span  | span  | auto
  grid-row-start:  |  | span  | span  | auto
  grid-row-end:  |  | span  | span  | auto
}

示例：

CSS 代碼:

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

CSS 代碼:

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

項(xiàng)目可以相互重疊。您可以使用?z-index?來控制它們的重疊順序。

grid-column / grid-row

分別為?grid-column-start?+?grid-column-end?和?grid-row-start?+?grid-row-end?的簡寫形式。

值：

/ ：每個(gè)網(wǎng)格項(xiàng)都接受所有相同的值，作為普通書寫的版本，包括跨度

CSS 代碼:

.item {
  grid-column:  /  |  / span ;
  grid-row:  /  |  / span ;
}

示例：

CSS 代碼:

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

如果沒有聲明分隔線結(jié)束位置，則該網(wǎng)格項(xiàng)默認(rèn)占據(jù) 1 個(gè)網(wǎng)格軌道。

grid-area

為網(wǎng)格項(xiàng)提供一個(gè)名稱，以便可以被使用網(wǎng)格容器?grid-template-areas?屬性創(chuàng)建的模板進(jìn)行引用。另外，這個(gè)屬性可以用作grid-row-start?+?grid-column-start?+?grid-row-end?+?grid-column-end?的簡寫。

值：

：你所選的名稱
/ / / ：數(shù)字或分隔線名稱

CSS 代碼:

.item {
  grid-area:  |  /  /  / ;
}

示例：

作為為網(wǎng)格項(xiàng)分配名稱的一種方法：

CSS 代碼:

.item-d {
  grid-area: header
}

作為grid-row-start?+?grid-column-start?+?grid-row-end?+?grid-column-end?屬性的簡寫形式

CSS 代碼:

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

justify-self

沿著?inline（行）軸線對(duì)齊網(wǎng)格項(xiàng)（相反的屬性是?align-self?，沿著?block（列）軸線對(duì)齊）。此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容。

值：

start：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的左側(cè)起始邊緣（左側(cè)對(duì)齊）
end：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的右側(cè)結(jié)束邊緣（右側(cè)對(duì)齊）
center：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的水平中間位置（水平居中對(duì)齊）
stretch：填滿單元格的寬度（默認(rèn)值）

CSS 代碼:

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

示例：

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

要為網(wǎng)格中的所有網(wǎng)格項(xiàng)設(shè)置行軸線(row axis) 線上對(duì)齊方式，也可以在網(wǎng)格容器上設(shè)置?justify-items屬性。

align-self

沿著?block（列）軸線對(duì)齊網(wǎng)格項(xiàng)(grid items)（相反的屬性是?justify-self?，沿著?inline（行）軸線對(duì)齊）。此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容。

值：

start：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的頂部起始邊緣（頂部對(duì)齊）
end：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的底部結(jié)束邊緣（底部對(duì)齊）
center：將網(wǎng)格項(xiàng)對(duì)齊到其單元格的垂直中間位置（垂直居中對(duì)齊）
stretch：填滿單元格的高度（默認(rèn)值）

CSS 代碼:

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

示例：

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

要為網(wǎng)格中的所有網(wǎng)格項(xiàng)設(shè)置列軸線(column axis) 上的對(duì)齊方式，也可以在網(wǎng)格容器上設(shè)置?align-items屬性。

place-self

place-self?是設(shè)置?align-self?和?justify-self?的簡寫形式。

值：

auto?– 布局模式的 “默認(rèn)” 對(duì)齊方式。
：第一個(gè)值設(shè)置?align-self?屬性，第二個(gè)值設(shè)置?justify-self?屬性。如果省略第二個(gè)值，則將第一個(gè)值同時(shí)分配給這兩個(gè)屬性。

示例：

CSS 代碼:

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

CSS 代碼:

.item-a {
  place-self: center stretch;
}

除 Edge 之外的

GPU云服務(wù)器云服務(wù)器 Grid extjs grid grid++主子報(bào)表 Grid組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1221.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

flybywind

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

jsp代碼實(shí)例第98課

閱讀 768·2021-11-23 09:51
leetcode每日一題-520:檢測大寫字母

閱讀 3645·2021-11-15 11:38
華為云CEO張平安談新組織架構(gòu)調(diào)整：圍繞業(yè)務(wù)場景已成立三個(gè)業(yè)務(wù)部_云資訊

閱讀 1027·2021-10-14 09:42
程序員的算法趣題Q45: 排序交換次數(shù)的最少化

閱讀 3295·2021-09-29 09:35
服務(wù)器禁用TLS 1.0協(xié)議

閱讀 2204·2021-09-03 10:33
微信內(nèi)h5頁面打開小程序

閱讀 817·2021-07-30 16:33
網(wǎng)頁標(biāo)準(zhǔn)文檔流中垂直方向的margin塌陷現(xiàn)象

閱讀 1613·2019-08-30 15:55
自動(dòng)輪播切換tab

閱讀 1901·2019-08-30 14:04

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

CSS Grid 布局完全指南(圖解 Grid 詳細(xì)教程)

簡介

基礎(chǔ)知識(shí)和瀏覽器支持

桌面(Desktop) 瀏覽器

手機(jī)(Mobile) / 平板(Tablet)瀏覽器

重要術(shù)語

網(wǎng)格容器(Grid Container)

網(wǎng)格項(xiàng)(Grid Item)

網(wǎng)格線(Grid Line)

網(wǎng)格軌道(Grid Track)

網(wǎng)格單元格(Grid Cell)

網(wǎng)格區(qū)域(Grid Area)

Grid(網(wǎng)格) 屬性目錄

網(wǎng)格容器(Grid Container) 屬性

網(wǎng)格項(xiàng)(Grid Items) 屬性

父元素 網(wǎng)格容器(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

place-items

justify-content

align-content

place-content

grid-auto-columns / grid-auto-rows

grid-auto-flow

grid

子元素 網(wǎng)格項(xiàng)(Grid Items) 屬性

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

grid-column / grid-row

grid-area

justify-self

align-self

place-self

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

父元素網(wǎng)格容器(Grid Container) 屬性

子元素網(wǎng)格項(xiàng)(Grid Items) 屬性