深入理解css 笔记（6）
网格布局：flexbox 彻底改变了网页布局方式，但这只是开始。它还有一个大哥：另一个称作网格布局模块的新规范。这两个规范提供了一种前所未有的全功能布局引擎。跟 flexbox 类似，网格布局也是作用于两级的 dom 结构。设置为 display:grid 的元素成为一个网格容器（grid container)。它的子元素则变成网格元素。
<!DOCTYPE html>
<html lang="cn" class="has-bottombar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
name="viewport"
/>
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0.5em;
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
border-radius: 0.5em;
}
</style>
</head>
<body>
<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>
</body>
</html>
在支持网格布局的浏览器中，这段代码会渲染三列，共六个大小相等的盒子。首先，使用 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 网格区域：网格上的矩形区域，由一个到多个网格单元组成。该区域位于两条垂直网格线和两条水平网格线之间。
构建网格布局时会涉及这些组成部分。比如声明 grid-template-columns:1fr 1fr 1fr 就会定义三个等宽且垂直的网格轨道，同时还定义了四条垂直的网格线：一条在网格最左边，两条在每个网格轨道之间，还有一条在最右边。讲 flexbox 的时候构建了一个网页，假如用网格来实现。有一点值得注意的事，使用网格并不会让 flexbox 失去用武之地。用网格实现同样的布局需要改一下 html 结构：将嵌套的 html 拉平。放在网格里的每个元素都必须是主要网格容器的子元素。
<!DOCTYPE html>
<html lang="cn" class="has-bottombar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
name="viewport"
/>
<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);
grid-gap: 1.5em;
max-width: 1080px;
margin: 0 auto;
}
header,
nav {
grid-column: 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;
}
.tile {
padding: 1.5em;
background-color: #fff;
}
.tile > :first-child {
margin-top: 0;
}
.tile * + * {
margin-top: 1.5em;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1 class="page-heading">Ink</h1>
</header>
<nav>
<ul class="site-nav">
<li><a id="button1">Home</a></li>
<li><a id="button2">Features</a></li>
<li><a id="button3">Pricing</a></li>
<li class="nav-right">
<a href="/about">About</a>
</li>
</ul>
</nav>
<main class="main tile">
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink