初识grid布局

CSS定位元素

image-20241110163644817.png

grid网格布局

新的长度单位：fr

1
一般来说 1fr 的意思是“100%的剩余空间”, .25fr 意味着“25%的剩余空间”。当时当 fr 大于 1 的时候，则会重新计算比例来分配。

image-20241110161821264.png

grid布局

1
display: grid;
1
grid-template-columns: 1fr 1fr 1fr 1fr;

等价于（repeat）

1
2
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(4, .25fr);

一般都建议使用 **fr>=1 的情况

响应式设计

这里 A 和 D 都是固定的 50px，C 是占总宽度的 20%，剩余空间就可以分配给 B。

1
2
3
4
.grid-container {
  grid-template-columns: 50px 1fr 20% 50px;
  column-gap: 10px;
}

image-20241110161302301.png

船新用法

3*3的网格

1
2
3
4
5
6
7
8
9
10
//网格布局
.face {
    display: grid;
    grid-template-rows:repeat(3,1fr);
    grid-template-columns: repeat(3,lfr);
    grid-template-areas:
        "lt . rt"
        "lc cc rc"
        "lb . rb";
}
1
2
3
4
5
6
7
8
9
10
11
//规划块布局
.lt-dot{
    grid-area: lt;
}
.lr-dot{
    grid-area: lr;
}
.lc-dot{
    grid-area: lc;
}
......

image-20241110163133135.png

相比Flex

1
2
Flex是一维布局，Grid是二维
浏览器对Flex的兼容性更好
1
2
Grid适用于大面积的整体布局
小面积组件Flex更灵活