<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS九宫格布局 1-9</title>
<style>
.demo { width: 300px; }
.demo h3 {
font-size: 15px;
color: #333;
}
/* ===== 公共：圆角容器 ===== */
[class^="wrap-"] {
border-radius: 6px;
overflow: hidden;
background: #eee;
}
.cell {
background: #e74c3c;
position: relative;
}
/* 公共行容器 */
.row {
width: 100%;
display: flex;
gap: 1px;
}
/* 公共列容器 */
.col {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.col .cell {
flex: 1;
}
.col .cell::before {
content: "";
display: block;
padding-top: 100%;
}
/* ========== 1格 ========= */
.wrap-1 { display: flex; }
.wrap-1 .cell {
width: 100%;
padding-top: 100%;
}
/* ========== 2格 ========= */
.wrap-2 { display: flex; gap: 1px; }
.wrap-2 .cell {
flex: 1;
padding-top: 50%;
}
/* ========== 3格 ========= */
.wrap-3 { display: flex; gap: 1px; }
.wrap-3 .cell-large {
flex: 2;
padding-top: 66.66%;
}
/* ========== 4格 ========= */
.wrap-4 { display: flex; gap: 1px; }
.wrap-4 .cell-large {
flex: 3;
padding-top: 66.66%;
}
/* ========== 5格 ========= */
.wrap-5 {
display: flex;
flex-wrap: wrap;
gap: 1px;
}
.wrap-5 .row-top .cell {
flex: 1;
padding-top: 50%;
}
.wrap-5 .row-bottom .cell {
flex: 1;
padding-top: 33.33%;
}
/* ========== 6格 ========= */
.wrap-6 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
}
.wrap-6 .cell {
padding-top: 100%;
}
.wrap-6 .cell-large {
grid-column: span 2;
grid-row: span 2;
padding-top: 100%;
}
/* ========== 7格 ========= */
.wrap-7 {
display: flex;
flex-wrap: wrap;
gap: 1px;
}
.wrap-7 .row-top .cell {
flex: 1;
padding-top: calc(50% - 0.5px);
}
.wrap-7 .row-bottom .cell {
flex: 1;
padding-top: calc(33.33% - 0.67px);
}
/* ========== 8格（修正版：左右两大长方 + 右侧三小矩形）========= */
.wrap-8 {
display: flex;
flex-wrap: wrap;
gap: 1px;
}
.wrap-8 .row-top .cell {
flex: 1;
padding-top: calc(50% - 0.5px);
}
.wrap-8 .row-bottom .cell {
flex: 1;
padding-top: calc(33.33% - 0.67px);
}
/* ========== 9格 ========= */
.wrap-9 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
}
.wrap-9 .cell {
padding-top: 100%;
}
</style>
</head>
<body>
<!-- 1格 -->
<div class="demo">
<h3>1格</h3>
<div class="wrap-1">
<div class="cell"></div>
</div>
</div>
<!-- 2格 -->
<div class="demo">
<h3>2格</h3>
<div class="wrap-2">
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<!-- 3格 -->
<div class="demo">
<h3>3格</h3>
<div class="wrap-3">
<div class="cell cell-large"></div>
<div class="col">
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
<!-- 4格 -->
<div class="demo">
<h3>4格</h3>
<div class="wrap-4">
<div class="cell cell-large"></div>
<div class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
<!-- 5格 -->
<div class="demo">
<h3>5格</h3>
<div class="wrap-5">
<div class="row row-top">
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row row-bottom">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
<!-- 6格 -->
<div class="demo">
<h3>6格</h3>
<div class="wrap-6">
<div class="cell cell-large"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<!-- 7格 -->
<div class="demo">
<h3>7格</h3>
<div class="wrap-7">
<div class="row row-top">
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row row-top">
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row row-bottom">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
<!-- 8格 -->
<div class="demo">
<h3>8格</h3>
<div class="wrap-8">
<div class="row row-top">
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row row-bottom">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row row-bottom">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
<!-- 9格 -->
<div class="demo">
<h3>9格</h3>
<div class="wrap-9">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</body>
</html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。