css布局——Grid【搬运】

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。

一、前言铺垫

1.引言

CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。只要我们一直在制作网站，我们就一直在为解决布局问题不断探索，而Grid是第一个专门为解决布局问题而生的CSS模块。

本文包括18个小节，50个实例，完整阅读需要时间20分钟以上。

2.重要术语

在深入了解网格的概念之前，理解术语是很重要的。由于这里所涉及的术语在概念上都是相似的，如果不先记住它们在网格规范中定义的含义，则很容易将它们彼此混淆。但是不用太担心，这些术语并不多。

Grid Container

设置了 display: gird 的元素。这是所有grid item的直接父项。在下面的例子中，.container就是是 grid container。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid Item

Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

这个分界线组成网格结构。它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。下面例中的黄线就是一个列网格线。

Grid Track

两个相邻网格线之间的空间。你可以把它们想象成网格的列或行。下面是第二行网格线和第三行网格线之间的网格轨道。

Grid Cell

两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。下面是行网格线1和2之间以及列网格线2和3的网格单元。

Grid Area

四个网格线包围的总空间。网格区域可以由任意数量的网格单元组成。下面是行网格线1和3以及列网格线1和3之间的网格区域。

Grid 属性列表

Grid Container 的全部属性

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Grid Items 的全部属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

二、实例

1 网格容器

将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

1.1 例1

grid  {
    display: grid;
｝

网格项目按行排列，网格项目占用整个容器的宽度。