前言
说实话,长这么大还从没用过栅格布局,都是在各个css面试题上了解,今天来系统的学习一下。
知识点
.father {
display: grid;
/* display: inline-grid; */
border: 1px solid #000;
width: 1000px;
height: 600px;
/* grid-template-columns: 100px 100px 100px; 3列,每一列的列宽均是100px */
/* grid-template-rows: 100px 100px 100px; 3行,每一行的行高均是100px */
/* grid-template-columns: repeat(3, 100px); /* 3列,每一列的列宽均是100px,repeat可以重复 */
/* grid-template-rows: repeat(3, 100px); /*3行,每一行的行高均是100px,repeat可以重复*/
}
.father div {
border: 1px solid #000;
}
九宫格
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
使得盒子内部的每一列宽度都是100px,使得盒子内部的每一列行高度都是100px。
两栏式布局
display: grid;
grid-template-columns: 70% 30%;
空隙九宫格
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-row-gap: 20px; //缝隙
grid-column-gap: 20px; //缝隙