【html】grid网格布局，比flex方便太多了，介绍几种常用的grid布局属性

使用flex布局的痛点

如果使用justify-content: space-between;让子元素两端对齐，自动分配中间间距，假设一行4个，如果每一行都是4的倍数那没任何问题，但如果最后一行是2、3个的时候就会出现下面的状况：

/* flex布局 两端对齐 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;

如何想让最后一行左对齐是有办法的，大家可以自行去搜索办法，能实现但是操作起来有些麻烦，但是如果这种布局使用grid布局的话，就会变的非常容易。

同样的布局，将flex改为grid
 

/* grid布局 两端对齐,最后一行左对齐*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;   

解释一下上面的代码：

• display：grid 是转为网格布局，这个是必须的
• grid-template-columns：1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格
• gap:30px 这是网格