1028作业（实例演示隐式网格, 对齐方式与行列间隙的设置方式与使用场景、前提）

实例演示隐式网格

对齐方式与行列间隙的设置方式与使用场景、前提

一、 对齐方式

用两个属性来表示

• 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布局就简单很多，还有其他属性后期了解