html网格布局四列三行,前端布局之网格gird布局（简单易懂）

前言

弹性布局的文章很多，但是它是解决一维布局的，面对二维就显得无力了，此时我们就需要用到网格布局。(ps：一维就是一列或者一行的布局，当你遇到九宫盒布局，此时涉及到列与行，便是二维布局了，常见于电商网站的商品展示)；看这篇文章，建议你自己建个html，跟着敲一敲，更利于理解。

为什么用网格布局？

很多同学可能会觉得，我用浮动，定位，弹性盒模型可以实现绝大多数样式布局呀，为什么还要新学一个网格布局呢。就像你以前用jquery，为什么后来用mvvm框架呢，因为它能让我们实现起来更效率，也很利于维护。

进入主题：

最基本代码：(体验 gird 的第一个好处，align-items:center垂直居中，妈妈再也不要担心我搞不定垂直居中了。)

.box {

width: 300px;

display: grid;

align-items:center;

}

.box>div{

background: gray;

text-align: center;

font-size: 24px;

border: 2px solid white;

}

1

2

3

4

5

6

效果图.png

一、Columns(列) 和 rows(行)

1)更改上面的.box里面样式：(3列和2行)

.box {

width: 300px;