使用Grid Template Areas实现指定色块布局的技术求助

核心思路 #

通过grid-template-areas明确划分布局区域，将紫色块（violet）分配到跨4列、占4行的连续区域，同时重新规划红色、蓝色块的位置，完全贴合目标布局需求。

修改后的CSS代码 #

body, html {
    height: 100vh;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 800px;
    height: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 15px;
    /* 定义布局区域：第一行全为红色，第2-5行全为紫色，第6行前两列空白、后两列为蓝色 */
    grid-template-areas:
        "red red red red"
        "violet violet violet violet"
        "violet violet violet violet"
        "violet violet violet violet"
        "violet violet violet violet"
        ". . blue blue";
}

.container div {
    border-radius: 20px;
}

.red {
    background-color: rgb(199, 48, 48);
    grid-area: red;
}

.violet {
    background-color: violet;
    grid-area: violet;
}

.blue {
    background-color: rgb(35, 35, 121);
    grid-area: blue;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Grid</title>
</head>
<body>
    <div class="container">
        <div class="red"></div>
        <div class="violet"></div>
        <div class="blue"></div>
        <div class="blue"></div>
    </div>
</body>
</html>

关键说明 #

1. 区域合并逻辑：grid-template-areas中，相同名称的标识会自动合并为连续块，.代表空白占位区域，无需额外添加空div。
2. 精简结构：不再需要重复的div填充每行，单个块元素通过grid-area指定所属区域后，即可自动占据对应范围，大幅简化HTML代码。
3. 保留原有配置：容器的宽高、行列尺寸、间距均维持初始设置，仅调整布局规则适配需求。

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