如何理解grid网格布局？与flex弹性盒子布局有何区别？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文描述一个新的css的grid布局方式，这个grid布局并不是css+div意义上自实现的grid网格布局，而是css原生上就支持的display:grid布局。然而，值得一提的是：ie系列并不支持本文中所描述的grid网格布局。

提起这个grid布局，更多意义上应该想到苏南大叔以前描述过的flex布局，两者在某些程度上是比较相似的。在本文中，将对两者做个简单的对比，来更好的理解grid网格布局。本文测试环境：win10，chrome。

flex弹性盒子布局

首先回顾一下flex布局，苏南大叔写了一系列的文章，来阐述display:flex的使用方式：

• https://newsn.net/say/css-flex.html
• https://newsn.net/say/flex-axis.html
• https://newsn.net/say/flex-direction.html
• https://newsn.net/say/flex-align.html
• https://newsn.net/say/flex-item-order.html
• https://newsn.net/say/flex-item-size.html

总的思路就是：

• 父容器决定display:flex，子对象的排列方向不一定，决定于父容器如何定义主轴方向。
• 子对象自己决定flex的细节，包括对齐、顺序、尺寸等属性。

下面的代码是个简单范例：

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<style>
  .box {
    display: flex;
    flex-direction: row;
    width: 302px;
    height: 302px;
    background: blue;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    line-height: 98px;
    font-size: 36px;
    color: white;
    margin-top: 2px;
    width:33.33%;
  }
  .item:nth-of-type(1) {width:66.66%}
  .item:nth-child(even) {background-color: chartreuse;}
</style>

grid网格布局

这个grid的网格布局，其实和传统的table布局是类似的。在理解上就可以理解为table布局的一个一个tr和td信息。只不过行列的具体属性，都从传统的html里面移动到了css定义里面。

先学习一下英文，行：row。列：column。

下面的例子里面，使用grid布局实现了一个和上面的flex布局类似的布局。

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<style>
  .box {
    display: grid;
    width: 302px;
    height: 302px;
    background: blue;
    grid-template-rows: "1fr 1fr 1fr";
    grid-template-columns: repeat(3, 1fr);
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    line-height: 98px;
    font-size: 36px;
    color: white;
    margin-top: 2px;
    /* width:33.33%; */
  }
  .item:nth-of-type(1) {
      grid-column: 1 / span 2;
  }
  .item:nth-child(even) {background-color: chartreuse;}
</style>

display:grid兼容性

就浏览器兼容性上来说，flex的被支持程度要大于grid布局。当然，这个grid布局比flex布局还不常见。（叫grid的css类很多，但是大多数都并不是浏览器原生就支持的那种。）

display:grid网格布局的兼容性不好，ie系列浏览器并不支持display:grid（但并不是乱码哦，仅仅是按普通的div理解即可）！具体的兼容性关系图，可以参考：

• https://caniuse.com/?search=grid

注：最新版的edge浏览器是支持display:grid的。

使用场景上来说，两者可以表述成相似的效果。但是，grid布局多用于全局整体性的布局，子元素之间的实际差异性较大。flex布局更倾向于一些局部的列表数据的展示。

总结

综述，在使用体验上来说，grid网格布局更像是table，小格子之间充满了相互之间的羁绊。虽然从html角度来说，并不能看出相互之间的羁绊所在，但是css里面把这个羁绊定义的死死的。一个子元素可以占据多个网格，总方向也是可以跨越多个网格。网格是网格，子元素是子元素，两者并不等同。

flex的子元素之间则更加轻松随意，相互之间虽然有规则约束，但是也是比较轻松愉快的组合的。

更多苏南大叔的css经验分享文章，请参考：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。