3列任意行
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); // 三列,每列1fr,自动填充宽度,类似: flex: 1
grid-gap: 10px; // 每列每行之间的间隙为10px, 语法: [<grid-row-gap>, <grid-column-gap>] 同时设置两个
// grid-column-gap: 10px; // 单独设置列之间的间距
// grid-row-gap: 5px; // 单独设置行之间的间距
}
单独定义每列的宽度
.grid {
display: grid;
grid-template-columns: 100px 1fr 100px; // 三列: 100px 1fr自动填充 100px
// grid-template-columns: 50px repeat(2, 1fr) 50px; // 这是4列: 50px 1rf 1rf 50px
grid-gap: 10px; // 每列每行之间的间隙为10px
}
定义子元素的溢出
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); // 定义三列的表格
grid-gap: 10px;
}
.span-col-3{
grid-column: span 3 / auto; // 此子元素的宽度将占据3列,默认是auto
}
.span-row-2{
grid-row: span 2 / auto; // 此子元素的高度将占据2行,默认是auto
}
定义行
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 20px 20px; // 定义三行,每行的高度分别是: auto(flex: 1) 20px 20px
// grid-template-rows: auto; // 对每一行都将起作用, 平分父节点的高度
}
grid-auto-rows: minmax(100px, auto); // 行最小和最大值
// 改变网格线
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
格子对齐盒子
align-self: start; 向上看齐
align-self: end; 向下看齐
align-self: center; 垂直居中
align-self: baseline; 也是向上看齐
align-self: stretch; 也是向上看齐,并让子项目填充flex项目的高度
子元素居中
body {
display: grid;
padding: 0px;
margin: 0px;
height: 100vh;
/* justify-items: center;
align-items: center; */
place-items: center;
}
grid-template-areas 文档
grid-template-areas CSS 属性是网格区域 grid areas 在CSS中的特定命名。
display: grid;
grid-template-columns: 80% auto;
grid-template-rows: auto auto;
// 下面是两行两列
grid-template-areas:
"title switch"
"content .";