实例演示隐式网格
对齐方式与行列间隙的设置方式与使用场景、前提
一、 对齐方式
用两个属性来表示
place-content 和 place-items
在项目容器中对齐
place-content 对齐方式：垂直方向 水平方向默认值：垂直居上，水平居左
place-content: start start;
垂直居中，水平居右
place-content: center end;
垂直居下，水平居右
place-centent: end end;
place-centent: end; 这是缩写
全部居中
place-centent: center;place-items: 项目在“单元格”中对齐
单元格中必须要有剩余空间，即项目 < “单元格”
place-items 对齐方式: 垂直方向 水平方向
place-items: start start;
place-items: center end;
place-items: center;设置某个项目在单元格对齐方式
place-self: end;
place-self: start;
place-self: center end;
place-self: start end;
place-self: start center;
place-self: end center;
二、 行列间隙的设置方式
用 gap 就可以
gep: 垂直方向 水平方向
gap: 5px 10px;
gap: 5px;
三、使用场景
比如商城里面商品列表，网站头部nav导航都可以，利用网格布局，间隙分开商品之间的距离，用不着margin和padding 来做，用gird布局就简单很多，还有其他属性后期了解