<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 10px;
grid-template-areas:
"area1 area2 area3 area4"
"area5 area5 area5 area6";
}
.item {
padding: 20px;
border: 1px solid #ccc;
}
.area1 {
grid-area: area1;
}
.area2 {
grid-area: area2;
}
.area3 {
grid-area: area3;
}
.area4 {
grid-area: area4;
}
.area5 {
grid-area: area5;
}
.area6 {
grid-area: area6;
}
</style>
<title>Grid Example</title>
</head>
<body>
<div class="grid-container">
<div class="item area1">Item 1</div>
<div class="item area2">Item 2</div>
<div class="item area3">Item 3</div>
<div class="item area4">Item 4</div>
<div class="item area5">Item 5 (merged)</div>
<div class="item area6">Item 6 (merged)</div>
</div>
</body>
</html>
grid布局实现各个端(pc,ipad,手机端)的适配
于 2024-01-02 16:06:54 首次发布