css之grid实现网格布局

1 概述

最近一直在写网页，遇到一个网格化布局问题，特地分享一下。

2 grid

主要是用到css中的 display: grid

<div class="all">
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
  <div><p>4</p></div>
  <div><p>5</p></div>
  <div><p>6</p></div>
  <div><p>7</p></div>
  <div><p>8</p></div>
</div>
<style>
  .all {
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 固定三行三列 100px */
    grid-template-rows: 100px 100px 100px;
    grid-row-gap: 20px;  /* 每个 div 块之间的间隔20px */
    grid-column-gap: 20px;
    background-color: brown;
  }
  .all div {
    background-color:lightblue;
    font-size: 30px;
    text-align: center;
    color: brown;
  }
</style>

效果图：

3 细节

grid-template-columns和grid-template-rows 设置列与行；
上面是三行三列，一行宽100px，一列宽100px;
也可用 % 达到三分的效果，

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
/* or */
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);

另外，
display: inline-grid: // 产生内联级网格

最后，

grid更像flex的升级版，还有很多的细节值得摸索，在这里我就不挪列了，大家上手试试，就能写出不同花样的网格布局…