介绍。容器{
显示:网格;
grid-template-columns: 1 fr 1 fr 1 fr 1 fr 1 fr;
grid-template-rows: 120 px 120 px;
边界:固体# ff6a00 1 px;
}
.GridItem1 {
grid-column: 1/2;
行:1/2;
background - color: # ff9c9c;
}
.GridItem2 {
grid-column: 2/3;
行:1/2;
background - color: # ffcb70;
}
.GridItem3 {
grid-column: 3/4;
行:1/2;
background - color: # fffd70;
}
.GridItem4 {
grid-column: 4/5;
行:1/2;
background - color: # b0ff70;
}
.GridItem5 {
grid-column: 5/6;
行:1/2;
background - color: # 7 ee68d;
}
.GridItem6 {
grid-column: 1/2;
行:2/3;
background - color: # 7 ee6e2;
}
.GridItem7 {
grid-column: 2/3;
行:2/3;
background - color: # 95 a7f5
}
.GridItem8 {
grid-column: 3/4;
行:2/3;
background - color: # d095f5;
}
.GridItem9 {
grid-column: 4/5;
行:2/3;
background - color: # f5aee4;
}
.GridItem10 {
grid-column: 5/6;
行:2/3;
background - color: # edc3a4;
}
身体
这篇文章将为大家详细讲解有关网格布局中如何以区域和页面整体宽度的比率指定网格宽度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在网格布局(网格布局)中,你可以将网格的宽度指定为显示区域或整个页面的宽度的比例,但如果将网格的宽度指定为比例,则需要使用法文为单位,具体内容:
我们话不多说,直接来看具体的例子
代码如下:
编写以下HTML文件
SimpleGridFr。css
SimpleGridFr。html
头 身体<>項目1
項目2
項目3
項目4
項目5
項目6
項目7
項目8
項目9
項目10