CSS中怎么創建一個網格容器

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

　　創建容器

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

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

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

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

　　我們來看看實際效果：

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

　　可見，網格項目不管元素類型（即使是裸露的文本節點）為何，在網格格式化上下文的作用下，都會表現為塊狀元素的特征。

　　當然，你還可以使用 display: inline-grid 創建網格。那 grid 與 inline-grid 區別在哪呢？這類似于 inline 和 inline-block 的關系。inline-grid 網格外在表現的像是個行內元素，可以跟其他行內元素排在一行，內在則表現的是個塊狀元素，可以設置寬高等屬性。

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

　　.grid {display: inline-grid; }

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

　　行和列

　　為了讓網格像網格，我們需要用 grid-template-column 和 grid-template-rows 設置行和列。這兩個屬性接收的值稱為track-list。看看規范里是怎么說的：

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

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

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

　　使用長度單位

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

　　當然，你還可以使用像 min-content、max-content 關鍵字和 fit-content() 函數。

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

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

　　fit-content() 要待傳入一個值后才能使用。這個值表示軌道能增長到的最大尺寸，軌道在不折行、自由延伸到這個臨界值的時候，就停止繼續增長了。所以，結果表現是，軌道長度總是小于傳入的值的（前提是：這個傳入值是介于 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 的尺寸后，便不再增長。

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

　　fr 單位

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

　　以 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)，而非整個容器空間。如果網格軌道中包含固定尺寸（fixed-size）的元素或不折行長單詞的話，會優先將這些元素布局好，然后剩下的空間（即可用空間）才是留給 fr 分配的。

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

　　第三個項目的 1fr 已經不再起作用了，寬度完全由內容撐開。之后第一、第二個項目分配剩下來的可用空間，第一個項目占 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>

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

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

　　.grid {

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

　　}

　　repeat() 函數

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

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

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

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

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

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

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

　　代碼：

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

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

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

　　代碼：

　　.grid {

　　display: grid;

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

　　width: 500px;

　　}

　　效果（demo）：

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

　　使用 auto-fill 的時候，即使網格容器中已經沒有可排版的內容了，但依舊會生成新的軌道。

　　<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 、和第二列線重合了。有三根列線，說明我們是可以放兩個軌道的，只不過因為第二個沒有，就沒有給空間、被第一個擠去用了。

　　命名網格線

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

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

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

　　顯示和隱式網格

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

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

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

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

　　grid-auto-rows: auto 100px

到此，相信大家對“CSS中怎么創建一個網格容器”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！