Grid部分属性的应用

最新推荐文章于 2024-09-20 13:44:15 发布

weixin_33726318

最新推荐文章于 2024-09-20 13:44:15 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dxz1/p/9704787.html

本文深入讲解了CSS Grid布局的使用方法，包括grid-template-columns、grid-gap、grid-auto-rows等属性的详细解释，并通过实例展示了如何利用这些属性来创建复杂的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置填充属性</title>
<style type="text/css">/**/
.wrapper {
display: grid;/*定义一个块状的网格容器*/
grid-template-columns: repeat(3, 1fr);/*grid-template-columns定义网格宽属性，repeat定义容器重复部分，代码中表示重复三份，fr单元允许你将网格容器中的自由空间设置为一个份数，
*/
grid-gap: 10px;/*指定网格线的大小，也可以说是网格子项之间的间距。且间隔仅仅作用在网格子项之间，不作用在容器边缘。*/
grid-auto-rows: minmax(100px, auto);/*自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。网格高最小为100*/
}
.one {
grid-column: 1 / 3;/*定义.one从网格线第一列开始到第三列结束*/
grid-row: 1;/*定义.one从网格线第一行开始到第二行结束*/
background-color: red;
}
.two {
grid-column: 2 / 4;/*定义.one从网格线第二列开始到第四列结束*/
grid-row: 1 / 3;/*定义.one从网格线第一行开始到第三行结束*/
background-color: green;
}
.three {
grid-column: 1;/*定义.one从网格线第一列开始到第二列结束*/
grid-row: 2 / 5;/*定义.one从网格线第二行开始到第五行结束*/
background-color: green;
}
.four {
grid-column: 3;/*定义.one从网格线第三列开始到第四列结束*/
grid-row: 3;/*定义.one从网格线第三行开始到第四行结束*/
background-color: green;
}
.five {
grid-column: 2;/*定义.one从网格线第二列开始到第三列结束*/
grid-row: 4;/*定义.one从网格线第四行开始到第五行结束*/
background-color: green;
}
.six {
grid-column: 3;/*定义.one从网格线第三列开始到第四列结束*/
grid-row: 4;/*定义.one从网格线第四行开始到第五行结束*/
background-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>