web前端入門到實戰(zhàn)：CSS網格布局：創(chuàng)建一個網格容器

1、web前端入門到實戰(zhàn)：css網格布局：創(chuàng)建一個網格容器讀完本篇文章，你將學到：用法 display: grid 或 display: inline-grid 創(chuàng)建網格容器。用法 grid-template-columns 和 grid-template-rows 設置行和列。用法 grid-auto-colums 和 grid-auto-rows 屬性設置隱式軌道（implicit tracks）的尺寸。創(chuàng)建容器與彈性布局類似的是，用法網格布局前，需要先創(chuàng)建網格容器。網格容器可以用法 display: grid 創(chuàng)建，用法此種方式創(chuàng)建的網格布局元素表現(xiàn)為塊級元素特性，會自動生出一個 網格格式化

2、上下文（grid formatting context），它的全部挺直子元素將自動變成 網格項目。但你不會立刻看到效果，不是由于布局沒有起作用。而是由于在你沒有為網格設置列的狀況下，默認是一列布局的，其中網格項目一個疊著一個自上而下羅列，表現(xiàn)的像是塊狀元素。像是塊狀元素可能讓你有點懵，為了證實網格項目不管元素類型為何，都表現(xiàn)的像是塊狀元素。這里我舉個例子：item oneitem twoa string of text with a span element in the middle.this string of text follows the grid.grid display: gri

3、d; .grid 放置的不都是塊狀元素 div，這里的 a string of text with a span element in the middle. 猛看起來就是一行。我們來看看實際效果：發(fā)覺 兩邊暴露的文本都各自自立，各站一行了。用法 firefox grid inspector 查看，發(fā)覺有 5 行?？梢姡W格項目不管元素類型（即使是暴露的文本節(jié)點）為何，在網格格式化上下文的作用下，都會表現(xiàn)為塊狀元素的特征。固然，你還可以用法 display: inline-grid 創(chuàng)建網格。那 grid 與 inline-grid 區(qū)分在哪呢？這類似于 inline 和 inline-blo

4、ck 的關系。inline-grid 網分外在表現(xiàn)的像是個行內元素，可以跟其他行內元素排在一行，內在則表現(xiàn)的是個塊狀元素，可以設置寬高等屬性。還是上面的例子，我們將 css 稍作修改：.grid display: inline-grid; 來看看結果：能跟后面的文本排在一行了。行和列為了讓網格像網格，我們需要用 grid-template-column 和 grid-template-rows 設置行和列。這兩個屬性接收的值稱為track-list?？纯匆?guī)范里是怎么說的：這兩個屬性接收的是用空格分隔的 track list，由 line names 和 track sizing functio

5、ns 組成。grid-template-columns 指定的是網格列的 track list，grid-template-rows 則是指定網格行的 track list。下面展示了一些有效的 track-list 取值：大家可以看到，有無數(shù)種創(chuàng)建 track list 的方式。接下來，我們來看看這些值是如何起作用的。而且，還提供了一些小技巧，講講為什么要這樣用。用法長度單位你可以用法長度或百分比單位創(chuàng)建軌道。假如全部的軌道尺寸加起來小于當前的容器的可用尺寸的，那么網格項目默認會在容器左邊（在像英文這樣的語言排版規(guī)章下）羅列，多余的空間則留在右面。這是由于 align-content 和 j

6、ustify-content 屬性默認值為 start。固然，你還可以用法像 min-content、max-content 關鍵字和 fit-content() 函數(shù)。min-content 是在元素內容不發(fā)生溢出狀況下的最小尺寸，用在列上之后，就等于列內最長的那個單詞或最大的固定尺寸（fixed-size）元素的尺寸。max-content 則是元素內容在徹低不折行的狀況下的最大尺寸，用在列上之后，就等于列中文本在徹低不折行狀況下的綻開尺寸。用法時要注重可能會發(fā)生的溢出問題。fit-content() 要待傳入一個值后才干用法。這個值表示軌道能增長到的最大尺寸，軌道在不折行、自由延長到這個

7、臨界值的時候，就停止繼續(xù)增長了。所以，結果表現(xiàn)是，軌道長度總是小于傳入的值的（前提是：這個傳入值是介于 min-content 和 max-content 之間的）。舉個例子：item oneitem two item twoitem three item three item threeitem four.grid display: grid;grid-template-columns: min-content max-content fit-content(10em);效果如下：第三列在達到 10em 的尺寸后，便不再增長。假如全部軌道占用的空間比容器本身的空間還大，就會發(fā)生溢出。特殊在用

8、法百分比單位設置軌道尺寸時，一定要注重百分比總值加起來不要超過 100%，否則會溢出的。fr 單位在 grid 中可以用法另一種方式，協(xié)助你避開用法百分比值時，去手動計算——fr 單位。它不是長度單位，因此不能在 calc() 中用法，它是用來表示當前網格容器中可用空間的。以 1fr 1fr 1fr 這個 track list 舉例：可用空間被均分成三等份，每個軌道獲得其中的 1/3。而對 2fr 1fr 1fr 來說，其次列和第三列都得到了 1/4 的可用空間，第一列則得到 1/2 的可用空間。item oneitem two item twoitem

9、 three item three item threeitem four.grid display: grid;grid-template-columns: 2fr 1fr 1fr;效果（demo）：這里需要注重的是，分配給 fr 單位的是 可用空間(avaible space)，而非囫圇容器空間。假如網格軌道中包含固定尺寸（fixed-size）的元素或不折行長單詞的話，會優(yōu)先將這些元素布局好，然后剩下的空間（即可用空間）才是留給 fr 分配的。再舉一個例子——我把第三個網格項目里的單詞 itemthree 間的空格去掉了，這將導致浮現(xiàn)一個十分長的單

10、詞。這個時候布局的話，就不得不要先考慮它了。第三個項目的 1fr 已經不再起作用了，寬度徹低由內容撐開。之后第一、其次個項目分配剩下來的可用空間，第一個項目占 2/3，其次個項目占 1/3。還可以將 fr 混合其他長度單位一起用法，某些場景里還是很實用的。比如，我們有一個三列組件，兩邊兩列的尺寸是固定的，中間一列則是自動彌漫余下的空間。fixedflexiblefixed.grid display: grid;grid-template-columns: 100px 1fr 100px;效果：或者你還可以設置一個軌道的尺寸為 fit-content(300px)，其他的呢是 1fr。這會讓第一

11、個軌道的不大于 300px（只占領需要的空間），而用法了 fr 的軌道則會自動擴充余下的空間。比如，我們在第一個軌道了放了一張 max-width: 100% ，那么這張最寬只能到 300px。用法這種方式可以創(chuàng)建一個十分靈便的組件布局。.grid grid-template-columns: fit-content(300px) 1fr;效果：repeat() 函數(shù)repeat() 函數(shù)可以幫你避開重復寫一樣的值。比如，下面兩行代碼的作用是一樣的：grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gr

12、id-template-columns: repeat(12, 1fr);repeat() 的第一個參數(shù)表示重復的次數(shù)，其次個參數(shù)是 track list。track list 可以用法多個值。還可以把 repeat() 函數(shù)作為 track list 的一部分用法。例如，下面的代碼會創(chuàng)建一個 1fr 的軌道，三個 200px 的軌道以及一個 1fr 軌道。grid-template-columns: 1fr repeat(3,200px) 1fr除了可以用法固定的表示重復次數(shù)的數(shù)值，你還可以在 repeat() 中用法 auto-fill 和 auto-fit 這兩個關鍵字。用法其中之一替代

13、元素寫的固定數(shù)值，網格容器一行里將會盡可能多（起碼保每個網格項目 200px 寬）的布局網格項目。代碼：item oneitem twoitem threeitem four.grid display: grid;grid-template-columns: repeat(auto-fill, 200px);width: 500px;效果（demo）：這里的網格容器用法了固定長度（500px），兩個軌道都是 200px，不能將容器徹低劃分，因此右面余下了一些剩余空間。固然，我們可以用 minmax() 這個函數(shù)，函數(shù)的第一個參數(shù)表示能接受的最小值，其次個參數(shù)則表示最大值。我們將最小尺寸設置成

14、200px，最大尺寸則設置成 1fr，這樣假如有剩余空間，也會給填滿。代碼：.grid display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr);width: 500px;效果（demo）：前面我提到了兩個關鍵字：auto-fill 和 auto-fit。假如你的內容超過了一行顯示的，那么用法這兩個關鍵字將看不見區(qū)分。區(qū)分是在惟獨一行內容的時候。用法 auto-fill 的時候，即使網格容器中已經沒有可排版的內容了，但依然會生成新的軌道。item one.grid display: grid;grid-t

15、emplate-columns: repeat(auto-fill, minmax(200px, 1fr);width: 500px;效果：而改用 auto-fit 的話，那個空的軌道會被壓縮（collapsed）：.grid display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr);width: 500px;效果：用法 firefox grid inspector 查看，可以看見（箭頭所指的方向）最后一根列線的編號還是 3，不過空間收縮為 0 、和其次列線重合了。有三根列線，解釋我們是可以放兩個軌道的，只

16、不過由于其次個沒有，就沒有給空間、被第一個擠去用了。命名網格線最后的例子我們來看看命名網格線的用法。用法網格布局的時候，默認每個網格線都有個編號的，我們還可以為網格線命名。網格的名稱是定義在一對方括號里的，每一條網格線可以取多個名字，名字之間用法空格分隔。下面舉一個例子：下面的這個 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 屬性設置那塊網格區(qū)域，稱為 顯式網格（explicit grid）。由于這塊網格區(qū)域里的軌道尺寸被顯式設置了的。假如網格內容無數(shù)，超出了刪除兩個屬性所設置的區(qū)域之外，那么這塊區(qū)域稱為 隱式網格（implicit grid）。在這塊區(qū)域里排布的網格項目默認根據(jù)本