CSS Grid 实现一个iPhone 工具栏

网格布局（Grid）是最强大的 CSS 布局方案 -- 阮一峰。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

详细的介绍可以去看CSS Grid 网格布局教程，在这里通过实现一个iPhone工具栏来展示Grid布局强大。

第一个版本先把十几个容器给整出来。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>grid 实现一个iPhone 工具栏</title>
  <style>
    .container {}
    .item {
      font-size: 35px;
      text-align: center;
      border: 1px solid #e5e4e9;
      border-radius: 20px;
    }

    .item-1 {
      background-color: #ef342a;
    }
    .item-2 {
      background-color: #f68f26;
    }

    .item-3 {
      background-color: #4ba946;
    }
    .item-4 {
      background-color: #0376c2;
    }
    .item-5 {
      background-color: #c077af;
    }
    .item-6 {
      background-color: #f8d29d;
    }
    .item-7 {
      background-color: #b5a87f;
    }
    .item-8 {
      background-color: #d0e4a9;
    }
    .item-9 {
      background-color: #4dc7ec;
    }
    .item-10 {
      background-color: #f1d29d;
    }
    .item-11 {
      background-color: #4ba946;
    }
    .item-12 {
      background-color: #0376c2;
    }
    .item-13 {
      background-color: #b5a87f;
    }
    .item-14 {
      background-color: #ad5959;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
    <div class="item item-10">10</div>
    <div class="item item-11">11</div>
    <div class="item item-12">12</div>
    <div class="item item-13">13</div>
    <div class="item item-14">14</div>
  </div>
</body>
</html>

容器整理出来之后，咱们开始添砖加瓦美化它了。

.container {
  display: grid;
  grid-template-columns: repeat(4, 80px); // 这里repeat(4, 80px) 相当于 80px 80px 80px 80px
  grid-template-rows: repeat(6, 80px); 
}

现在已经有点样子，继续调整第一行的两个大容器。在写样式之前，先把一个概念讲清楚以便后续的理解。Grid 有个很重要的概念“网格线”。

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

大概理解了“网格线”之后，接下来的布局样式就好理解些了。

.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item-2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: #f68f26;
}

解释下上面的样式的意思

这里大概解释下item1，item1所占用的位置是从column lines 方向line1 到 line3，也就是占用两个格子，从 row lines 方向 line1 到 line3，也是占用两个格子。就是下面红色圈圈的位置。

接下来需要把第7号格子水平方向给占到两个容器，第5，6号格子垂直方向占用两个容器。

.item-5 {
  background-color: #c077af;
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 3;
  grid-column-end: 4;
}

.item-6 {
  background-color: #f8d29d;
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 4;
  grid-column-end: 4;
}

.item-7 {
  background-color: #b5a87f;
  grid-column-start: 1;
  grid-column-end: 3;
}

大致的布局已经完成了，现在只需要给每个格子设置间隔，子容器内部文字居中就差不多了大功告成了。

刚学grid 没多久，如果有考虑不到的地方，需要大家指正。源码，希望大家star下。谢谢