Grid網(wǎng)格布局學(xué)習(xí)

引言

本文不對grid布局由來以及優(yōu)劣做過多的介紹树酪，僅介紹grid網(wǎng)格布局的用法及其效果顯示

部分說明圖片引用http://chris.house/blog/a-complete-guide-css-grid-layout/和http://blog.jirengu.com/?p=990

瀏覽器支持情況

image

從2017年起冕香，許多瀏覽器都提供了原生的、不加前綴的對CSS Grid的支持哼丈，比如 Chrome（包括Android），F(xiàn)irefox，Safari（包括iOS）和Opera茄袖。

具體瀏覽器支持可查詢https://caniuse.com/#feat=css-grid

基本術(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

網(wǎng)格線：網(wǎng)格和網(wǎng)格之間的分界線，可以是行線也可以是列線

img

Grid Track

網(wǎng)格軌跡：兩條行線與行線或列線與列線之間的空間

img

Grid Cell

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

img

Grid Area

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

img

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

image

父容器(Grid Container)的屬性

display

聲明元素grid網(wǎng)格布局

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

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)格線會(huì)被自動(dòng)分配數(shù)字名稱祈争，而且一個(gè)網(wǎng)格線可以有多個(gè)名字斤程，名字與名字之間用空格相隔[row1-end row2-start]

eg：

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

img

如果你的定義中包含重復(fù)的部分，則可以使用repeat() 符號(hào)來簡化寫法：
.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)格容器自由空間的一部分

例如以下：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)號(hào)表示一個(gè)空單元格沮峡。

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

  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
  
  .item-1 {
      background-color: red;
      grid-area: num1;
    }

   .item-2 {
      background-color: greenyellow;
      grid-area: num2;
    }

   .item-3 {
      background-color: blue;
      grid-area: num3;
    }

   .item-4 {
      background-color: gray;
      grid-area: num4;
    }
  
  
  .container {
    width: 300px;
    height: 300px;
    display: grid;
    /* 確定行列空間 可以使用auto */
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
  }

image

注意：相同命名區(qū)域不可跨行和跨列

同樣 grid-area屬性也可以指定網(wǎng)格線區(qū)域來劃定范圍

.item-2 {
  background-color: greenyellow;
  grid-area: 1 / 1 / 3 / 3;
}

image

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

grid-column-gap / grid-row-gap

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

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

img

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

grid-gap

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

justify-items和align-items

強(qiáng)調(diào)：flex布局中并沒有justify-items屬性，請勿弄混淆乡摹；本人認(rèn)為可能是因?yàn)閒lex布局存在flex-grow和flex-shrink屬性

補(bǔ)充：flex布局可參考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

沿著行軸對齊網(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;
  align-items: start | end | center | stretch;
}

注意：沒有確定item的寬高時(shí)默認(rèn)寬高都是stretch狀態(tài)聪廉，即充滿整個(gè)單元格

沿著行軸對齊網(wǎng)格

.container {
  justify-items: start;
}

img

.container{
  justify-items: end;
}

img

.container {
  justify-items: center;
}

img

.container {
  justify-items: stretch;
}

img

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

沿著列軸對齊網(wǎng)格

.container {
  align-items: start;
}

img

.container {
  align-items: end;
}

img

.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和align-content

內(nèi)容所占區(qū)域相對于網(wǎng)格容器的排列方式板熊，justify-content沿著行軸對齊網(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;  
  align-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

.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

指定自動(dòng)生成的網(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> ...;
}

通俗的講：如果有一個(gè)2X2的容器蚜印，你將一個(gè)單元格定位到了2行5列的位置，則第4列和第5列被稱為隱式軌道留量，默認(rèn)情況下為0

Example of implicit tracks

現(xiàn)在通過設(shè)置grid-auto-columns改變隱式軌道的寬度

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

Example of implicit tracks

grid-auto-flow

控制自動(dòng)布局算法的布局方式窄赋。

值：

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

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

需要注意的是，dense 可能導(dǎo)致您的 grid item 亂序较木。

工作方式為：先在網(wǎng)格中放置有明確定位的定位元素( 即有明確的行或列定位 )，在按照grid-auto-flow屬性的排列方式對 空白區(qū)域 進(jìn)行排列元素

舉例：

創(chuàng)建一個(gè)5*5的網(wǎng)格容器

<div class="wrapper">
    <div class="box a">A1</div>
    <div class="box b">B2</div>
    <div class="box c">C3</div>
    <div class="box d">D4</div>
    <div class="box e">E5</div>
    <div class="box f">F6</div>
    <div class="box h">H7</div>
    <div class="box i">I8</div>
    <div class="box j">J9</div>
    <div class="box k">K10</div>
    <div class="box l">L11</div>
    <div class="box m">M12</div>
    <div class="box n">N13</div>
    <div class="box o">O14</div>
</div>

定位b元素區(qū)域?yàn)榈?行到第4行青柄，第3列到第6列區(qū)域伐债；

.b {
  grid-column: 3 / 6;
  grid-row: 2 / 4;
  outline: 2px solid red;
}

若將e元素有明確定位到第2行到第4行，第1列到第3列

// 方式1：確定行和列
.e{
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  background-color: #ffa94d;
}
// 方式2：確定行或列 span擴(kuò)展
.e{
  grid-column: 1 / span 2;
  grid-row: 2 / span 2; 
  background-color: #ffa94d;
}

效果

image

若e元素沒有明確定位而只是規(guī)定了大小呢致开？

.wrapper .e {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

效果

image

出現(xiàn)這兩種排列現(xiàn)象的原因是什么峰锁？

因?yàn)樵趀元素有明確定位的時(shí)候?yàn)g覽器會(huì)先將有定位的元素（如b和e）優(yōu)先排列在網(wǎng)格中，將剩下的元素從網(wǎng)格的起始位置開始排列放入空的網(wǎng)格中

image

若e并沒有明確定位的時(shí)候双戳，e和其他沒有明確定位元素一樣（如a）只是e所占空間為4格虹蒋，瀏覽器只會(huì)現(xiàn)將有定位元素的b放入網(wǎng)格中，再將a飒货，b魄衅，c，d元素依次放入空白網(wǎng)格塘辅，當(dāng)放置e元素時(shí)晃虫，d后面只有一個(gè)單元格放置不下b，此時(shí)e將會(huì)往下一行（未設(shè)置grid-auto-flow屬性默認(rèn)為row）尋找所能容納的區(qū)域扣墩，中間空白保留哲银。

若要想填充空白區(qū)域可設(shè)置grid-auto-flow: row dense，瀏覽器會(huì)自動(dòng)計(jì)算可以填充的元素自動(dòng)填充到空白區(qū)域

效果

image

如果設(shè)置grid-auto-flow為column將會(huì)遵循一列一列排列

image

孩子(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)編號(hào)的網(wǎng)格線亚脆，也可使用名稱指代相應(yīng)命名的網(wǎng)格線
span <number>: 網(wǎng)格項(xiàng)將跨越指定數(shù)量的網(wǎng)格軌道
span <name>: 網(wǎng)格項(xiàng)將跨越一些軌道做院，直到碰到指定命名的網(wǎng)格線
auto: 自動(dòng)布局，或者自動(dòng)跨越型酥，或者跨越一個(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
}

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

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

justify-self和align-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)值)

最后編輯于：2018.07.24 10:44:21

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末棚亩，一起剝皮案震驚了整個(gè)濱河市蓖议，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌讥蟆，老刑警劉巖勒虾，帶你破解...
沈念sama閱讀 216,544評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異瘸彤，居然都是意外死亡修然，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,430評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門质况，熙熙樓的掌柜王于貴愁眉苦臉地迎上來愕宋，“玉大人，你說我怎么就攤上這事结榄≈斜矗” “怎么了？”我有些...
開封第一講書人閱讀 162,764評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵臼朗，是天一觀的道長邻寿。經(jīng)常有香客問我，道長视哑，這世上最難降的妖魔是什么绣否？我笑而不...
開封第一講書人閱讀 58,193評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮黎炉，結(jié)果婚禮上枝秤，老公的妹妹穿的比我還像新娘。我一直安慰自己慷嗜，他們只是感情好淀弹，可當(dāng)我...
茶點(diǎn)故事閱讀 67,216評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著庆械，像睡著了一般薇溃。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上缭乘，一...
開封第一講書人閱讀 51,182評論 1贊 299
城市分裂傳說
那天沐序，我揣著相機(jī)與錄音，去河邊找鬼堕绩。笑死策幼，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的奴紧。我是一名探鬼主播特姐，決...
沈念sama閱讀 40,063評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼黍氮！你這毒婦竟也來了唐含？” 一聲冷哼從身側(cè)響起浅浮，我...
開封第一講書人閱讀 38,917評論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎捷枯，沒想到半個(gè)月后滚秩，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,329評論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡淮捆，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,543評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年郁油，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片争剿。...
茶點(diǎn)故事閱讀 39,722評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡已艰，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出蚕苇，到底是詐尸還是另有隱情，我是刑警寧澤凿叠，帶...
沈念sama閱讀 35,425評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布涩笤，位于F島的核電站，受9級特大地震影響盒件，放射性物質(zhì)發(fā)生泄漏蹬碧。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,019評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一炒刁、第九天我趴在偏房一處隱蔽的房頂上張望恩沽。院中可真熱鬧，春花似錦翔始、人聲如沸罗心。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,671評論 0贊 22
一樁弒父案城瞎，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽渤闷。三九已至，卻和暖如春脖镀，著一層夾襖步出監(jiān)牢的瞬間飒箭，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,825評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工蜒灰，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弦蹂，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,729評論 2贊 368
代替公主和親
正文我出身青樓强窖，卻偏偏與公主長得像凸椿，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子毕骡，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,614評論 2贊 353

Grid網(wǎng)格布局學(xué)習(xí)

Grid網(wǎng)格布局學(xué)習(xí)

引言

瀏覽器支持情況

基本術(shù)語介紹

Grid Container

Grid Item

Grid Line

Grid Track

Grid Cell

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 Items)的屬性

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

grid-column / grid-row

grid-area

justify-self和align-self

推薦閱讀更多精彩內(nèi)容