CSS - Grid网格布局

参考博客：《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