Grid布局

Grid布局

---

---

前言

grid布局是将盒子划分成一个表格，然后确定这个表格以及每个单元格的布局。

容器属性

一、给一个盒子划分单元格

每个item都是box-content模型
// auto基本上等于该列单元格的最大宽度
grid-template-columns: 100px auto;
grid-template-rows: 200px;
// minmax()函数确定最大最小值
// fr相当于flex中计算剩余宽度是份数
grid-template-columns: 100px minmax(400px, 1fr);

二、设置间距

// 这个间距不算在item的margin当中
column-gap: 20px;
row-gap: 20px;

三、设置表格居中和单元格居中

justify-content和align-content设置的是整个表格在container中的布局。

justify-content: center;
align-content: center;

justify-items和align-items设置的是单元格在item中的布局。

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

项目属性

一、grid-row/column-start/end属性

定义该项目占几个单元格
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

二、设置单元格内容水平垂直居中

justify-self属性设置单元格内容的水平位置（左中右）
align-self属性设置单元格内容的垂直位置（上中下）

但是居中效果并不好，没有内容的地方没有bgc?

可以在item中使用display: grid;

 justify-content: center;
  align-content: center; 

或者

  justify-items: center;
  align-items: center;

参考博文：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html