参考博客:《CSS Grid 网格布局教程》
使用场景
网格布局使用场景:九宫格图片展示、日历布局、自定义键盘布局
主要概念
容器(最外成元素)
容器可以是块级的,也可以是行级的
display: grid // 块级
display: inline-grid; // 行内元素
容器主要定义网格布局有几行几列以产生多少个单元格(这些单元格成为项目),例如3行3列则产生9个单元格
定义行列
// 产生3行3列,每行的高度100px,每列的宽度100px
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
// 可以只设置第一行的列数,后面多余的元素会根据第一行的样式进行布局
// 也可以使用百分比
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
// 简化写法
// repect()函数:第一个参数是重复的次数,第二个参数是所要重复的值
.container {
display: grid;
grid-template-columns: repeat(3, 100p