CSS页面布局与网格（下）

3.二维布局：CSS Grid Layout

CSS Grid Layout模块为了能在二维空间里控制元素的顺序、位置和大小而定义了一组CSS属性。

被设值为display: grid的元素叫网格容器（grid container）。
容器进一步被网格线划分为不同的区域，叫网格单元（grid cell）。
网格线之间的水平或垂直路径叫网格轨道（grid track）。
由相邻网格单元组合起来的矩形区块叫网格区。
网格容器的直接子元素叫网格项，网格项可以放在网格区内。

3.1 定义行和列

定义一个2行4列的网格，行高300像素，4列等宽：

.grid {

	display: grid;

	grid-template-rows: 300px 300px;

	grid-template-columns: 1fr 1fr 1fr 1fr;

}

表示列宽的单位是fr，意思是可用空间中的部分（fraction of available space）。

指定行和列的数量及大小时，可以混用不同的长度单位。

生成页面子区块的网格：

<section class="subcategory">

  <div class="grid-a">

	<header class="subcategory-header">

		<h2>Lorem ipsum</h2>

	</header>

	<article class="story story-featured">

	  <!-- ... -->

	</article>

	<article class="story"></article>

	<article class="story"></article>

	<!-- ... -->

  </div>

</section>

.grid-a {

    display: grid;

    grid-template-rows: auto auto auto;

    grid-template-columns: repeat(5, 1fr); /* repeat()函数为网格轨道指定重复的行或列声明 */

}

使用minmax()函数：

.grid-a {

    display: grid;

    /* 声明最后两行至少4em高，且占据相等的可用空间。 */

    grid-template-rows: auto minmax(4em, 1fr) minmax(4em, 1fr);

    grid-template-columns: repeat(5, 1fr);

}

3.2 添加网格项

添加网格项要以其起止处的网格线作为参考。

.subsection-header {

    grid-row-start:1;

    grid-column-start:1;

    grid-row-end:4;

    grid-column-end:2;

}

简写方法：

.subsection-header {

    /* 起止网格线的编号以斜杠（/）分隔。 */

    grid-row:1/4;

    grid-column:1/2;

}

.subsection-header {

    grid-row:1/-1; /* -1表示最后一个网格轨道的终止网格线的编号 */

    grid-column:1; /* 等价于grid-column:1/2，即默认跨度为一个网格单元 */

}

可以使用grid-area属性进一步简化网格项的声明。

对齐网格项：

网格项与块级元素类似，会自动填充自己所在网格区的宽度，除非明确设置它的宽度。百分比值相对于网格项所在网格区的宽度来计算。

如果网格项没有在水平方向填满网格区，可以通过justify-items和justify-self属性指定它的左、中、右分布。

align-self和justify-self用于个别网格项。align-items和justify-items则用于网格容器上设置所有网格项的默认对齐。

.grid-a {

    display: grid;

    grid-template-rows: auto auto auto;

    grid-template-columns: repeat(5, 1fr);

    align-items: start;

}

对齐网格轨道：

只要网格轨道的总和没有覆盖整个网格容器，就可以使用align-content（垂直方向）和justify-content（水平方向）来移动轨道。

<div class="grid">

    <div></div>

    <!-- 省略7个空div -->

</div>

.grid {

    display: grid;

    height: 100px;

    outline: 2px dashed #666;

    width: 500px;

    grid-template-rows: 100px; /* 行高100px */

    grid-template-columns: repeat(8, 50px); /* 列宽50px */

    justify-content: start; /* 默认值 */

}

.grid > * {

    outline: 1px solid #fff;

    background-color: #ccc;

}

定义了1行8列的网格，行高100像素，每列宽度为50像素。

<div class="grid grid-end">

    <div></div>

    <!-- 省略7个空div -->

</div>

.grid-end {

    justify-content: end;

}

网格布局中的空距：

通过grid-column-gap和grid-row-gap属性创建固定宽度的空距，这其实就相当于多栏布局中的column-gap或者表格中的border-spacing。

.grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-column-gap: 1.5em;

    grid-row-gap: 1.5em;

}

3.3 自动网格定位

Grid Layout规范提供了一种自动定位的机制：所有网格项自动从第一行第一个可用的网格单元开始，逐列填充。一行填满后，网格会自动开启一行并继续填充。

<ul class="grid-auto-rows">

  <li class="story">

	<h3><a href="#">Story 1</a></h3>

  </li>

  <!-- 省略8个li -->

</ul>

.grid-auto-rows {

    display: grid;

    grid-template-rows: auto;

    grid-template-columns: repeat(5, 1fr);

    grid-auto-flow: row; /* 默认值为稀疏模式 */

}

/* :nth-child(n)匹配其父元素的第n个子元素 */

.story:nth-child(1),

.story:nth-child(2) {

    grid-column: span 3; /* 跨三列 */

}

.story:nth-child(4) {

    grid-column: span 2; /* 跨两列 */

}

切换自动定位算法：

.grid-auto-rows {

    /* 省略 */

    grid-auto-flow: row dense; /* 稠密模式 */

}

自动定位的次序：

网格项的次序与源代码次序一致，每个网格项的默认次序是0。整数值，包括负值在内，都是有效的。

<!-- 省略 -->

<div class="grid-a">

  <header class="subcategory-header">

    <h2>Lorem ipsum</h2>

  </header>

  <article class="story story-featured">

    <img src="http://placehold.it/600x300" alt="Dummy image">

    <h3><a href="#">Cras suscipit nec leo id.</a></h3>

    <p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>

  </article>

  <article class="story">

    <img src="http://placehold.it/600x300" alt="Dummy image">

    <h3><a href="#">Perferendis, ipsam!</a></h3>

    <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>

  </article>

  <article class="story">

    <img src="http://placehold.it/600x300" alt="Dummy image">

    <h3><a href="#">Curabitur mattis purus nec velit.</a></h3>

    <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>

  </article>

</div>

<!-- 省略 -->

.grid-a {

    display: grid;

}

/* :nth-of-type(n) 匹配同类型中的第n个同级兄弟元素。 */

.story:nth-of-type(2),

.story:nth-of-type(3) {

    order: -2;

}

.story-featured {

    order: -1;

}

3.4 网格模板区

使用grid-template-areas属性来声明网格布局。

grid-template-areas属性的值是以空格分隔的字符串列表。

每个字符串本身是空格分隔的自定义标识符，表示网格中的一行，其中每个标识符表示一列。

跨行或跨列相邻的同名网格单元构成所谓的命名网格区。

<section class="subcategory">

    <div class="grid-b">

        <header class="subcategory-header">

            <h2>Dolor sit amet</h2>

        </header>

        <article class="story">

            <img src="http://placehold.it/600x300" alt="Dummy image">

            <h3><a href="#">Ut sit amet mi massa</a></h3>

            <p>...</p>

        </article>

        <article class="story"></article>

        <div class="ad">

            <h3><a href="#">Buy more stuff!</a></h3>

        </div>

        <div class="ad"></div>

    </div>

</section>

.grid-b {

    display: grid;

    grid-template-columns: 20% 1fr 1fr 1fr;

    /* 点号表示匿名单元。 */

    grid-template-areas: "hd st1 . st2"

				     "hd st1 . st2";

}

.grid-b .subcategory-header {

    /* 使用grid-area属性自定义网格区名 */

    grid-area: hd;

}

/* :nth-child(n)匹配其父元素的第n个子元素 */

.grid-b .story:nth-child(2) {

    grid-area: st1;

}

.grid-b .story:nth-child(3) {

    grid-area: st2;

}

默认的自动定位算法会把广告（<div class="ad"></div>）放到剩余的空单元中。

CSS Grid Layout规范允许用连续多个点表示一个匿名单元，因为这样更方便对齐多行模板字符串。

grid-template-areas: "hd ... ... ..."

					 "hd st1 ... st2"

					 "hd ... ... ...";

参考资料：

菜鸟教程
w3school
《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德

巴特西