Grid网格布局学习笔记
盒子网格化
.box {
display: grid; // 使.box盒子拥有网格布局的结构
}
行列设置
网格布局的盒子需要明确的宽高
.box {
width: 300px;
height: 300px;
display: grid;
}
行列设置尺寸
.box {
grid-template-rows: 100px 100px 100px; // 行数量为3，每行的高度为100px
grid-template-columns: 100px 100px 100px; // 列数量为3，每列的宽度为100px
}
行列设置百分比
百分比是相对于当前盒子的宽高
.box {
grid-template-rows: 33.33% 33.33% 33.33%; // 行数量为3，每行的高度为盒子高度的33.33%
grid-template-columns: 33.33% 33.33% 33.33%; // 行数量为3，每列的宽度为盒子宽度的33.33%
}
repeat函数
repeat两个参数，请确保有应该参数是固定的
在上面示例中，为了设置行和列占用相同尺寸，需要重复书写相同的尺寸，为了简化代码，可以使用repeat函数
.box {
grid-template-rows: repeat(3, 100px); // 行数量为3，每行的高度为100px
grid-template-columns: repeat(3, 100px); // 行数量为3，每行的宽度为100px
}
auto-fill自动分配
在上面使用repeat函数填充整个盒子时，需要自行计算所占块数量，显得很麻烦，可以使用auto-fill让css自动计算填充整个行和列所需要的块数量
.box {
grid-template-rows: repeat(auto-fill, 100px); // 计算得出行数量为3，每行的高度为100px
grid-template-columns: repeat(auto-fill, 100px); // 计算得出行数量为3，每行的宽度为100px
}
fr单位
无论是使用百分比还是像素，当填充整个盒子时，都需要自行计算所占高度或宽度，但是有时我们只需要让他们按照固定比例分配就可以了
.box {
grid-template-rows: repeat(3, 1fr); // 行数量为3，每行的高度为盒子高度三份中的一份
grid-template-columns: repeat(3, 1fr); // 行数量为3，每行的宽度为盒子宽度三份中的一份
}
minmax函数
在使用auto-fill时，网格盒子的宽高就具有性，minmax函数定义了一个长宽范围的闭区间
.box {
grid-template-rows: repeat(auto-fill, minmax()); // 计算得出行数量为3，每行的高度为100px
grid-template-columns: repeat(auto-fill, 100px); // 计算得出行数量为3，每行的宽度为100px
}
gap
设置内部元素块的边距，不止在grid布局中可以使用，在flex布局中也可以使用
.box {
row-gap: 10px;
column-gap: 10px;
gap: 10px;
}
放置位置
栅格编号
默认情况下，只设置起始位置，元素之后占一格空间
-1 代指最后一行（列）的线
.element {
grid-row-start: 1;
grid-row-end: -1;
grid-column-start: 1;
grid-column-end: -1;
}
栅格命名
.box {
grid-template-rows: [r1-start] 1fr [r1-end r2-start] 1fr [r2-end r3-start] 1fr [r3-end];
grid-template-columns: [c1-start] 1fr [c1-end c2-start] 1fr [c2-end c3-start] 1fr [c3-end];
}
.element {
grid-row-start: r2-start;
grid-row-end: r3-start;
grid-column-start: c2-start;
grid-column-end: c3-start;
}
重复栅格命名
.box {
grid-template-rows: repeat(3, [r-start] 1fr [r-end]);
grid-template-columns: repeat(3, [c-start] 1fr [c-end]);
}
.element {
grid-row-start: r-start 1;
grid-row-end: r-end 3;
grid-column-start: c-start 1;
grid-column-end: c-end 3;
}
偏移量定位
只能end使用
.element {
grid-row-start: 2;
grid-row-end: span 1;
grid-column-start: 2;
grid-column-end: span 1;
}
简写定位
.element {
grid-row: 2 / span 1;
grid-column: 1 / -1;
}
区域定位
.element {
grid-area: 2 /2 / span 1 / span 1;
}
划分区域
.box {
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 60px 1fr;
grid-template-areas: "header header" "nav main" "footer footer";
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}
使用划分区域生成的边线
header{
grid-area: header-start / nav-end / nav-end/ main-end; // 使用边线划分区域
}
划分区域省略
.box {
grid-template-areas: ". ." ". ." "footer footer";
}
