1. 什么是 Grid 布局
Grid（網格布局）定義了網格的行和列，我們可以將網格元素放置在與這些行和列相關的位置上，做出多種布局，
2. 為什么學習 CSS Grid 布局
Grid 能夠定義行和列來進行二維布局，并且簡便、靈活，
免去了 Bootstrap 等 CSS 框架的使用，
主流瀏覽器都比較支持，
3. 開始
3.1 第一個網格
定義六個 div 用于布局（相關顏色等 css 代碼已省略），默認情況下每個 div 占滿一行，
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
最開始，用 display: grid; 來創建一個網格容器 (Grid Container)，其中的子網格稱為 Grid items，下邊創建一個三列兩行的網格，
.container {
display: grid;
/* 3 列, 寬度分別為 100px, auto, 200px */
grid-template-columns: 100px auto 200px;
/* 2 行, 高度分別為 50px, 50px */
grid-template-rows: 50px 50px;
/* 行間距 列間距 */
gap: 5px 20px;
}
具體效果：
3.2 fr and repeat
fr
使用 fr 能夠將剩余的空間進行一定比例的分配，
用 fr 制作一個兩行三列，并且三列的寬度相等的網格，
.container {
display: grid;
/* 三個等寬的列 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
gap: 5px 20px;
}
進行如下修改，將第一列的寬度固定為 100px，則其他兩列會按照剩余空間進行 1：1分配，
grid-template-columns: 100px 1fr 1fr;
試下 2fr，可以看到 2fr 列是 1fr 列的兩倍，
grid-template-columns: 100px 1fr 2fr;
repeat
可以用 repeat 重復創建相同的行或者列，
.container {
display: grid;
/* 三個等寬的列 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
gap: 5px 20px;
}
/* 用 repeat */
.container {
display: grid;
/* repeat(數量, 長度) */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
gap: 5px 20px;
}
/* 簡寫 */
.container {
display: grid;
/* grid-template: 行 / 列; */
/* grid-template: 50px 50px / 1fr 1fr 1fr; 與下邊代碼效果相同 */
grid-template: repeat(2, 50px) / repeat(3, 1fr);
gap: 5px 20px;
}
4. 定位與布局
4.1 Grid items 的定位
如下，我們創建的 container 里的 4 個 div 色塊即為 Grid items（子網格），接下來要對他們進行定位，
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
先創建網格容器，
.container {
display: grid;
gap: 3px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 40px 200px 40px;
}
給子網格 header 設定 grid-column: 1 / 3; ，表示 header 的列在網格線 1 和網格線 3 之間，即占了兩列，
.header {
grid-column: 1 / 3;
}
通過瀏覽器開發者工具 (F12/Ctrl+shift+I) 可以看到，網格線 2 處有一條間距 gap，但 gap 左右還是同一條網格線 2，
網格線從左到右是數字 1, 2, 3…；從右到左是 -1, -2, -3…，即倒數第 1 條網格線，倒數第 2 條，倒數第 3 條……兩者可以混用，接下來使用他們進行布局，
.container {
display: grid;
gap: 3px;
/* 三行、四等列 */
grid-template-rows: 40px 200px 40px;
grid-template-columns: repeat(4, 1fr);
}
/* 網格線 1 ~ 5 之間 */
.header {
grid-column: 1 / 5;
}
.menu {}
/* 網格線 2 ~ 倒數第 2 條網格線之間 */
.content {
grid-column: 2 / -2;
}
/* 網格線 1 ~ 倒數第 1 條網格線之間 */
.footer {
grid-column: 1 / -1;
}
即圖，
grid-row 和 grid-column 的使用是類似的，
4.2 Template areas
先給自己的四個 div 色塊各取個小名，header 取 h，menu 取 m，content 取 c，footer 取 f，然后給他們劃分地盤，有點像排兵布陣……
這里我們要用到 grid-template-areas 和 grid-area ，
.container {
height: 100%;
display: grid;
gap: 3px;
/* 設定列寬和行高 */
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
/* h 在第一行占 12 列， m 在第二行占第 1 列，c在第二行占第 2 列到最后一列，f 占最后一行*/
grid-template-areas:
"h h h h h h h h h h h h"
"m c c c c c c c c c c c"
"f f f f f f f f f f f f";
}
.header {
/* 所在網格位置 */
grid-area: h;
}
.menu {
grid-area: m;
}
.content {
grid-area: c;
}
.footer {
grid-area: f;
}
用 . 可以讓地盤空著，
.container {
height: 100%;
display: grid;
gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
grid-template-areas:
". h h h h h h h h h h ."
"m c c c c c c c c c c c"
". f f f f f f f f f f .";
}
5. 自動排列
5.1 minmax and auto-fit
minmax(最小長度, 最大長度)，即長度的范圍，auto-fit 能夠根據所給的列寬進行自動換行，
先定義 12 個 div，接下來進行布局，
.container {
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
效果如下：
5.2 grid-auto-rows
上面動圖里的行高不均勻，這是因為我們只設定了前兩行的高度，而其余行的高度都是根據塊內的內容自動定的，
我們可以使用 grid-auto-rows: 100px; 來替代 grid-template-rows: repeat(2, 100px); ，這時候，所有行高都是 100px，
5.3 auto-fit vs auto-fill
.container {
border: 1px solid black;
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 100px 100px;
}
.container2 {
border: 1px solid black;
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-rows: 100px 100px;
}
寬度過大時，auto-fit 會自動拉伸以便占滿一整行，auto-fill 則不會，
待續……
文章內容是根據此處教程寫的：Learn CSS Grid for free
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31375.html
標籤：Html/Css
上一篇：5.Utilities：工具