首先看效果图
image.png
代码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container_big_box">
<div class="item content_grid1">1</div>
<div class="item content_grid2">2</div>
<div class="item content_grid3">3</div>
<div class="item content_grid4">4</div>
<div class="item content_grid5">5</div>
<div class="item content_grid6">6</div>
<div class="item content_grid7">7</div>
<div class="item content_grid8">8</div>
<div class="item content_grid9">9</div>
</div>
</body>
</html>
css
.container_big_box {
display: grid;
grid-template-rows: 60px 60px 60px;
/*共三行，每行行高60px*/
grid-template-columns: 60px 60px 60px;
/*共三列，每列列宽60px*/
}
.item {
font-size: 24px;
text-align: center;
border: 1px solid #000;
line-height: 60px;
color: white;
}
.content_grid1,
.content_grid2,
.content_grid3 {
background: red;
}
.content_grid4,
.content_grid5,
.content_grid6 {
background: green;
}
.content_grid7,
.content_grid8,
.content_grid9 {
background: blue;
}
注意：在使用了网格布局后，子元素float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
以上是今天总结的一部分，后续还会带来更多内容，欢迎关注支持。
网友评论