Grid網格佈局實例

網格佈局（Grid）是最強大的 CSS 佈局方案。 —— 阮一峯

立刻都 2020 年了，你尚未使用網格佈局嗎？雖然這些年 js 發展的勢頭正勁，蓋過了 css 的發展風頭，但其實 css 也是有很大進步的。彈性佈局、網格佈局相繼被各大主流瀏覽器支持，大大方便了咱們切圖仔，不再須要用 bootstrap 的柵格系統了，網格佈局原生支持！SO EASY ~

本文重在介紹網格佈局的應用實例，因此簡介部分只是作了一些屬性的簡單整理介紹（主要方便本身查詢使用），詳細介紹建議參考阮一峯 CSS Grid 網格佈局教程。

簡介

Grid 佈局將容器劃分紅"行"和"列"，產生單元格也就是項目所在。

容器

容器就是設置了 display: grid; 或者 display: inline-grid; 的元素。

項目

項目就是容器的頂層子元素。

網格線

網格線就是項目邊緣的線。

容器屬性

容器屬性必須設置在容器上。

設置容器爲行性質或內聯性質的網格佈局：

display: grid;
display: inline-grid;
複製代碼

設爲網格佈局之後，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。

grid-template-columns: 100px 100px 100px; // 將容器設爲三列，每列的列寬爲100px
grid-template-rows: 100px 100px 100px; // 將容器設爲三行，每列的行高爲100px
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c'; // 定義區域名，由單個或多個單元格組成
grid-template // 上面三個屬性的合併簡寫形式，不易讀易寫，不建議使用
grid // 多屬性合併，不易讀易寫，不建議使用
複製代碼

注意，區域的命名會影響到網格線。每一個區域的起始網格線，會自動命名爲區域名-start，終止網格線自動命名爲區域名-end。 好比，區域名爲header，則起始位置的水平網格線和垂直網格線叫作header-start，終止位置的水平網格線和垂直網格線叫作header-end。

設置項目之間的間隔

grid-row-gap: 20px; // 設置行與行的間隔
grid-column-gap: 20px; // 設置列與列的間隔
grid-gap: <grid-row-gap> <grid-column-gap>; // grid-column-gap和grid-row-gap的合併簡寫形式，也可直徑寫作 gap
複製代碼

整個內容區域在容器裏面的水平/垂直位置

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>; // align-content屬性和justify-content屬性的合併簡寫形式
複製代碼

項目內容在單元格中的水平/垂直位置

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: start | end | center | stretch;
複製代碼

repeat()/minmax()函數 和 auto-fill/auto/fr關鍵字

grid-template-columns: repeat(3, 100px); // 3列， 每列100px
grid-template-columns: repeat(auto-fill, 100px); // 自適應列數， 每列100px
grid-template-columns: repeat(3, 1fr); // 3列，每列等寬
grid-template-columns: 100px 1fr 2fr; // 第一列100px，剩餘空間 1 : 2 分配給第二第三列
grid-template-columns: 100px auto; // 第一列100px，第二列自適應剩餘空間
grid-template-columns: 1fr 1fr minmax(200px, 2fr); // 前兩列 1 等寬 ，最後一列最小 200px ，正常狀況下是前一列的 2 倍
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // [c1] 爲網格線名
複製代碼

有時候，一些項目的指定位置，在現有網格的外部。好比網格只有3列，可是某一個項目指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置項目。

grid-auto-columns: 50px 50px 50px; // 超出所定義網格行的列寬
grid-auto-rows: 50px 50px 50px; // 超出所定義網格行的行高
grid-auto-flow // 容器的子元素會排列順序: row"先行後列"、 column"先列後行"、 row dense 和 column dense
複製代碼

項目屬性

項目屬性必須設置在項目上。

項目的位置是能夠指定的，具體方法就是指定項目的四個邊框，分別定位在哪根網格線。

grid-column-start: 1; // 左邊框所在的垂直網格線
grid-column-end: 2; // 右邊框所在的垂直網格線
grid-row-start: 1; // 上邊框所在的水平網格線
grid-row-end: 2; // 下邊框所在的水平網格線
grid-column: 1 / 2; // grid-column-start和grid-column-end的合併簡寫形式 也能夠結合網格線和span關鍵字
grid-row:1 / 2; // grid-row-start屬性和grid-row-end的合併簡寫形式 也能夠結合網格線和span關鍵字
grid-area: a // 指定項目放在哪個區域  由容器上的grid-template-area劃分區域
複製代碼

justify-self: start | end | center | stretch; // 設置單元格內容的水平位置
align-self: start | end | center | stretch; // 設置單元格內容的垂直位置
place-self: <align-self> <justify-self>; // align-self屬性和justify-self屬性的合併簡寫形式
複製代碼

佈局實例

兩欄佈局

一側固定，一側自適應：地址

<style> .container{ display: grid; grid-template-columns: 100px auto; // 或者 100px 1fr } </style>
<div class="container">
  <aside></aside>
  <main></main>
</div>
複製代碼

十二網格佈局

地址

<style> .container{ display: grid; grid-template-columns: repeat(12, 1fr); } </style>
<div class="container">
  <div>1</div>
  ...
</div>
複製代碼

水平垂直居中

目前 grid 佈局是惟一一個一行 css 代碼實現水平垂直居中佈局的方法：地址

<style> .container{ display: grid; place-content: center; } </style>
<div class="container">
  <div>asdf</div>
</div>
複製代碼

自適應兩端對齊

這種效果難在實現最後一行左對齊的效果。若是使用 flex 佈局或者 text-align: justify （參考此處）方法，則須要使用等列的空標籤佔位，而若是不肯定總共有多少列的話則難以實現最後一行左對齊的效果。而 grid 佈局則可完美實現兩端對齊最後一行左對齊的效果。

項目寬度固定：地址

項目寬度不固定：地址

限定列寬的表格

第三列在寬度足夠（即能前兩列都大於100px）的狀況下是前兩列之和，最小是 200px ：地址

.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
複製代碼

聖盃佈局

自適應移動端的聖盃佈局：地址

基於網格線佈局

使用各類手段實現以下簡單佈局：

基於網格線數字編號安放項目：地址

也能夠使用 span 關鍵字：地址

使用命名的網格線佈局：地址

使用命名的網格線佈局2：地址

使用 repeat() 函數用來重複建立相同定義的網格：地址

使用 命名區域和隱式命名網格線：地址

總結

最近在搬磚的時候不當心砸到了腳......哦不，最近在搬磚的時候遇到了多行兩端對齊尾行左對齊的佈局，而後就嘗試了下張鑫旭老師在 css 世界中的 text-align: justify 兩端對齊方案，結果慘遭 Vue 的 v-for 生成的代碼在元素與元素之間沒有空格的特色而致使這種兩端對齊方法無效，一怒之下就學習了 grid 網格佈局，也算一件奇葩事吧~~

因爲是剛學網格佈局，文章未免有些簡陋，請多擔待。之後遇到有趣的網格佈局的話，我會更新文章的。

都要 2020 了，也該用網格佈局了。