grid布局
grid布局
概念
将一个盒子划分成多个单元格，指定内容放到指定的单元格中，实现一种比较整齐的布局方式。
容器的属性
声明网格布局
display: grid/inline-grid;
grid会将元素的类型设置成块元素，而nline-grid会把元素转换为行内块元素。
划分行、划分列
grid-template-rows: 值。
grid-template-columns: 值。例如：
1.取像素值
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
2. 取百分比
grid-template-rows: 30% 40% 30%;
grid-template-columns: 30% 40% 30%;
3.划分的行跟列的高度都是一样的话 可以使用repeat来搭配使用
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
4.百分比和具体像素可以搭配使用
grid-template-rows: repeat(3, 100px);
grid-template-columns: 70px repeat(3, 20%) 20px;
5.根据单元格的宽和高自动划分自动划分行和列
300px*3=90px 每行90 300-90*3=30 还剩余30像素
grid-template-rows: repeat(auto-fill, 30%);
300px*4=120px 每行120 300/120 整数为2 所以为2行 300-120*2=60 还剩余60像素没有分配
grid-template-columns: repeat(auto-fill, 40%);
6.划分行和列还可以设置分数 fr
grid-template-rows: 1fr 3fr 2fr;
grid-template-columns: 1fr 3fr 2fr;
7.划分行和列设置最大值和最小值 minmax
grid-template-rows: 100px 110px minmax(50px, 150px);
grid-template-columns: 100px 40px minmax(20px, 120px);
8.auto可以代替具体值 自动填充
grid-template-rows: 100px auto 50px;
grid-template-columns: auto 60px 100px;
/* 网格的间距 列间距 grid-column-gap 行间距grid-row*/
/* grid-column-gap: 100px; */
/* grid-row-gap: 100px; */
/* 网格的间距的复合写法 grid-gap*/
/* 第一个值是行间距 第二个值是列间距 */
/* grid-gap: 100px 50px; */
/* 规划子元素的排列方向 row/column 默认是row */
/* grid-auto-flow 默认的排列方式是row column的排列方式 是竖着排序 是box这个盒子子元素div的排序方式 */
/* grid-auto-flow: column; */
/* 内容在单元格的水平对齐方式 justify-items: start/end/center/stertch 默认是start */
/* justify-items: start; */
/* justify-items: end; */
/* justify-items: center; */
/* justify-items: stertch 是拉伸 只要盒子设置宽度高度 stertch自动失效 */
/* 内容在单元格的垂直对齐方式 align-items: start/end/center/stertch 默认是start */
/* align-items: start; */
/* align-items: end; */
/* align-items: center; */
/* 是拉伸 只要盒子设置宽度高度 stertch自动失效 */
/* align-items: stertch */
/* 复合写法 place-items: 垂直对齐方式 水平对齐方式 */
/* place-items: center center; */
