Grid柵格布局

轉(zhuǎn)載地址：https://www.cnblogs.com/xiaohuochai/p/7083153.html

前面的話

Grid布局方式借鑒了平面裝幀設(shè)計中的格線系統(tǒng)赞辩，將格線運用在屏幕上，而不再是單一的靜態(tài)頁面糟需，可以稱之為真正的柵格圆凰。本文將詳細介紹grid布局

引入

對于Web開發(fā)者來說挑童，網(wǎng)頁布局一直是個比較重要的問題菇民。但實際上玉雾，在網(wǎng)頁開發(fā)很長的一段時間當(dāng)中，我們甚至沒有一個比較完整的布局模塊壁涎。總的來說 Web 布局經(jīng)歷了以下四個階段：

1竟坛、table表格布局洼冻，通過 Dreamweaver 拖拽表格或者手寫 table 標(biāo)簽布局

2、float浮動及position定位布局，借助元素元素盒模型本身的特性以及 float position 等屬性等進行布局

3、flex彈性盒模型布局，革命性的突破斟冕，解決傳統(tǒng)布局方案上的三大痛點排列方向十办、對齊方式，自適應(yīng)尺寸再扭。是目前最為成熟和強大的布局方案

4、grid柵格布局赡突，二維布局模塊，具有強大的內(nèi)容尺寸和定位能力，適合需要在兩個維度上對齊內(nèi)容的布局

Grid Layout 是一種基于二維網(wǎng)格的布局系統(tǒng)，旨在完全改變我們設(shè)計基于網(wǎng)格的用戶界面的方式，彌補網(wǎng)頁開發(fā)在二維布局能力上的缺陷

與flex分為伸縮容器和伸縮項目類似，grid也分為網(wǎng)格容器和網(wǎng)格項目

網(wǎng)格容器

display

通過display屬性設(shè)置屬性值為grid或inline-grid可以創(chuàng)建一個網(wǎng)格容器般眉。網(wǎng)格容器中的所有子元素就會自動變成網(wǎng)格項目（grid item）

網(wǎng)格項目默認(rèn)放在行中冗酿，并且跨網(wǎng)格容器的全寬

顯式網(wǎng)格

使用grid-template-columns和grid-template-rows屬性可以顯式的設(shè)置一個網(wǎng)格的列和行

【grid-template-rows】

默認(rèn)值為none

grid-template-rows指定的每個值可以創(chuàng)建每行的高度。行的高度可以是任何非負(fù)值襟沮，長度可以是px剥哑、%、em等長度單位的值

item1和item2具有固定的高座哩，分別為60px和40px姜骡。因為只定義了兩個行的高度值尘惧，所以item3和item4的高度是根據(jù)其自身的內(nèi)容來定義啥么。

【grid-template-columns】

默認(rèn)值為none

像行一樣似踱，通過grid-template-columns指定的每個值來創(chuàng)建每列的列寬

item4和item5放置在新的一行（第二行），因為grid-template-columns只定義了三列的大小驰坊，它們也分別放置在列1、列2和列3；其中列1譬猫、列2和列3的尺寸大小等于item1叨恨、item2和item3寬度诚亚。item1益愈、item2和item3具有固定的寬度值敏释，分別為40px靠汁、50px和60px

【fr】

fr單位可以幫助我們創(chuàng)建一個彈列的網(wǎng)格軌道奶浦。它代表了網(wǎng)格容器中可用的空間（就像Flexbox中無單位的值）

在這個示例中，網(wǎng)格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是網(wǎng)格容器寬度的四分之一瓶殃。所以item1和item2的寬度是網(wǎng)格容器的四分之一寬，item3是網(wǎng)格容器寬度的四分之二（2fr）

當(dāng)fr和其它長度單位的值結(jié)合在一起的時候，fr是基于網(wǎng)格容器可用空間來計算继薛。

在這個示例中遏考，網(wǎng)格容器可用空間是網(wǎng)格寬度減去3rem和25%剩下的寬度，而fr就是基于這個尺寸計算：

【minmax()】

可以通過minmax()函數(shù)來創(chuàng)建網(wǎng)格軌道的最小或最大尺寸青团。minmax()函數(shù)接受兩個參數(shù)：第一個參數(shù)定義網(wǎng)格軌道的最小值督笆，第二個參數(shù)定義網(wǎng)格軌道的最大值娃肿≈槭可以接受任何長度值，也接受auto值晒杈。auto值允許網(wǎng)格軌道基于內(nèi)容的尺寸拉伸或擠壓

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;</pre>

在這個示例中孔厉，第一行的高度最小值是100px，但其最大值為auto说庭，允許行的高度可以變大超過100px郑趁。第一列設(shè)置了最小值為auto，但它的最大值是50%舅柜，也就是列的最大寬度不會超過網(wǎng)格容器寬度的50%

【repeat()】

使用repeat()可以創(chuàng)建重復(fù)的網(wǎng)格軌道致份。這個適用于創(chuàng)建相等尺寸的網(wǎng)格項目和多個網(wǎng)格項目础拨。repeat()接受兩個參數(shù)：第一個參數(shù)定義網(wǎng)格軌道應(yīng)該重復(fù)的次數(shù)，第二個參數(shù)定義每個軌道的尺寸滔蝉。

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px;</pre>

在這個示例中塔沃，第一列和最后一列的寬度都是30px蛀柴，并且它們之間有另列三列，這三列是通過repeat()來創(chuàng)建的鸽疾，而且每列的列寬是1fr（1fr = (網(wǎng)格寬度 - 30px - 30px) / 3）

間距

【grid-column-gap】

創(chuàng)建列與列之間的間距

【grid-row-gap】

創(chuàng)建行與行之間的間距

【grid-gap】

默認(rèn)值為0

grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫，如果它指定了兩個值融蹂，那么第一個值是設(shè)置grid-row-gap的值超燃，第二個值設(shè)置grid-column-gap的值拘领。如果只設(shè)置了一個值，表示行和列的間距相等约素，也就是說grid-row-gap和grid-column-gap的值相同

[注意]grid-gap只能創(chuàng)建列與列或行與行之間的間距圣猎，但不能創(chuàng)建列和行與網(wǎng)格容器邊緣的間距

間距(Gap)可以設(shè)置任何非負(fù)值，長度值可以是px慢显、%、em等單位值

網(wǎng)格項目

網(wǎng)格線

【grid-row-start】

【grid-row-end】

【grid-column-start】

【grid-column-end】

默認(rèn)值為auto

通過網(wǎng)格線可以定位網(wǎng)格項目荚藻。網(wǎng)格線實際上是代表線的開始、結(jié)束共郭，兩者之間就是網(wǎng)格列或行除嘹。每條線是從網(wǎng)格軌道開始岸蜗，網(wǎng)格的網(wǎng)格線從1開始，每條網(wǎng)格線逐步增加1

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;　 </pre>

兩列三行的網(wǎng)格創(chuàng)建三條列網(wǎng)格線和四條行網(wǎng)格線。item1就是由行和列的號碼重新定位蟆肆。如果一個網(wǎng)格項目跨度只有一行或一列，那么grid-row-end和grid-olumn-end不是必需的

【grid-row】

【grid-column】

grid-row是grid-row-start和grid-row-end的簡寫枚冗。grid-column是grid-column-start和grid-column-end的簡寫赁温。如果只提供一個值淤齐，則指定了grid-row-start(grid-column-start)值；如果提供兩個值稚疹，第一個值是grid-row-start(grid-column-start)的值祭务，第二個值是grid-row-end(grid-column-end)的值，兩者之間必須要用/隔開

默認(rèn)值為auto

【span】

關(guān)鍵詞span后面緊隨數(shù)字柳沙，表示合并多少個列或行

【grid-area】

如果指定四個值赂鲤，第一個值對應(yīng)grid-row-start，第二個值對應(yīng)grid-column-start蛤袒，第三個值對應(yīng)grid-row-end，第四個值對應(yīng)grid-column-end

網(wǎng)格線命名

通過grid-template-rows和grid-template-columns定義網(wǎng)格時妙真，網(wǎng)格線可以被命名。網(wǎng)格線名稱也可以設(shè)置網(wǎng)格項目位置

分配網(wǎng)格線名稱必須用方括號[網(wǎng)格線名稱]练般，然后后面緊跟網(wǎng)格軌道的尺寸值锈候。定義網(wǎng)格線名稱時需要避免使用規(guī)范中出現(xiàn)的關(guān)鍵詞，以免導(dǎo)致混亂摄职。

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];</pre>

image

可以在方括號中添加多個名稱來命名網(wǎng)格線名稱谷市，使用多外名稱命名網(wǎng)格線名稱時击孩，名稱間要用空格隔開。每一個網(wǎng)格線的名稱可以用來定位網(wǎng)格項目的位置

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];</pre>

image

使用網(wǎng)格線名稱設(shè)置網(wǎng)格項目位置和使用網(wǎng)格線號碼設(shè)置網(wǎng)格項目位置類似，引用網(wǎng)格線名稱的時候不應(yīng)該帶方括號

使用repeat()函數(shù)可以給網(wǎng)格線分配相同的名稱括蝠。這可以節(jié)省一定的時間忌警。

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);</pre>

使用repeat()函數(shù)可以給網(wǎng)格線命名，這也導(dǎo)致多個網(wǎng)格線具有相同的網(wǎng)格線名稱慨蓝。相同網(wǎng)格線名稱指定網(wǎng)格線的位置和名稱礼烈，也且會自動在網(wǎng)格線名稱后面添加對應(yīng)的數(shù)字，使其網(wǎng)格線名稱也是唯一的標(biāo)識符

image

使用相同的網(wǎng)格線名稱可以設(shè)置網(wǎng)格項目的位置庭呜。網(wǎng)格線的名稱和數(shù)字之間需要用空格分開

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;</pre>

網(wǎng)格區(qū)域命名

【grid-template-areas】

像網(wǎng)格線名稱一樣，網(wǎng)格區(qū)域的名稱可以使用grid-template-areas屬性來命名扶关。引用網(wǎng)格區(qū)域名稱也可以設(shè)置網(wǎng)格項目位置

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;</pre>

設(shè)置網(wǎng)格區(qū)域的名稱應(yīng)該放置在單引號或雙引號內(nèi)节槐，每個名稱由一個空格符分開铜异。網(wǎng)格區(qū)域的名稱秸架，每組（單引號或雙引號內(nèi)的網(wǎng)格區(qū)域名稱）定義了網(wǎng)格的一行，每個網(wǎng)格區(qū)域名稱定義網(wǎng)格的一列

[注意]grid-template-areas: "header header" "content sidebar" "footer footer";不可以簡寫為grid-template-areas: "header" "content sidebar" "footer";

image

grid-row-start蚂子、grid-row-end缭黔、grid-column-start和grid-column-end以及簡寫的grid-row、grid-column董瞻、grid-area都可以引用網(wǎng)格區(qū)域名稱田巴，用來設(shè)置網(wǎng)格項目位置

隱式網(wǎng)格

【grid-auto-flow】

網(wǎng)格默認(rèn)流方向是row挟秤，可以通過grid-auto-flow屬性把網(wǎng)格流的方向改變成column

當(dāng)網(wǎng)格項目確認(rèn)在顯式網(wǎng)格之外時就會創(chuàng)建隱性網(wǎng)格艘刚，當(dāng)沒有足夠的空間或者顯式的網(wǎng)格軌道來設(shè)置網(wǎng)格項目，此時網(wǎng)格項目就會自動創(chuàng)建隱式網(wǎng)格

【grid-auto-rows】

【grid-auto-columns】

使用grid-auto-rows和grid-auto-columns屬性可以定義隱式的網(wǎng)格

默認(rèn)值為auto

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: 70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;</pre>

在上面這個例子中我們只定義了一行（軌道）箩朴，所以item1和item2的高都是70px炸庞。第二行（軌道）自動創(chuàng)建了item3和item4空間荚斯。grid-auto-rows定義隱式網(wǎng)格中的行（軌道）的大小，因此item3和item4的高度是140px

image

隱式命名

【隱式命名網(wǎng)格區(qū)域名稱】

通持窖眨可以將網(wǎng)格線命名成任何想命名的名稱胁孙，如果網(wǎng)格線名稱添加-start和-end的后綴金踪，其實也隱式的創(chuàng)建一個網(wǎng)格區(qū)域胡岔，可以用來設(shè)置網(wǎng)格項目的位置

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];</pre>

在這個示例中法希，行和列都具有inner-start和inner-end網(wǎng)格線名稱，同時也對應(yīng)的創(chuàng)建一個隱式網(wǎng)格區(qū)域名稱inner

網(wǎng)格項目定位可以通過網(wǎng)格區(qū)域名稱來設(shè)置靶瘸，而不需要使用網(wǎng)格線名稱

image

【隱式命名網(wǎng)格線名稱】

隱式的指定網(wǎng)格線反向指定了隱式的網(wǎng)格區(qū)域名稱苫亦，命名的網(wǎng)格區(qū)域隱式的命名了網(wǎng)格線名稱

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 80px 1fr 40px;
grid-template-columns: 1fr 200px;</pre>

指定網(wǎng)格區(qū)域會給網(wǎng)格區(qū)域邊線添加隱式的網(wǎng)格線名稱。這些網(wǎng)格線的命名是基于網(wǎng)格區(qū)域來命名怨咪，只是在網(wǎng)格區(qū)域名稱的后面添加后綴-start或-end

image

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">grid-row-start: header-start;
grid-row-end: content-start;
grid-column-start: footer-start;
grid-column-end: sidebar-end;</pre>

在這個示例中屋剑，header通過隱式的網(wǎng)格線名稱設(shè)置其位置

image

網(wǎng)格項目層級

網(wǎng)格項目可以具有層級和堆棧，必要時可能通過z-index屬性來指定

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; white-space: pre-wrap; word-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">.item-1,.item-2 { grid-row-start: 1; grid-column-end: span 2;
} .item-1 { grid-column-start: 1; z-index: 1;
} .item-2 { grid-column-start: 2 }</pre>

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

在這個例子中诗眨，item1和item2的開始行都是1唉匾，item1列的開始是1，item2列的開始是2匠楚，并且它們都跨越兩列巍膘。兩個網(wǎng)格項目都是由網(wǎng)格線數(shù)字定位，結(jié)果這兩個網(wǎng)格項目重疊了芋簿。

默認(rèn)情況下峡懈，item2在item1上面肪康，但是，我們在item1中設(shè)置了z-index:1;雾狈，導(dǎo)致item1在item2之上

對齊

【網(wǎng)格項目對齊方式（Box Alignment）】

CSS的Box Alignment Module補充了網(wǎng)格項目沿著網(wǎng)格行或列軸對齊方式茉帅。

【justify-items】

【justify-self】

justify-items和justify-self指定網(wǎng)格項目沿著行軸對齊方式堪澎；align-items和align-self指定網(wǎng)格項目沿著列軸對齊方式。

justify-items和align-items應(yīng)用在網(wǎng)格容器上

【align-items】

【align-self】

align-self和justify-self屬性用于網(wǎng)格項目自身對齊方式

這四個屬性主要接受以下屬性值：

【網(wǎng)格軌道對齊方式】

網(wǎng)格軌道對齊可以相對于網(wǎng)格容器行和列軸。

align-content指定網(wǎng)格軌道沿著行軸對齊方式便脊；justify-content指定網(wǎng)格軌道沿著列軸對齊方式。它們支持下面屬性：

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

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市肋演，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌边灭，老刑警劉巖称簿，帶你破解...
沈念sama閱讀 219,427評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異士嚎，居然都是意外死亡爵嗅，警方通過查閱死者的電腦和手機睹晒，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,551評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門奋单，熙熙樓的掌柜王于貴愁眉苦臉地迎上來键痛，“玉大人絮短，你說我怎么就攤上這事∠铮” “怎么了？”我有些...
開封第一講書人閱讀 165,747評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵稠腊，是天一觀的道長吞彤。經(jīng)常有香客問我挠羔，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,939評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上吱七，老公的妹妹穿的比我還像新娘。我一直安慰自己三痰，他們只是感情好幕帆，可當(dāng)我...
茶點故事閱讀 67,955評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著蕾额，像睡著了一般退个。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,737評論 1贊 305
城市分裂傳說
那天泼返，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播痕寓，決...
沈念sama閱讀 40,448評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,352評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤越除，失蹤者是張志新（化名）和其女友劉穎饱苟，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糕伐，經(jīng)...
沈念sama閱讀 45,834評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡挚冤，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,992評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年舍哄，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,133評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡舟山，死狀恐怖若债，靈堂內(nèi)的尸體忽然破棺而出傲须，到底是詐尸還是另有隱情菇绵，我是刑警寧澤，帶...
沈念sama閱讀 35,815評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布欠动，位于F島的核電站圈驼，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏楼誓。R本人自食惡果不足惜疟羹，卻給世界環(huán)境...
茶點故事閱讀 41,477評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望黄刚。院中可真熱鬧，春花似錦舒萎、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,022評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽灰瞻。三九已至，卻和暖如春酝润，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背要销。一陣腳步聲響...
開封第一講書人閱讀 33,147評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工夏块，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人脐供。一個月前我還...
沈念sama閱讀 48,398評論 3贊 373
代替公主和親
正文我出身青樓浑塞，卻偏偏與公主長得像，于是被迫代替她去往敵國和親政己。傳聞我的和親對象是個殘疾皇子酌壕，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,077評論 2贊 355

Grid柵格布局

前面的話

引入

網(wǎng)格容器

display

顯式網(wǎng)格

間距

網(wǎng)格項目

網(wǎng)格線

網(wǎng)格線命名

網(wǎng)格區(qū)域命名

隱式網(wǎng)格

隱式命名

網(wǎng)格項目層級

對齊

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