原文 https://mp.weixin.qq.com/s/aHyWCzUYwcnkwt5MWhGfFw 相信很多前端同志對彈性盒（Flex）布局很熟悉，但是對于網格（Grid）布局很陌生，甚至在項目中從來沒有用到過。今天就帶大家學習一下網格布局是如何玩的。 > 如果你懶的動手寫代碼，或者本地創建項目，博主貼心的為你準備了代碼預覽地址，你可以一邊調試一邊預覽效果。 ## 1\. 什么是網格布局 網格是由一系列水平及垂直的線構成的一種布局模式。根據網格，我們能夠將設計元素進行排列，幫助我們設計一系列具有固定位置以及寬度的元素的頁面，使我們的網站頁面更加統一。 一個網格通常具有許多的**列（column）與行（row）**，以及行與行、列與列之間的間隙，這個間隙一般被稱為**溝槽（gutter）**。 也就是下面這張圖：  我們一般會根據我們的設計圖來決定網格的布局長什么樣子。 接下來我們從一個基礎的網格系統開始學起來。 ## 2\. 自定義網格布局 布局如下： ~~~ <h1>Simple?grid?example</h1> <div?class="container"> ??<div>One</div> ??<div>Two</div> ??<div>Three</div> ??<div>Four</div> ??<div>Five</div> ??<div>Six</div> ??<div>Seven</div> </div> ~~~ ### 2.1. Gird 首先，你要設置網格布局，必須把display設置為`grid`。 ~~~ .container?{ ??display:?grid; } ~~~ ### 2.2. grid-template-columns 此時的布局并沒有任何變化，我們需要通過`grid-template-columns`設置列的寬度，給個三列，每列200px吧。 ~~~ .container?{ ??display:?grid; ??grid-template-columns:?200px?200px?200px; } ~~~ 此時，頁面效果如下：  ### 2.3. gap 使用 grid-column-gap(en-US) 屬性來定義列間隙；使用 grid-row-gap(en-US) 來定義行間隙；使用 grid-gap(en-US) 可以同時設定兩者。 修改代碼： ~~~ .container?{ ??display:?grid; ??grid-template-columns:?200px?200px?200px; ??grid-gap:?20px; ??gap:?20px; } ~~~ **備注：**gap屬性曾經有一個grid-前綴，不過后來的標準進行了修改，目的是讓他們能夠在不同的布局方法中都能起作用。盡管現在這個前綴不會影響語義，但為了代碼的健壯性，你可以把兩個屬性都寫上。 此時，頁面效果如下：  ### 2.4. fr 這里除了使用px意外，我們也可以用 fr 這個單位來靈活地定義網格的行與列的大小。這個單位代表網格容器中可用空間的一份。也就是把列等分以后，每列占據的份數是多少，fr值越法，占據的空間就越大。 修改代碼： ~~~ .container?{ ??display:?grid; ??grid-template-columns:?1fr?1fr?1fr; } ~~~ 這個意思是，把列三等分，每列占據1份空間。 此時，頁面效果如下：  ### 2.5. repeat 你可以使用repeat來重復構建具有某些寬度配置的某些列。舉個例子，如果要創建多個等寬軌道，可以用下面的方法。 ~~~ .container?{ ??display:?grid; ??grid-template-columns:?repeat(3,?1fr); ??grid-gap:?20px; } ~~~ 這個效果跟上面的代碼是一致的。第一個傳入 repeat 函數的值（3）表明了后續列寬的配置要重復多少次，而第二個值（1fr）表示需要重復的構建配置，這個配置可以具有多個長度設定。例如repeat(2, 2fr 1fr)，如果你仍然不明白，可以實際測試一下效果，這相當于填入了 2fr 1fr 2fr 1fr。 ### 2.6. grid-template-rows 通過`grid-template-rows`可以設置行的高度，我們給每行設置個100px吧。 ~~~ .container?{ ??display:?grid; ??grid-gap:?20px; ??grid-template-columns:?1fr?1fr?1fr; ??grid-template-rows:?100px?100px?100px; } ~~~ 此時，頁面效果如下：  ### 2.7. minmax() 函數 100 像素高的軌道有時可能會不夠用，因為時常會有比 100 像素高的內容加進去。所以，我們可以將其設定為至少 100 像素，并且能夠跟隨內容來自動拓展尺寸，從而保證能容納所有內容。顯而易見，你很難知道網頁上某個元素的尺寸在不同情況下會變成多少，一些額外的內容或者更大的字號就會導致許多能做到像素級精準的設計出現問題。所以有了minmax()函數。 minmax()函數為一個行/列的尺寸設置了取值范圍。比如設定為 minmax(100px, auto)，那么尺寸就至少為 100 像素，并且如果內容尺寸大于 100 像素則會根據內容自動調整。在這里試一下把 grid-auto-rows 屬性設置為minmax函數。 ~~~ .container?{ ??display:?grid; ??grid-gap:?20px; ??grid-template-columns:?1fr?1fr?1fr; ??grid-template-rows:?minmax(100px,?auto)?100px?100px; } ~~~ 此時，頁面效果如下：  可以看到，我們設置了minmax(100px, auto)以后，此時內容高度會自動撐高。 ### 2.8. auto-fill 在上面的布局中，每次都是把行和列的屬性重復寫三次才能都生效。有沒有更簡便的方法呢？有，那就是repeat中的一個參數：auto-fill。 ~~~ .container?{ ??display:?grid; ??grid-gap:?20px; ??grid-template-columns:?repeat(auto-fill,?minmax(200px,?1fr)); ??grid-auto-rows:?minmax(100px,?auto); } ~~~ 此時，頁面效果如下：  以上代碼參考地址：https://stackblitz.com/edit/web-platform-vabj4w?file=styles.css ## 3\. 基于線的元素放置 既然是一個網格，那么它就有線，我們可以根據這些線所處的位置來放置我們的元素。如下圖所示：  在英文中，第一條列分隔線（即網格邊緣線）在網格的最左邊而第一條行分隔線在網格的最上面。而對于阿拉伯語，第一條列分隔線在網格的最右邊，因為阿拉伯文是從右往左書寫的。 ### 3.1. grid-column和grid-row 我們根據這些分隔線來放置元素，通過以下屬性來指定從那條線開始到哪條線結束。 * grid-column-start * grid-column-end * grid-row-start * grid-row-end 這些屬性的值均為分隔線序號，你也可以用以下縮寫形式來同時指定開始與結束的線。 * grid-column * grid-row 注意開始與結束的線的序號要使用/符號分開。 上面的概念聽起來是不是沒聽懂？沒關系，我們接下來做個博客系統的布局，你就懂了：  頁面布局如下： ~~~ <div?class="container"> ??<header>This?is?my?lovely?blog</header> ??<aside> ????<h2>Other?things</h2> ????<p> ??????Nam?vulputate?diam?nec?tempor?bibendum.?Donec?luctus?augue?eget ??????malesuada?ultrices.?Phasellus?turpis?est,?posuere?sit?amet?dapibus?ut, ??????facilisis?sed?est. ????</p> ??</aside> ??<article> ????<h1>My?article</h1> ????<p> ??????Duis?felis?orci,?pulvinar?id?metus?ut,?rutrum?luctus?orci.?Cras ??????porttitor?imperdiet?nunc,?at?ultricies?tellus?laoreet?sit?amet.?Sed ??????auctor?cursus?massa?at?porta.?Integer?ligula?ipsum,?tristique?sit?amet ??????orci?vel,?viverra?egestas?ligula.?Curabitur?vehicula?tellus?neque,?ac ??????ornare?ex?malesuada?et.?In?vitae?convallis?lacus.?Aliquam?erat ??????volutpat.?Suspendisse?ac?imperdiet?turpis.?Aenean?finibus?sollicitudin ??????eros?pharetra?congue.?Duis?ornare?egestas?augue?ut?luctus.?Proin ??????blandit?quam?nec?lacus?varius?commodo?et?a?urna.?Ut?id?ornare?felis, ??????eget?fermentum?sapien. ????</p> ????<p> ??????Nam?vulputate?diam?nec?tempor?bibendum.?Donec?luctus?augue?eget ??????malesuada?ultrices.?Phasellus?turpis?est,?posuere?sit?amet?dapibus?ut, ??????facilisis?sed?est.?Nam?id?risus?quis?ante?semper?consectetur?eget ??????aliquam?lorem.?Vivamus?tristique?elit?dolor,?sed?pretium?metus ??????suscipit?vel.?Mauris?ultricies?lectus?sed?lobortis?finibus.?Vivamus?eu ??????urna?eget?velit?cursus?viverra?quis?vestibulum?sem.?Aliquam?tincidunt ??????eget?purus?in?interdum.?Cum?sociis?natoque?penatibus?et?magnis?dis ??????parturient?montes,?nascetur?ridiculus?mus. ????</p> ??</article> ??<footer>Contact?me@mysite.com</footer> </div> ~~~ 添加css樣式 ~~~ body?{ ??width:?90%; ??max-width:?900px; ??margin:?2em?auto; ??font:?0.9em/1.2?Arial,?Helvetica,?sans-serif; } header, footer?{ ??border-radius:?5px; ??padding:?10px; ??background-color:?rgb(207,?232,?220); ??border:?2px?solid?rgb(79,?185,?227); } aside?{ ??border-right:?1px?solid?#999; } .container?{ ??display:?grid; ??grid-template-columns:?1fr?3fr; ??gap:?20px; } header?{ ??grid-column:?1?/?3; ??grid-row:?1; } article?{ ??grid-column:?2; ??grid-row:?2; } aside?{ ??grid-column:?1; ??grid-row:?2; } footer?{ ??grid-column:?1?/?3; ??grid-row:?3; } ~~~ 我們再來看看這個頁面布局的網格線：  拿header來說，grid-column: 1 / 3，意思就是說從列的位置從分隔線序號1開始，從分隔線序號3結束，是不是跟上面圖中的網格線一致？其他元素的布局也是類似的，你可以一一的對照去看。 以上代碼參考地址:https://stackblitz.com/edit/web-platform-tmtmba?file=styles.css ### 3.2. grid-template-areas 當然，上面的布局實現方式可以用另一種往網格放元素的方式：grid-template-areas，并且你要命名一些元素并在屬性中使用這些名字作為一個區域。 將之前基于線的元素放置代碼刪除（或者重新下載一份新的文件），然后加入以下 CSS 規則： ~~~ .container?{ ??display:?grid; ??grid-template-areas: ????"header?header" ????"sidebar?content" ????"footer?footer"; ??grid-template-columns:?1fr?3fr; ??gap:?20px; } header?{ ??grid-area:?header; } article?{ ??grid-area:?content; } aside?{ ??grid-area:?sidebar; } footer?{ ??grid-area:?footer; } ~~~ 同樣的也能實現上面博客的布局效果。 ## 4\. 網格排版框架 網格排版框架一般由 12 到 16 列的網格構成，下面我們實現一個12列網格的排版框架。頁面布局還是以上面博客的為例，參考代碼：https://stackblitz.com/edit/web-platform-pfi7ju?file=styles.css 我們可以用基于線的元素放置模式來將我們的內容放到這個 12 列的網格中。 ~~~ .container?{ ??display:?grid; ??grid-template-columns:?repeat(12,?minmax(0,?1fr));?/**?關鍵代碼?**/ ??gap:?20px; } header?{ ??grid-column:?1?/?13; ??grid-row:?1; } article?{ ??grid-column:?4?/?13; ??grid-row:?2; } aside?{ ??grid-column:?1?/?4; ??grid-row:?2; } footer?{ ??grid-column:?1?/?13; ??grid-row:?3; } ~~~ 在Google瀏覽器中使用開發者工具查看它的網格線，你應該能看到這 12 列的網格是如何工作的了。  > 總結：我們在這篇文章中接觸了 CSS 網格版面的主要特性，你現在應該可以在你自己的設計中使用了。 最后，看完了別忘了給博主三連。請轉發給你的朋友，讓他們也學會網格布局的使用技巧吧，非常感謝！