<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格布局</title>
</head>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
text-align: center;
line-height: 100px;
}
.wrapper div {
border: 1.5px solid white;
}
/*.item1{
grid-column-start: 1; 从第一个网格线开始
grid-column-end: 4; 第四个网格线结束
grid-column: 1 / 4; 以上 缩写
}*/
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>
<body>
<div class="wrapper">
<div class="item1" style="background: #ACF4B6;">1</div>
<div class="item2" style="background: #FFE975;">2</div>
<div class="item3" style="background: #5EFFFA;">3</div>
<div class="item4" style="background: #E6B4FD;">4</div>
<div class="item5" style="background: #8DFECD;">5</div>
<div class="item6" style="background: #FD9A5C;">6</div>
</div>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格布局</title>
</head>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
text-align: center;
line-height: 100px;
}
.wrapper div {
border: 1.5px solid white;
}
/*.item1{
grid-column-start: 1; 从第一个网格线开始
grid-column-end: 4; 第四个网格线结束
grid-column: 1 / 4; 以上 缩写
}*/
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>
<body>
<div class="wrapper">
<div class="item1" style="background: #ACF4B6;">1</div>
<div class="item2" style="background: #FFE975;">2</div>
<div class="item3" style="background: #5EFFFA;">3</div>
<div class="item4" style="background: #E6B4FD;">4</div>
<div class="item5" style="background: #8DFECD;">5</div>
<div class="item6" style="background: #FD9A5C;">6</div>
</div>
</body>
</html>
转载地址：https://www.qdfuns.com/article/38951/8e534b3707d3ab7b9ca5c8346ce47500.html
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
