grid-layout的部分属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>部分属性</title>
</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>
<style>
.wrapper {
<!--创建一个网格布局 -->
display: grid;
<!--创建3列网格,且每列宽度相同 repeat()是重复的功能-->
grid-template-columns: repeat(3, 1fr);
<!--网格差距是10像素-->
grid-gap: 10px;
<!--隐式创建的网格行的最小宽度是100像素,最大是auto-->
grid-auto-rows: minmax(100px, auto);
}
.one {
<!--此网格列网格线是从1到3 -->
grid-column: 1 / 3;
<!--此网格行网格线是1 -->
grid-row: 1;
}
.two {
<!--此网格列网格线是从2到4 -->
grid-column: 2 / 4;
<!--此网格行网格线是1到3 -->
grid-row: 1 / 3;
}
.three {
<!--此网格列网格线是1 -->
grid-column: 1;
<!--此网格行网格线是2到5 -->
grid-row: 2 / 5;
}
.four {
<!--此网格列网格线是3 -->
grid-column: 3;
<!-- 此网格行网格线是3-->
grid-row: 3;
}
.five {
<!--此网格列网格线是2 -->
grid-column: 2;
<!--此网格行网格线是4 -->
grid-row: 4;
}
.six {
<!--此网格列网格线是3 -->
grid-column: 3;
<!--此网格行网格线是4 -->
grid-row: 4;
}
</style>
</html>
这是我个人的理解，欢迎指出错误。
