<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.contian {
display: grid;
/* grid-template-columns: repeat(4, 1fr); */
grid-template-columns: 1fr 1fr ;
/* 三列等宽 */
grid-gap: 20px;
/* 列与列之间的间隔 */
}
.contian>div {
background-color: #ddd;
padding: 20px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="contian">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</body>
</html>第二个
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: grid;
grid-template-rows: 100px 200px 150px; /* 定义三行，每行不同高度 */
grid-template-columns: 3fr 1fr; /* 定义两列，第一列 占三分 第二列占一分*/
grid-template-areas:
"header sidebar"
"main sidebar"
"footer sidebar";
gap: 10px;
}
.item {
background-color: #ddd;
/* padding: 20px; */
/* margin: 10px; */
text-align: center;
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
</style>
<title>带有区域的网格布局</title>
</head>
<body>
<div class="container">
<div class="item header">1</div>
<div class="item main">1</div>
<div class="item footer">1</div>
<div class="item sidebar">1</div>
</div>
</body>
</html>
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
