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