通过display
属性给容器设置grid
属性,
设置列
/* 默认显示一列 */
display: grid;
/* 设置列,设置3列,每列100px */
grid-template-columns: 100px 100px 100px;
/* 设置列,设置12列,每列50px */
grid-template-columns: repeat(12, 50px);
/* 设置列,每列100px,自动换行 */
grid-template-columns: repeat(auto-fill, 100px);
/* 设置列,每列最小值150px,最大值1fr */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
/* 设置列,每列占三分之一 */
grid-template-columns: 1fr 1fr 1fr;
设置行
/* 设置行高 */
grid-template-rows: 100px;
/* 设置默认行高 */
grid-auto-rows: 100px;
设置间隙
/* 设置行的间隙 */
grid-column-gap: 10px;
/* 设置列的间隙 */
grid-row-gap: 10px;
/* 简写 <设置行和列的间隙都为20px> */
gap: 20px 20px;
设置元素的布局
.box {
/* 第一行header占2格 */
grid-template-areas:
"header header";
}
.header {
/* 给元素取名 */
grid-area: header;
}