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

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

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)彌渡免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

創(chuàng)建容器

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

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

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

<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. 猛看起來就是一行。

我們來看看實際效果：

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

可見，網(wǎng)格項目不管元素類型（即使是裸露的文本節(jié)點）為何，在網(wǎng)格格式化上下文的作用下，都會表現(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)的像是個行內(nèi)元素，可以跟其他行內(nèi)元素排在一行，內(nèi)在則表現(xiàn)的是個塊狀元素，可以設(shè)置寬高等屬性。

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

.grid {display: inline-grid; }

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

行和列

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

這兩個屬性接收的是用空格分隔的 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)格項目默認會在容器左邊（在像英文這樣的語言排版規(guī)則下）排列，多余的空間則留在右面。這是因為 align-content 和 justify-content 屬性默認值為 start。

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

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

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

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

舉個例子：

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

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

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

fr 單位

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

以 1fr 1fr 1fr 這個 track list 舉例：可用空間被均分成三等份，每個軌道獲得其中的 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)，而非整個容器空間。如果網(wǎng)格軌道中包含固定尺寸（fixed-size）的元素或不折行長單詞的話，會優(yōu)先將這些元素布局好，然后剩下的空間（即可用空間）才是留給 fr 分配的。

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

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

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

<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è)置一個軌道的尺寸為 fit-content(300px)，其他的呢是 1fr。這會讓第一個軌道的不大于 300px（只占據(jù)需要的空間），而使用了 fr 的軌道則會自動擴充余下的空間。

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

.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() 的第一個參數(shù)表示重復(fù)的次數(shù)，第二個參數(shù)是 track list。track list 可以使用多個值。

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

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

除了可以使用固定的表示重復(fù)次數(shù)的數(shù)值，你還可以在 repeat() 中使用 auto-fill 和 auto-fit 這兩個關(guān)鍵字。使用其中之一替代元素寫的固定數(shù)值，網(wǎng)格容器一行里將會盡可能多（至少保每個網(wǎng)格項目 200px 寬）的布局網(wǎ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），兩個軌道都是 200px，不能將容器完全劃分，因此右面余下了一些剩余空間。

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

代碼：

.grid {

display: grid;

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

width: 500px;

}

效果（demo）：

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

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

<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 的話，那個空的軌道會被壓縮（collapsed）：

.grid {

display: grid;

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

width: 500px;

}

效果：

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

命名網(wǎng)格線

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

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

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

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

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

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

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

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

grid-auto-rows: auto 100px

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

本文名稱：CSS中怎么創(chuàng)建一個網(wǎng)格容器
URL分享：http://bm7419.com/article28/gosjcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、品牌網(wǎng)站制作、移動網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作