CSS中怎么創(chuàng)建一個(gè)網(wǎng)格容器

本篇內(nèi)容主要講解“CSS中怎么創(chuàng)建一個(gè)網(wǎng)格容器”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS中怎么創(chuàng)建一個(gè)網(wǎng)格容器”吧!

　　創(chuàng)建容器

　　與彈性布局類似的是，使用網(wǎng)格布局前，需要先創(chuàng)建網(wǎng)格容器。網(wǎng)格容器可以使用 display: grid 創(chuàng)建，使用此種方式創(chuàng)建的網(wǎng)格布局元素表現(xiàn)為塊級元素特性，會(huì)自動(dòng)生出一個(gè) 網(wǎng)格格式化上下文（grid formatting context），它的所有直接子元素將自動(dòng)變成 網(wǎng)格項(xiàng)目。

　　但你不會(huì)立即看到效果，不是因?yàn)椴季譀]有起作用。而是因?yàn)樵谀銢]有為網(wǎng)格設(shè)置列的情況下，默認(rèn)是一列布局的，其中網(wǎng)格項(xiàng)目一個(gè)疊著一個(gè)自上而下排列，表現(xiàn)的像是塊狀元素。

　　“像是塊狀元素”可能讓你有點(diǎn)懵，為了證明網(wǎng)格項(xiàng)目不管元素類型為何，都表現(xiàn)的像是塊狀元素。這里我舉個(gè)例子：

　　<div class="grid">

　　<div>Item one</div>

　　<div>Item Two</div>

　　A string of text with a <span>span element</span> in the middle.

　　</div>

　　This string of text follows the grid.

　　<style>

　　.grid { display: grid; }

　　</style>

　　.grid 放置的不都是塊狀元素 div，這里的 A string of text with a <span>span element</span> in the middle. 猛看起來就是一行。

　　我們來看看實(shí)際效果：

　　發(fā)現(xiàn) <span> 兩邊裸露的文本都各自獨(dú)立，各站一行了。使用 Firefox Grid Inspector 查看，發(fā)現(xiàn)有 5 行。

　　可見，網(wǎng)格項(xiàng)目不管元素類型（即使是裸露的文本節(jié)點(diǎn)）為何，在網(wǎng)格格式化上下文的作用下，都會(huì)表現(xiàn)為塊狀元素的特征。

　　當(dāng)然，你還可以使用 display: inline-grid 創(chuàng)建網(wǎng)格。那 grid 與 inline-grid 區(qū)別在哪呢？這類似于 inline 和 inline-block 的關(guān)系。inline-grid 網(wǎng)格外在表現(xiàn)的像是個(gè)行內(nèi)元素，可以跟其他行內(nèi)元素排在一行，內(nèi)在則表現(xiàn)的是個(gè)塊狀元素，可以設(shè)置寬高等屬性。

　　還是上面的例子，我們將 CSS 稍作修改：

　　.grid {display: inline-grid; }

　　能跟后面的文本排在一行了。

　　行和列

　　為了讓網(wǎng)格像網(wǎng)格，我們需要用 grid-template-column 和 grid-template-rows 設(shè)置行和列。這兩個(gè)屬性接收的值稱為track-list?？纯匆?guī)范里是怎么說的：

　　這兩個(gè)屬性接收的是用空格分隔的 track list，由 line names 和 track sizing functions 組成。grid-template-columns 指定的是網(wǎng)格列的 track list，grid-template-rows 則是指定網(wǎng)格行的 track list。

　　下面展示了一些有效的 track-list 取值：

　　大家可以看到，有很多種創(chuàng)建 track list 的方式。接下來，我們來看看這些值是如何起作用的。而且，還提供了一些小技巧，講講為什么要這樣用。

　　使用長度單位

　　你可以使用長度或百分比單位創(chuàng)建軌道。如果所有的軌道尺寸加起來小于當(dāng)前的容器的可用尺寸的，那么網(wǎng)格項(xiàng)目默認(rèn)會(huì)在容器左邊（在像英文這樣的語言排版規(guī)則下）排列，多余的空間則留在右面。這是因?yàn)?align-content 和 justify-content 屬性默認(rèn)值為 start。

　　當(dāng)然，你還可以使用像 min-content、max-content 關(guān)鍵字和 fit-content() 函數(shù)。

　　min-content 是在元素內(nèi)容不發(fā)生溢出情況下的最小尺寸，用在列上之后，就等于列內(nèi)最長的那個(gè)單詞或最大的固定尺寸（fixed-size）元素的尺寸。

　　max-content 則是元素內(nèi)容在完全不折行的情況下的最大尺寸，用在列上之后，就等于列中文本在完全不折行情況下的展開尺寸。使用時(shí)要注意可能會(huì)發(fā)生的溢出問題。

　　fit-content() 要待傳入一個(gè)值后才能使用。這個(gè)值表示軌道能增長到的最大尺寸，軌道在不折行、自由延伸到這個(gè)臨界值的時(shí)候，就停止繼續(xù)增長了。所以，結(jié)果表現(xiàn)是，軌道長度總是小于傳入的值的（前提是：這個(gè)傳入值是介于 min-content 和 max-content 之間的）。

　　舉個(gè)例子：

　　<div class="grid">

　　<div>Item One</div>

　　<div>Item Two Item Two</div>

　　<div>Item Three Item Three Item Three</div>

　　<div>Item Four</div>

　　</div>

　　<style>

　　.grid {

　　display: grid;

　　grid-template-columns: min-content max-content fit-content(10em);

　　}

　　</style>

　　第三列在達(dá)到 10em 的尺寸后，便不再增長。

　　如果所有軌道占用的空間比容器本身的空間還大，就會(huì)發(fā)生溢出。特別在使用百分比單位設(shè)置軌道尺寸時(shí)，一定要注意百分比總值加起來不要超過 100%，否則會(huì)溢出的。

　　fr 單位

　　在 Grid 中可以使用另一種方式，幫助你避免使用百分比值時(shí)，去手動(dòng)計(jì)算&mdash;&mdash;fr 單位。它不是長度單位，因此不能在 calc() 中使用，它是用來表示當(dāng)前網(wǎng)格容器中可用空間的。

　　以 1fr 1fr 1fr 這個(gè) track list 舉例：可用空間被均分成三等份，每個(gè)軌道獲得其中的 1/3。而對 2fr 1fr 1fr 來說，第二列和第三列都得到了 1/4 的可用空間，第一列則得到 1/2 的可用空間。

　　<div class="grid">

　　<div>Item One</div>

　　<div>Item Two Item Two</div>

　　<div>Item Three Item Three Item Three</div>

　　<div>Item Four</div>

　　</div>

　　<style>

　　.grid {

　　display: grid;

　　grid-template-columns: 2fr 1fr 1fr;

　　}

　　</style>

　　這里需要注意的是，分配給 fr 單位的是 可用空間(avaible space)，而非整個(gè)容器空間。如果網(wǎng)格軌道中包含固定尺寸（fixed-size）的元素或不折行長單詞的話，會(huì)優(yōu)先將這些元素布局好，然后剩下的空間（即可用空間）才是留給 fr 分配的。

　　再舉一個(gè)例子&mdash;&mdash;我把第三個(gè)網(wǎng)格項(xiàng)目里的單詞 ItemThree 間的空格去掉了，這將導(dǎo)致出現(xiàn)一個(gè)非常長的單詞。這個(gè)時(shí)候布局的話，就不得不要先考慮它了。

　　第三個(gè)項(xiàng)目的 1fr 已經(jīng)不再起作用了，寬度完全由內(nèi)容撐開。之后第一、第二個(gè)項(xiàng)目分配剩下來的可用空間，第一個(gè)項(xiàng)目占 2/3，第二個(gè)項(xiàng)目占 1/3。

　　還可以將 fr 混合其他長度單位一起使用，某些場景里還是很有用的。比如，我們有一個(gè)三列組件，兩邊兩列的尺寸是固定的，中間一列則是自動(dòng)充滿余下的空間。

　　<div class="grid">

　　<div>Fixed</div>

　　<div>Flexible</div>

　　<div>Fixed</div>

　　</div>

　　<style>

　　.grid {

　　display: grid;

　　grid-template-columns: 100px 1fr 100px;

　　}

　　</style>

　　或者你還可以設(shè)置一個(gè)軌道的尺寸為 fit-content(300px)，其他的呢是 1fr。這會(huì)讓第一個(gè)軌道的不大于 300px（只占據(jù)需要的空間），而使用了 fr 的軌道則會(huì)自動(dòng)擴(kuò)充余下的空間。

　　比如，我們在第一個(gè)軌道了放了一張 max-width: 100% 圖片，那么這張圖片最寬只能到 300px。使用這種方式可以創(chuàng)建一個(gè)非常靈活的組件布局。

　　.grid {

　　grid-template-columns: fit-content(300px) 1fr;

　　}

　　repeat() 函數(shù)

　　repeat() 函數(shù)可以幫你避免重復(fù)寫一樣的值。比如，下面兩行代碼的作用是一樣的：

　　grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

　　grid-template-columns: repeat(12, 1fr);

　　repeat() 的第一個(gè)參數(shù)表示重復(fù)的次數(shù)，第二個(gè)參數(shù)是 track list。track list 可以使用多個(gè)值。

　　還可以把 repeat() 函數(shù)作為 track list 的一部分使用。例如，下面的代碼會(huì)創(chuàng)建一個(gè) 1fr 的軌道，三個(gè) 200px 的軌道以及一個(gè) 1fr 軌道。

　　grid-template-columns: 1fr repeat(3,200px) 1fr

　　除了可以使用固定的表示重復(fù)次數(shù)的數(shù)值，你還可以在 repeat() 中使用 auto-fill 和 auto-fit 這兩個(gè)關(guān)鍵字。使用其中之一替代元素寫的固定數(shù)值，網(wǎng)格容器一行里將會(huì)盡可能多（至少保每個(gè)網(wǎng)格項(xiàng)目 200px 寬）的布局網(wǎng)格項(xiàng)目。

　　代碼：

　　<div class="grid">

　　<div>Item One</div>

　　<div>Item Two</div>

　　<div>Item Three</div>

　　<div>Item Four</div>

　　</div>

　　<style>

　　.grid {

　　display: grid;

　　grid-template-columns: repeat(auto-fill, 200px);

　　width: 500px;

　　}

　　</style>

　　這里的網(wǎng)格容器使用了固定長度（500px），兩個(gè)軌道都是 200px，不能將容器完全劃分，因此右面余下了一些剩余空間。

　　當(dāng)然，我們可以用 minmax() 這個(gè)函數(shù)，函數(shù)的第一個(gè)參數(shù)表示能接受的最小值，第二個(gè)參數(shù)則表示最大值。我們將最小尺寸設(shè)置成 200px，最大尺寸則設(shè)置成 1fr，這樣如果有剩余空間，也會(huì)給填滿。

　　代碼：

　　.grid {

　　display: grid;

　　grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

　　width: 500px;

　　}

　　效果（demo）：

　　前面我提到了兩個(gè)關(guān)鍵字：auto-fill 和 auto-fit。如果你的內(nèi)容超過了一行顯示的，那么使用這兩個(gè)關(guān)鍵字將看不見區(qū)別。區(qū)別是在只有一行內(nèi)容的時(shí)候。

　　使用 auto-fill 的時(shí)候，即使網(wǎng)格容器中已經(jīng)沒有可排版的內(nèi)容了，但依舊會(huì)生成新的軌道。

　　<div class="grid">

　　<div>Item One</div>

　　</div>

　　<style>

　　.grid {

　　display: grid;

　　grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

　　width: 500px;

　　}

　　</style>

　　而改用 auto-fit 的話，那個(gè)空的軌道會(huì)被壓縮（collapsed）：

　　.grid {

　　display: grid;

　　grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

　　width: 500px;

　　}

　　效果：

　　使用 Firefox Grid Inspector 查看，可以看見（箭頭所指的方向）最后一根列線的編號還是 3，不過空間收縮為 0 、和第二列線重合了。有三根列線，說明我們是可以放兩個(gè)軌道的，只不過因?yàn)榈诙€(gè)沒有，就沒有給空間、被第一個(gè)擠去用了。

　　命名網(wǎng)格線

　　最后的例子我們來看看命名網(wǎng)格線的使用。使用網(wǎng)格布局的時(shí)候，默認(rèn)每個(gè)網(wǎng)格線都有個(gè)編號的，我們還可以為網(wǎng)格線命名。網(wǎng)格的名稱是定義在一對方括號里的，每一條網(wǎng)格線可以取多個(gè)名字，名字之間使用空格分隔。下面舉一個(gè)例子：下面的這個(gè) track list，每條網(wǎng)格線起了兩個(gè)名字。

　　grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

　　你可以為網(wǎng)格線取任何名字，除了 span，因?yàn)?span 是保留字，可以在排布網(wǎng)格項(xiàng)目時(shí)使用。

　　顯示和隱式網(wǎng)格

　　使用 grid-template-columns 和 grid-template-rows 屬性設(shè)置那塊網(wǎng)格區(qū)域，稱為 顯式網(wǎng)格（explicit grid）。因?yàn)檫@塊網(wǎng)格區(qū)域里的軌道尺寸被顯式設(shè)置了的。

　　如果網(wǎng)格內(nèi)容很多，超出了刪除兩個(gè)屬性所設(shè)置的區(qū)域之外，那么這塊區(qū)域稱為 隱式網(wǎng)格（implicit grid）。在這塊區(qū)域里排布的網(wǎng)格項(xiàng)目默認(rèn)按照本身的大小渲染的。如何控制這些超出范圍之外的行和列呢&mdash;&mdash;使用 grid-auto-rows 或 grid-auto-columns 屬性。比如，希望所有隱式網(wǎng)格列至少 200px 寬，如果內(nèi)容更多的話，就按照實(shí)際內(nèi)容自然顯示，那么你就可以使用下面的聲明：

　　grid-auto-rows: minmax(200px, auto)

　　如果是想讓奇數(shù)行保持自然高，偶數(shù)行保持 100px 或者其他的尺寸，則可以試試多值語法。

　　grid-auto-rows: auto 100px

到此，相信大家對“CSS中怎么創(chuàng)建一個(gè)網(wǎng)格容器”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！