目錄
- 網格布局
- 基礎網格
- 網格剖析
CSS 提供了一些控制網頁布局的幾個重要工具，這里介紹網格布局。
網格布局
CSS 網格可以定義由行和列組成的二維布局，然后將元素放置到網格中。有些元素可能只占據網格的一個單元，另一些元素則可能占據多行或多列。網格的大小既可以精確定義，也可以根據自身內容自動計算。你既可以將元素精確地放置到網格某個位置，也可以讓其在網格內自動定位，填充劃分好的區域。
基礎網格
跟 Flexbox 類似，網格布局也是作用于兩級的 DOM 結構。設置為 display: grid 的元素成為一個網格容器（gridcontainer）?。它的子元素則變成網格元素?。
看個例子：
<div class="grid"><div class="a">a</div><div class="b">b</div><div class="c">c</div><div class="d">d</div><div class="e">e</div><div class="f">f</div>
</div>.grid {display: grid; # 使用display: grid定義一個網格容器。容器會表現得像一個塊級元素，100%填充可用寬度grid-template-columns: 1fr 1fr 1fr; # 分數單位: 三列等寬grid-template-rows: 1fr 1fr; # 等高的兩行grid-gap: 0.5em; # 網格單元格添加間隔
}.grid > * {backgroud-color: gray;color: white;padding: 2em;border-radius: 0.5em;
}
- 使用display: grid定義一個網格容器。容器會表現得像一個塊級元素，100%填充可用寬度
也可以使用 inline-grid?，這樣元素就會在行內流動，且寬度只能夠包含子元素，不過 inline-grid的使用頻率不高。
-
grid-template-columns 和 grid-template-rows: 定義了網格每行每列的大小。本例使用了一種新單位fr，代表每一列（或每一行）的分數單位（fraction unit）?。這個單位跟 Flexbox 中 flex-grow 因子的表現一樣。grid-template-columns: 1fr 1fr 1fr 表示三列等寬。不一定非得用分數單位，可以使用其他的單位，比如px、em 或百分數。也可以混搭這幾種單位，例如，grid-template-columns: 300px 1fr 定義了一個固定寬度為300px的列，后面跟著一個會填滿剩余可用空間的列。2fr 的列寬是 1fr 的兩倍
-
grid-gap 屬性定義了每個網格單元之間的間距。也可以用兩個值分別指定垂直和水平方向的間距（比如grid-gap: 0.5em 1em）?
網格剖析
- 網格線（grid line）：網格線構成了網格的框架。一條網格線可以水平或垂直，也可以位于一行或一列的任意一側。指定了grid-gap的話，它就位于網格線上。
- 網格軌道（grid track）：一個網格軌道是兩條相鄰網格線之間的空間。網格有水平軌道（行）和垂直軌道（列）?。
- 網格單元（grid cell）：網格上的單個空間，水平和垂直的網格軌道交叉重疊的部分。
- 網格區域（grid area）：網格上的矩形區域，由一個到多個網格單元組成。該區域位于兩條垂直網格線和兩條水平網格線之間。
設計不必填滿每個網格單元。在想留白的地方讓網格單元為空即可。
使用Flexbox布局時，需要按照一定方式嵌套元素。比如用Flexbox定義了列，然后將另一個Flexbox嵌套在里面定義行。用網格實現同樣的布局需要改一下HTML結構：將嵌套的HTML拉平。放在網格里的每個元素都必須是主要網格容器的子元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Document</title><style>:root {box-sizing: border-box;}*,::before,::after {box-sizing: inherit;}body {background-color: #709b90;font-family: Arial, Helvetica, sans-serif;}/* 網格容器 */.container {display: grid;grid-template-columns: 2fr 1fr; /* 定義兩個垂直的網格軌道 */grid-template-rows: repeat(4, auto); /* 定義四個水平軌道，大小為auto */grid-gap: 1.5em;max-width: 1080px;margin: 0 auto;}/* 下面這幾個網格元素，必須是網格容器的子元素 */header,nav {grid-column: 1 / 3; /* 從1號垂直網格線跨越到3號垂直網格線 */grid-row: span 1; /* 剛好占據一條水平網格軌道 */}/* 下面也是，將其他網格元素定位到不同的網格線之間 */.main {grid-column: 1 / 2;grid-row: 3 / 5;}.sidebar-top {grid-column: 2 / 3;grid-row: 3 / 4;}.sidebar-bottom {grid-column: 2 / 3;grid-row: 4 / 5;}.title {padding: 1.5em;background-color: #fff;}.title > :first-child {margin-top: 0;}.title * + * {margin-top: 1.5em;}.page-heading {margin: 0;}.site-nav {display: flex;margin: 0;padding: .5em;background-color: #5f4b44;list-style-type: none;border-radius: .2em;}.site-nav > li {margin-top: 0;}.site-nav > li > a {display: block;padding: .5em 1em;background-color: #cc6b5a;color: white;text-decoration: none;}.site-nav > li + li {margin-left: 1.5em;}.site-nav > .nav-right {margin-left: auto;}.login-form h3 {margin: 0;font-size: .9em;font-weight: bold;text-align: right;text-transform: uppercase;}.login-form input:not([type=checkbox]):not([type=radio]) {display: block;width: 100%;margin-top: 0;}.login-form button {margin-top: 1em;border: 1px solid #cc6b5a;background-color: white;padding: .5em 1em;cursor: pointer;}.centered {text-align: center;}.centered small {text-transform: uppercase;}.cost {display: flex;justify-content: center;align-items: center;line-height: .7;}.cost > span {margin-top: 0;}.cost-currency {font-size: 2em;}.cost-dollars {font-size: 4em;}.cost-cents {font-size: 1,5em;align-self: flex-start;}.cta-button {display: block;background-color: #cc6b5a;color: white;padding: .5em 1em;text-decoration: none;}</style>
</head>
<body><div class="container"><header><h1 class="page-heading">Ink</h1></header><nav><ul class="site-nav"><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/support">Support</a></li><li class="nav-right"><a href="/about">About</a></li></ul></nav><main class="main title"><h1>Team collaboration done right</h1><p>Thousands of teams from all over this world turn to <b>Ink</b> to communicate and get things done.</p></main><div class="sidebar-top title"><form class="login-form"><h3>Login</h3><p><label for="username">Username</label><input id="username" type="text" name="username"></p><p><label for="password">Password</label><input id="password" type="password" name="password"></p><button type="submit">Login</button></form></div><div class="sidebar-bottom title centered"><small>Starting at</small><div class="cost"><span class="cost-currency">$</span><span class="cost-dollars">20</span><span class="cost-cents">.00</span></div><a class="cta-button" href="/pricing">Sign up</a></div></div>
</body>
</html>
組合模式)
