?

CSS Grid網(wǎng)格布局全攻略

所有奇技淫巧都只在方寸之間。

幾乎從我們踏入前端開發(fā)這個(gè)領(lǐng)域開始，就不停地接觸不同的布局技術(shù)。從常見的浮動(dòng)到表格布局，再到如今大行其道的flex布局，css布局技術(shù)一直在不斷地推陳出新。其中網(wǎng)格布局(grid)作為css3的產(chǎn)物，它更加貼近網(wǎng)頁(yè)設(shè)計(jì)師所使用的布局策略，學(xué)習(xí)并利用好它可以讓我們免受很多布局困擾。

雖然網(wǎng)格布局好處有很多，但學(xué)習(xí)起來(lái)并不簡(jiǎn)單，原因是用來(lái)設(shè)置布局的屬性實(shí)在太多，其中光是作用于父容器的屬性就有17種，再加上子元素屬性有10種，另外還有這些屬性值的不同取值方式。這些對(duì)于記憶來(lái)說(shuō)絕對(duì)是個(gè)不小的負(fù)擔(dān)。那么這么多屬性以及用法，要如何在短時(shí)間內(nèi)消化掉呢？在接下來(lái)這篇文章里，我將針對(duì)這27種屬性以及它們各自的用法，分享我獨(dú)家的學(xué)習(xí)策略，希望對(duì)大家的學(xué)習(xí)有所幫助。

布局之道

CSS作為一種網(wǎng)頁(yè)排版設(shè)計(jì)語(yǔ)言，其核心的設(shè)計(jì)思想必然要遵守相關(guān)的領(lǐng)域知識(shí)。網(wǎng)格布局是一種二維布局結(jié)構(gòu)，它是由縱橫相交的兩組網(wǎng)格線形成的框架性布局結(jié)構(gòu)。網(wǎng)頁(yè)設(shè)計(jì)者可以利用這些由行(row)和列(column)形成的框架性結(jié)構(gòu)來(lái)布局設(shè)計(jì)元素。 在定義一種網(wǎng)格布局結(jié)構(gòu)的時(shí)候，我們需要在父容器上描述要布局的主體框架結(jié)構(gòu)。為了描述這一框架結(jié)構(gòu)，我們就需要給它的基本構(gòu)成元素命名。一個(gè)網(wǎng)格布局的構(gòu)成元素可以概括為以下幾種概念:

• row line: 行線
• column line: 列線
• track: 網(wǎng)格軌道，即行線和行線，或列線和列線之間所形成的區(qū)域，用來(lái)擺放子元素
• gap: 網(wǎng)格間距，行線和行線，或列線和列線之間所形成的不可利用的區(qū)域，用來(lái)分隔元素
• cell: 網(wǎng)格單元格，由行線和列線所分隔出來(lái)的區(qū)域，用來(lái)擺放子元素
• area: 網(wǎng)格區(qū)域，由單個(gè)或多個(gè)網(wǎng)格單元格組成，用來(lái)擺放子元素

牢記上述這些概念是之后熟練掌握和應(yīng)用網(wǎng)格布局的基礎(chǔ)。

構(gòu)建之法

要熟練掌握一門技術(shù)，核心是找到最基本的套路，然后不斷練習(xí)從而可以在之后的實(shí)踐過(guò)程中減少?zèng)Q策的時(shí)間。所以，這一部分主要就是介紹網(wǎng)格布局構(gòu)建過(guò)程中的一些常用套路。 這里我們要解決的問(wèn)題是，如何利用最基本的規(guī)則來(lái)構(gòu)建出理想的布局模型。在布局過(guò)程中，歸根結(jié)底需要處理的就兩種頁(yè)面元素：父容器和子元素。前者主要用來(lái)設(shè)置基礎(chǔ)的布局框架，相當(dāng)于建筑中的設(shè)計(jì)藍(lán)圖，而后者就是用來(lái)進(jìn)行個(gè)性化的布局調(diào)整。因此我個(gè)人歸納了在使用網(wǎng)格布局過(guò)程中的套路是：針對(duì)父容器元素進(jìn)行設(shè)置需要三個(gè)步驟：定框架、設(shè)間隔和找對(duì)齊，對(duì)子元素來(lái)說(shuō)有兩個(gè)步驟：擺位置和找對(duì)齊。我把它們統(tǒng)稱為**"32構(gòu)建之法"**。

在這一小節(jié)中，我將把重心主要放在網(wǎng)格布局中所有用到的27個(gè)屬性名的講解上，而取值邏輯將在最后一部分進(jìn)行統(tǒng)一介紹。

父容器

定框架

設(shè)置父容器的網(wǎng)格布局的第一步就是將父容器的盒模型設(shè)置為grid，這樣就能觸發(fā)渲染引擎的網(wǎng)格布局算法。

.parent {display: grid; }

接著我們要開始準(zhǔn)備**"畫線"**，即設(shè)置所需行和列的基礎(chǔ)線。這些線條將構(gòu)成我們接下來(lái)進(jìn)行布局排布的基礎(chǔ)模板（template）。在畫線過(guò)程中，我們需要分別根據(jù)行(row)和列(column)兩個(gè)維度進(jìn)行設(shè)置。你需要畫幾條線，就設(shè)置幾個(gè)值（不包括邊框），其取值是軌道(track)的大小。這里我先畫出一個(gè)3x3的網(wǎng)格框架，代碼如下:

.parent {display: grid;grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; }

在這里你也可以選擇使用縮寫形式同時(shí)為行和列設(shè)置值，采用/分隔開:

.parent {display: grid;grid-template: 100px 100px 100px / 100px 100px 100px; }

?

?

畫完線后，下一步我們可以選擇為這些線條和線條之間形成的網(wǎng)格區(qū)域(area)進(jìn)行命名，這樣在后續(xù)使用的時(shí)候就能直接使用這些名字，便于子元素的定位。

.parent {display: grid;grid-template-areas: "a a b""c d e" "c d ." }

上面這兩步畫線和命名同樣可以采用縮寫形式進(jìn)行設(shè)置，代碼如下：

.parent {display: grid;grid-template: "a a b" 101px "c d e" 102px "c d ." 103px / 104px 105px 105px }

因?yàn)槭褂胓rid-template同時(shí)設(shè)置行列和區(qū)域名的寫法比較復(fù)雜，為了講解方便，我把值設(shè)置成規(guī)律的遞增數(shù)字。其中(101, 102，103)設(shè)置的是grid-template-rows的值，而(104,105,106)設(shè)置的則是grid-template-columns的值。

?

?

到這一步，我們可以說(shuō)已經(jīng)完成所需工作的一大半了。

設(shè)間隔

間距(gap)的設(shè)置在實(shí)際開發(fā)中是可選的，主要根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的需求而定。如果你需要給網(wǎng)格線之間設(shè)置間距，我們可以在行列兩個(gè)維度上分別進(jìn)行設(shè)置, 下面這段代碼將給每個(gè)行和列分別設(shè)置10px的間隔:

.parent {display: grid;grid-template: 100px 100px 100px / 100px 100px 100px; grid-row-gap: 10px; grid-column-gap: 10px; }

如果采用縮寫形式，上述代碼又可以簡(jiǎn)化成:

.parent {display: grid;grid-template: 100px 100px 100px / 100px 100px 100px; grid-gap: 10px 10px; }

設(shè)置后的效果如下：

?

?

找對(duì)齊

有了前面兩個(gè)步驟，我們的網(wǎng)格布局框架基本上算是搭建得差不多了。每個(gè)子元素都會(huì)默認(rèn)占據(jù)一個(gè)網(wǎng)格區(qū)域。而在父容器這里我們?nèi)绻行枰?#xff0c;就要進(jìn)行最后一個(gè)步驟：找對(duì)齊。所謂對(duì)齊方式，可以分為內(nèi)部和外部?jī)煞N（前者是針對(duì)每個(gè)網(wǎng)格區(qū)域的子元素而言，而后者是相對(duì)于網(wǎng)格區(qū)域本身）。另外在行和列（更專業(yè)的術(shù)語(yǔ)是main axis和cross axis)上又各自有兩個(gè)維度，這就構(gòu)成了4種設(shè)置對(duì)齊的方式。

先來(lái)處理一下每個(gè)子元素相對(duì)網(wǎng)格區(qū)域內(nèi)部的對(duì)齊方式:

.parent {display: grid;grid-template: 100px 100px 100px / 100px 100px 100px; grid-gap: 10px 10px; justify-items: center; align-items: center; }

在上面的代碼中我分別在行和列方向上都設(shè)置了居中對(duì)齊，這樣每個(gè)網(wǎng)格區(qū)域中的子元素相對(duì)于各自的區(qū)域行為是一致的，都能均勻排布。可以看到效果如下圖所示：

?

?

再來(lái)看一下另一種情況:

.parent {display: grid;width: 500px;height: 500px; grid-template: 100px 100px 100px / 100px 100px 100px; grid-gap: 10px 10px; justify-content: space-between; align-content: center; }

有時(shí)候我們?cè)O(shè)置的網(wǎng)格不足以覆蓋整個(gè)父容器的大小時(shí)，比如在上述的例子中整個(gè)父容器有500px*500px的大小，而我們只設(shè)置了300px*300px的網(wǎng)格區(qū)域，這時(shí)候就需要指定多出來(lái)空間的處理規(guī)則。justify-content和align-content就是分別在行和列兩個(gè)方向上用來(lái)解決這個(gè)問(wèn)題的屬性。它們將針對(duì)每個(gè)網(wǎng)格區(qū)域去設(shè)置其在父容器中的對(duì)齊方式。

?

?

justify和align這兩個(gè)單詞在方向上比較容易搞混，所以我在記憶上采取的方式是記住justifyrow和aligncolumn這兩個(gè)合并詞，它們長(zhǎng)度差不多。如果你有更好的記憶方式，請(qǐng)留言告訴我。

子元素

我們通過(guò)在父容器上搭建好了基礎(chǔ)的框架后，對(duì)于大部分子元素來(lái)說(shuō)，就已經(jīng)能夠很好地滿足布局要求了。針對(duì)部分子元素，可以根據(jù)需求進(jìn)行微調(diào)。如果要在子元素上進(jìn)行布局微調(diào)，通常需要以下兩個(gè)步驟：擺位置和找對(duì)齊。

擺位置

像下棋一樣，針對(duì)子元素的排布，我們需要給它們指定要擺放的具體位置。要確定具體位置，可以利用之前在父容器中所指定的線名和區(qū)域名來(lái)定位。一種方式是直接通過(guò)設(shè)置起始行，結(jié)束行和起始列，結(jié)束列來(lái)給子元素劃定它所要擺放的區(qū)域，另外一種方式是指定要擺放的區(qū)域名。

/* 指定起始行，結(jié)束行，起始列，結(jié)束列 */ .child:first-child {grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; background: red; } /* 使用縮寫形式 */ .child:nth-child(2) { grid-row: 2/3; grid-column: 2/4; background: yellow; } /* 直接指定區(qū)域名 */ .child:nth-child(3) { grid-area: i; background: green; }

這段代碼的效果如下：

?

還有一種更加靈活的設(shè)置位置方式，是指定跨越的行數(shù)和列數(shù)，關(guān)鍵字span用來(lái)控制一次跨越的行數(shù)或列數(shù), 如上面第三個(gè)子元素可以改寫成:

.child-nth-child(3) {grid-row: 2/3;grid-column: span 2; }

找對(duì)齊

和父容器中所設(shè)置的對(duì)齊方式類似，針對(duì)個(gè)別子元素的對(duì)齊處理，我們可以按照行列兩組屬性進(jìn)行分別處理：

/* 列對(duì)齊 */ .child:nth-child(1) {align-self: end; }/* 行對(duì)齊 */ .child:nth-child(2) { justify-self: end; } /* 采用縮寫形式 */ .child:nth-child(3) { place-self: center center; }

?

?

*隱式網(wǎng)格

靈活性是網(wǎng)格布局的一大優(yōu)勢(shì)，除了采用上述那種手動(dòng)指定框架結(jié)構(gòu)的方式，網(wǎng)格布局還有一套自動(dòng)化布局的機(jī)制，這套機(jī)制稱為**“隱式網(wǎng)格布局”**。當(dāng)我們?cè)诰W(wǎng)格定義的區(qū)域外放置子元素時(shí)，或因子元素?cái)?shù)量過(guò)多而需要更多的網(wǎng)格線時(shí)，布局算法就會(huì)自動(dòng)生成隱式網(wǎng)格。默認(rèn)情況下這些隱式網(wǎng)格的大小也會(huì)隨著內(nèi)容尺寸不同而變化，而我們可以利用屬性grid-auto-rows和grid-auto-columns來(lái)控制隱式網(wǎng)格的大小。 考慮下面這個(gè)例子：

<div class="parent"><div class="child" style="background: red"></div> <div class="child" style="background: yellow"></div> <div class="child" style="background: green"></div> </div>
.parent {display: grid;grid-auto-rows: 100px;grid-auto-columns: 100px; }

通過(guò)手動(dòng)在父容器中設(shè)置隱式網(wǎng)格大小為100x100的大小后，效果如下：

?

如果子元素引用了不存在的行號(hào)和列號(hào)，父容器會(huì)自動(dòng)生成隱式網(wǎng)格以容納所有子元素:

?

.child:first-child {grid-row-start: 1;grid-row-end: 2;grid-column-start: 1;grid-column-end: 3;background: red; }

?

?

有了網(wǎng)格大小的控制，我們還需要位置的控制。默認(rèn)情況下，子元素都是先將行填充滿，容器大小不夠的時(shí)候才會(huì)生成新的隱式行。如果要改變這一默認(rèn)行為，我們需要使用grid-auto-flow屬性來(lái)控制:

.parent {display: grid;grid-auto-rows: 100px;grid-auto-columns: 100px; grid-template-areas: "a b c" "d e f" "g h i"; grid-auto-flow: column; } ?

?

取值之術(shù)

介紹完所有的網(wǎng)格布局屬性后，我們?cè)賮?lái)說(shuō)一下各種屬性的取值策略。

大小

在CSS中，我們通常使用px,em等取值單位進(jìn)行屬性大小的設(shè)置，對(duì)于靈活的布局需求來(lái)說(shuō)，百分比也是常用的取值單位。這些單位在平常工作中似乎已經(jīng)足夠用了。不過(guò)，為了讓布局能夠更加靈活，網(wǎng)格布局中引入了一種新單位fr，它是fraction這個(gè)單詞的縮寫，意思是容器內(nèi)剩余空間的分?jǐn)?shù)比。考慮下面這個(gè)例子：

.parent {height: 100px;display: grid;grid-template-columns: 100px 1fr 100px; }

我們通過(guò)設(shè)置100px 1fr 100px的布局框架，從而很輕松地就實(shí)現(xiàn)了兩邊寬度固定，中間自適應(yīng)的效果。

?

如果要實(shí)現(xiàn)有比例關(guān)系的布局結(jié)構(gòu)，還可以使用多個(gè)fr的取值:

.parent {width: 400px;height: 100px; display: grid; grid-template-rows: 100px 1fr 100px; grid-template-columns: 1fr 1fr 2fr; grid-template-areas: "a b c" }

可以看到區(qū)域a,b,c之間的比例關(guān)系就是"1:1:2"的關(guān)系。

?

除了上述這個(gè)支持自適應(yīng)的單位外，網(wǎng)格布局中還能夠使用max-content和min-content這組關(guān)鍵字來(lái)達(dá)到自適應(yīng)的目的。要理解這兩個(gè)關(guān)鍵字，首先需要理解內(nèi)在尺寸(intrinsic size)和外部尺寸(extrinsic size)這兩個(gè)概念。先說(shuō)一下extrinsic size，它的相對(duì)值計(jì)算是相對(duì)于父容器對(duì)應(yīng)的屬性值。我們知道，width如果使用百分比單位，其計(jì)算值是相對(duì)于該元素所在的容器寬度的，比如父容器寬度100px, 子元素設(shè)置width: 20%，那么它的寬度就是100px * 20% = 20px。在css3中引入了intrinsic size則是相對(duì)于元素自身尺寸進(jìn)行計(jì)算。max-content和min-content就是相對(duì)于元素自身內(nèi)容塊進(jìn)行計(jì)算的屬性值。

min-content顧名思義是根據(jù)元素內(nèi)容來(lái)設(shè)置的最小寬度大小，在英文句子中，通常是最長(zhǎng)單詞的那個(gè)長(zhǎng)度，而中文中則是一個(gè)字的長(zhǎng)度。比如下面這個(gè)例子：

.parent {display: grid;grid-template-columns: auto min-content auto; }

?

?

可以看到，中間那個(gè)網(wǎng)格的那個(gè)寬度就等于scq000這個(gè)單詞的長(zhǎng)度。

與min-content相對(duì)應(yīng)，max-content會(huì)將尺寸設(shè)置成內(nèi)容尺寸能達(dá)到的最大寬度。我們把代碼改成下面這樣:

.parent {display: grid;grid-template-columns: auto max-content auto; }

?

?

有了這兩個(gè)屬性值，我們可以很容易地讓布局區(qū)域根據(jù)內(nèi)容進(jìn)行自適應(yīng)。

函數(shù)

函數(shù)是用來(lái)避免重復(fù)性工作的一種有效工具，在網(wǎng)格布局中提供了一些常用CSS函數(shù)來(lái)方便我們的工作。

第一個(gè)要介紹的是minmax這個(gè)函數(shù)。在設(shè)置網(wǎng)格框架的過(guò)程中，對(duì)于自適應(yīng)的網(wǎng)格區(qū)域，我們都會(huì)設(shè)置一個(gè)最小值和最大值，這個(gè)函數(shù)就是用來(lái)實(shí)現(xiàn)這個(gè)目的的。

.parent {display: grid;grid-template-columns: 100px minmax(100px, 200px) 100px; } /* 最常用的情況是只設(shè)置最小，不設(shè)置最大值 */ .parent { display: grid; grid-template-columns: 100px minmax(100px, auto) 100px; }

利用這個(gè)函數(shù)設(shè)置的網(wǎng)格布局可以做到很好的自適應(yīng)，在頁(yè)面伸縮過(guò)程中也能保證布局的穩(wěn)定性。

另一個(gè)很有用的函數(shù)是fit-content，它實(shí)際上是min(maximum size, max(minimum size, argument))的簡(jiǎn)寫，表示將元素寬度收縮到內(nèi)容寬度。說(shuō)得通俗點(diǎn)就是，使用這個(gè)函數(shù)后會(huì)盡量不占用多余的空間。如果內(nèi)容的寬度小于fit-content中設(shè)置的長(zhǎng)度，那么實(shí)際子元素寬度是內(nèi)容寬度。如果內(nèi)容寬度超出了fit-content中設(shè)置的長(zhǎng)度，那么實(shí)際子元素寬度就是設(shè)置的那個(gè)長(zhǎng)度。下面看兩個(gè)例子:

.parent {display: grid;grid-template-rows: auto fit-content(200px) auto; }

?

?

?

?

第一個(gè)句子中的長(zhǎng)度超出了200px，那么此時(shí)中間網(wǎng)格的寬度是200px。而第二個(gè)例子中內(nèi)容寬度不足200px，此時(shí)中間網(wǎng)格的寬度是句子實(shí)際占用的寬度。

最后要介紹的是repeat函數(shù)，它主要用來(lái)批量設(shè)置框架的間距，這個(gè)函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)控制循環(huán)次數(shù)，第二個(gè)參數(shù)控制間距大小。讓我們用這個(gè)函數(shù)改寫一下上述例子:

.parent {display: grid;grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; } /* 利用repeat函數(shù)改寫 */ .parent { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); }

另外，第一個(gè)參數(shù)除了可以使用數(shù)字顯示設(shè)置網(wǎng)格數(shù)量外，還能使用auto-fit和auto-fill兩個(gè)關(guān)鍵字自動(dòng)分配空間。通常情況下，這兩個(gè)關(guān)鍵字的使用效果都差不多，唯一的差別是空余空間的分配規(guī)則。搭配minmax函數(shù)可以看出區(qū)別，如下面這兩個(gè)例子：

.parent {display: grid;width: 500px;height: 100px; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .parent { display: grid; width: 500px; height: 100px; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } ?

?

?

?

在單行布局的時(shí)候，如果有空余空間auto-fit會(huì)將它們平均分配到所有子元素中，而auto-fill會(huì)自動(dòng)創(chuàng)建空白的列。

命名

我們?cè)趧?chuàng)建網(wǎng)格布局框架的時(shí)候，通過(guò)"畫線"來(lái)指定基本布局結(jié)構(gòu)。默認(rèn)情況下，網(wǎng)格布局會(huì)給每一條網(wǎng)格線進(jìn)行命名，命名順序同書寫順序一致:從左到右，由上至下按數(shù)字命名。假設(shè)我們指定的是3x3的網(wǎng)格布局結(jié)構(gòu)，那么包含邊框線，就會(huì)生成4+4=8條線。

除了采用默認(rèn)命名方式，我們還能夠自定義網(wǎng)格線的名稱以便于后續(xù)在子元素定位中使用。

?

.parent {display: grid;grid-template-rows: [row-a] 100px [row-b] 100px [row-c] 100px [row-d]; }

對(duì)齊

對(duì)齊是布局過(guò)程中一個(gè)不可缺少的步驟，它的取值是通過(guò)已有的關(guān)鍵字來(lái)指定的。其中用于網(wǎng)格布局中對(duì)齊的關(guān)鍵字有start,center,?end和stretch四個(gè)。 我們先從默認(rèn)值stretch看起，這個(gè)關(guān)鍵字是伸展的意思，所以在默認(rèn)情況下網(wǎng)格中的子元素會(huì)盡可能地填充滿網(wǎng)格區(qū)域，由于是默認(rèn)值所以平常寫代碼的時(shí)候就不太會(huì)可以去用這個(gè)關(guān)鍵字進(jìn)行聲明。 接著再來(lái)看一下常用的對(duì)齊取值策略，只需要記住一點(diǎn)就可以了：用屬性justify-*,align-*來(lái)分別控制橫軸和縱軸兩個(gè)方向，屬性值控制其對(duì)齊位置。?start，center和end三個(gè)屬性值就分別對(duì)應(yīng)了前中后三個(gè)位置。

.parent {display: grid; } .child:first-child {justify-self: start; } .child:first-child { justify-self: center; } .child:first-child { justify-self: end; }

*排列

讓我們重新回到隱式網(wǎng)格那部分,隱式的排列規(guī)則是通過(guò)指定grid-auto-flow這個(gè)屬性來(lái)設(shè)置的。它的取值只有三個(gè)row，column和dense。上面屬性部分已經(jīng)介紹過(guò)row和column兩個(gè)屬性值，前者是按行優(yōu)先來(lái)擺放子元素，后者是按列優(yōu)先來(lái)擺放子元素。這里主要介紹一下dense這個(gè)屬性值。通常情況下，排列子元素會(huì)按照順序填充行或列，如果空間不足的時(shí)候，會(huì)換行或換列。而使用了dense屬性后，會(huì)盡量使用空余空間，考慮下面這段代碼：

.parent {display: grid;grid-template-columns: repeat(3, 100px); }
<div class="parent"><div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div>

默認(rèn)情況下，顯示效果是這樣的:

?

當(dāng)我們使用dense值進(jìn)行排列的時(shí)候，就相當(dāng)于開啟“緊湊”模式，會(huì)盡可能利用空余空間。

.parent {display: grid;grid-auto-flow: row dense;/* 由于默認(rèn)為按行排列，可省略為dense */grid-auto-flow: dense; }

所以，顯示效果如下：

?

總結(jié)

在這篇文章里，我通過(guò)拆解分類所有網(wǎng)格布局相關(guān)的知識(shí)點(diǎn)，希望能夠?yàn)榇蠹姨峁┮粋€(gè)比較系統(tǒng)的運(yùn)用網(wǎng)格布局的指導(dǎo)方法。在實(shí)際應(yīng)用過(guò)程中，沿著"32構(gòu)建之法”的這個(gè)套路來(lái)走，可以節(jié)約很多思考和決策時(shí)間。另外，由于這篇文章信息密度可能比較大，希望大家能夠多多復(fù)習(xí)，并跟著例子實(shí)際操練幾遍，這樣在實(shí)際工作運(yùn)用中才能如魚得水。最后，送上一張思維導(dǎo)圖，幫助大家能夠一覽本文所有的重點(diǎn)。

?

?

推薦閱讀

grid.malven.co/

www.w3.org/TR/css-alig…

medium.com/@patrickbro…

www.zhangxinxu.com/wordpress/2…

css-tricks.com/difference-…

畫圖調(diào)試工具:?www.mozilla.org/en-US/firef…

——本文首發(fā)于個(gè)人公眾號(hào)，轉(zhuǎn)載請(qǐng)注明出處———

最后，歡迎大家關(guān)注我的公眾號(hào)，一起學(xué)習(xí)交流。

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/scq000/p/11206692.html

總結(jié)

以上是生活随笔為你收集整理的CSS Grid网格布局全攻略的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。