CSS Grid布局（一） 入门

原文链接 alligator.io/css/css-gri…

flexbox用起来很爽，它帮助我们在一维方向上布局元素，就是水平或垂直方向。通常我们采用Bootstrap或Foundation这些框架实现二维网格布局。全新模块CSS网格布局（CSS Grid Layout）很快（caniuse）将为我们直接提供二维网格布局的能力。

特点

首先，grid的布局有以下三个特点：

• 和flexbox一样，grid布局下的子项目自动根据视窗viewport的大小调整自己的尺寸
• 可以采用@supports 检测浏览器是否支持grid布局或选择兜底方案
• css grid布局可以实现一些css框架无法实现的布局（例如？）

关键字

• grid line：grid line又分为 grid row line和grid column line，其中grid row line表示从上到下第i（i>=1）条水平线；grid column line表示从左到右第i（i>1）条垂直的线。下面就是 grid row line 2

• grid track：两条grid line夹起来的空间是grid track，下图是一个grid track

• grid area：四条grid line夹起来的空间是grid area，下面是一个grid area

• grid cell：相邻水平&垂直grid lines之间的区域，也就是网格布局最小的单位

display:grid，父级元素网格布局

和flexbox相类似的是，grid布局也是由容器元素（container）和子项目（children items）元素组成。只需在容器元素上设置display:grid，再通过grid-template-columns和grid-template-rows定义行和列的样式即可。

示例如下：

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
</div>
复制代码

在容器元素稍微加点样式就可以实现布局：

.container {
  display: grid;

  grid-template-columns: 150px 150px 80px;
  grid-template-rows: 100px auto;

  grid-gap: 10px 15px;
}

.box {
  border: 2px solid #0066CC;
  color: #0066CC;
  text-align: center;
}
复制代码

可以看到可通过 grid-gap设置子项目元素之间的水平、垂直间距。 目前所有item子项目元素尚未单独设置样式，就按照容器元素设置的样式进行“安排”，即第一列150px、第二列150px、第三列80px；第一行100px，后面的全是auto。 如果想单独调整某个子项目元素的样式，可以通过设置 grid-column-start, grid-column-end, grid-row-start， grid-row-end设置其位置和尺寸。

.box-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
复制代码

如果稍微调整下 box1的 grid-column-start为 2，可以看到box1从第2条垂直line开始：

.box-1 {
  grid-column-start: 2;
  grid-column-end: 3;
}
复制代码

此外，用grid-column和grid-row可以达到和上面同样的效果

.box-1 {
  grid-column: 2/3;
}
复制代码

因为grid-gap并不会增加新的grid-line，所以即使grid-item即使看起来分开，也是同一条grid line

支持情况

css grid布局虽方便且强大，但是浏览器支持还需要提高！