Grid Layout

最新推荐文章于 2025-02-26 15:29:44 发布

weixin_33806300

最新推荐文章于 2025-02-26 15:29:44 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/axl1017/p/9749704.html

Grid Layout

.wrapper {
display: grid; //创建一个网格容器，所有容器子结点自动成为容器项目,grid: 生成块级网络inline-grid: 生成行内网格,sub grid: 如果容器本身是网格项，用来继承父容器的行列大小

grid-template-columns: repeat(3, 1fr); // grid-template指网络板， grid-template-columns:称作网络模板列，与网格模板区域（grid-template-areas）、网格模板行（grid-template-rows）两个属性共同显示定义一个网格容器。任何由网格模板区域定义的行或列但没有在网格模板行/网格模板列中定义尺寸，则由grid-auto-rows或grid-auto-columns属性来确定大小。grid-template-columns属性指定网格列的轨道列表。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。如果你的定义中包含重复的部分，你可以使用 repeat() 表示法进行精简，fr是一个弹性尺寸单位，可以帮助我们创建一个弹性的网格轨道。fr 单位允许你将一个轨道大小设置为网格容器内自由空间的一小部分。

grid-gap: 10px; //指定网格线的大小，也可以说是网格子项之间的间距。且间隔仅仅作用在网格子项之间，不在容器边缘,grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同。注意：grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。间距可以设置任何非负值，长度值可以是px、%、em等单位值。

grid-auto-rows: minmax(100px, auto); //grid-auto-rows属性指定隐式创建的网络行跟踪的大小。自动生成隐式网格轨道（行和列），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道，网格最小卫100；

}
.one {
grid-column: 1 / 3; //定义.one从网格线第一行开始到第二行结束

grid-row: 1; //定义.one从网格线第一行开始到第二行结束

//grid-row是grid-row-start和grid-row-end的简写。通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定的直列开始和直列边缘指定网格行内的网格项的大小和位置其网络面积。如果只提供一个值，则指定了grid-row-start值；如果提供两个值，第一个是grid-row-start的值，第二个是grid-row-end的值，两者之间必须要用“/”隔开。（默认值为auto)
background: lavender; //背景色：淡紫色；
}

.two {
grid-column: 2 / 4; //定义.one从网格线第二列开始到第四列结束
grid-row: 1 / 3; //定义.one从网格线第一行开始到第三行结束
background: lavender;/ /背景色：淡紫色；
}
.three {
grid-column: 1; //定义.one网格线第一列

grid-row: 2 / 5; //定义.one从网格线第二行开始到第五行结束
}
.four {
grid-column: 3; //定义.one网格线第三列
grid-row: 3; //定义.one网格线第三行
}
.five {
grid-column: 2; //定义.one网格线第二列

grid-row: 4; //定义.one网格线第四列
}
.six {
grid-column: 3; //定义.one网格线第三列
grid-row: 4; //定义.one网格线第四列
}

转载于:https://www.cnblogs.com/axl1017/p/9749704.html