如何使用正确CSS实现边距统一的响应式网格布局

原有写法存在三个必然导致布局异常的硬伤：

• 依赖float布局+硬编码负margin、固定高度做位置偏移，图片尺寸随视口宽度变化时，所有写死的偏移值会完全错位
• 间距规则混乱，不同元素零散使用2px、20px、36px等多组边距值，无法实现统一对齐
• 未做响应式适配，小屏下列宽挤压会导致内容变形、溢出

使用CSS Grid实现不规则网格，不需要任何硬编码偏移，天然适配响应式，间距可以统一控制：

替换原有自定义CSS代码 #

body {
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
}

/* 网格容器 */
.focus_area {
    width: 100%;
    display: grid;
    /* 桌面端3列等宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 统一控制所有块的间距，无需单独给元素加padding/margin */
    gap: 4px;
}

/* 通用图片卡片样式 */
.focus {
    position: relative;
    width: 100%;
    /* 强制卡片为正方形，和参考图比例一致 */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.focus img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.focus p {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-size: 22px;
    font-weight: 500;
}

/* 文本块 跨2列2行，自动匹配参考图的中间位置 */
.focus_text {
    grid-column: span 2;
    grid-row: span 2;
    padding: 36px;
    background: rgb(156, 166, 104);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.focus_text h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 3vw, 2rem);
    line-height: 1.4;
}

/* 移动端响应式适配：屏幕宽度小于768px时切换为单列布局 */
@media (max-width: 767px) {
    .focus_area {
        grid-template-columns: 1fr;
    }
    .focus_text {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 1 / 1;
        padding: 24px;
    }
}

调整HTML结构 #

只需要把.focus_text块移动到第三个图片卡片后面即可，Grid会自动按规则分配位置，不需要额外加偏移样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="focus_area">
            <div class="focus">
                <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="Cities & Shelters" class="img-fluid" />
                <p>Cities & Shelters</p>
            </div>
            <div class="focus">
                <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="Education & Training" class="img-fluid" />
                <p>Education & Training</p>
            </div>
            <div class="focus">
                <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="Food & Water" class="img-fluid" />
                <p>Food & Water</p>
            </div>
            <!-- 文本块放在此处，Grid自动分配跨2列2行的位置 -->
            <div class="focus_text">
                <h2>Delivering Humanitarian Relief Throughout The World</h2>
            </div>
            <div class="focus">
                <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="Energy & Environment" class="img-fluid" />
                <p>Energy & Environment</p>
            </div>
            <div class="focus">
                <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="Jobs & Business" class="img-fluid" />
                <p>Jobs & Business</p>
            </div>
            <div class="focus">
                <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="Health & Fitness" class="img-fluid" />
                <p>Health & Fitness</p>
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>
</body>
</html>

• 完全移除了浮动、硬编码偏移、固定高度，所有网格位置由浏览器自动计算，任何视口尺寸下都不会错位
• 所有块的间距由gap属性统一控制，不会出现边距不一致的问题
• 图片卡片通过aspect-ratio和object-fit保证正方形比例，图片不会拉伸变形
• 文本块自动居中，文字大小随视口自适应，不会出现溢出
• 移动端自动切换单列布局，适配手机访问场景

内容的提问来源于stack exchange，提问作者Zareen