4×6 Grid布局异常：子元素全部呈单列排列问题求助

问题描述 #

我尝试创建一个4×6的Grid布局，但所有子元素最终都挤在同一行，仅显示为单列效果。每个div容器内包含图片或文本内容，我已使用Grid生成器生成布局方案，但问题仍未解决。以下是我使用的代码：

HTML代码 #

<body>
    <div class="parent">
        <div class="div1">
            <img src="photos/00732ae4-9669-489c-b755-3dddc3dc0d56.png">
        </div>
        <div class="div2">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div3">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div4">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div5">
            <h1>hello world!</h1>
        </div>
        <div class="div6">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div7">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div8">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div9">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div10">
            <h1> Trying again</h1>
        </div>
        <div class="div11">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div12">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div13"><img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div14">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div15"><img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
        <div class="div16">
            <img src="photos/00f96cae-b880-4883-8ae8-0c2bcb0888f0.png">
        </div>
    </div>
</body>

原始CSS代码 #

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
}

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: center;
    align-items: center;
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.div3 {
    grid-area: 2 / 1 / 3 / 2;
}

.div4 {
    grid-area: 2 / 2 / 3 / 3;
}

.div5 {
    grid-area: 1 / 3 / 3 / 5;
}

.div6 {
    grid-area: 3 / 1 / 4 / 2;
}

.div7 {
    grid-area: 3 / 2 / 4 / 3;
}

.div8 {
    grid-area: 3 / 3 / 4 / 4;
}

.div9 {
    grid-area: 3 / 4 / 4 / 5;
}

.div10 {
    grid-area: 4 / 1 / 7 / 3;
}

.div11 {
    grid-area: 4 / 3 / 5 / 4;
}

.div12 {
    grid-area: 4 / 4 / 5 / 5;
}

.div13 {
    grid-area: 5 / 3 / 6 / 4;
}

.div14 {
    grid-area: 5 / 4 / 6 / 5;
}

.div15 {
    grid-area: 6 / 3 / 7 / 4;
}

.div16 {
    grid-area: 6 / 4 / 7 / 5;
}

问题原因与修复方案 #

核心问题 #

1. body的Grid设置多余且无高度约束：给body加display: grid完全没必要，而且body默认高度仅由内容决定，导致.parent没有足够垂直空间展开6行布局。
2. .parent的行高无法生效：grid-template-rows: repeat(6, 1fr)里的1fr需要父元素有明确高度才能分配空间，否则所有行都会塌陷成最小高度，元素挤在一起。
3. 图片可能溢出单元格：图片尺寸过大时会撑破网格，打乱布局结构。

修改后的CSS代码 #

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 移除不必要的display: grid */
    min-height: 100vh; /* 让body占满整个视口高度，给.parent提供足够垂直空间 */
}

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 20px; /* 合并行列间距，写法更简洁 */
    justify-items: center;
    align-items: center;
    min-height: 100vh; /* 给.parent设置最小高度，让1fr能均分高度 */
    padding: 20px; /* 加内边距避免内容贴边 */
}

/* 限制图片最大宽度，防止溢出单元格 */
.parent img {
    max-width: 100%;
    height: auto;
}

/* 保留原有的grid-area定位 */
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 1 / 3 / 3 / 5; }
.div6 { grid-area: 3 / 1 / 4 / 2; }
.div7 { grid-area: 3 / 2 / 4 / 3; }
.div8 { grid-area: 3 / 3 / 4 / 4; }
.div9 { grid-area: 3 / 4 / 4 / 5; }
.div10 { grid-area: 4 / 1 / 7 / 3; }
.div11 { grid-area: 4 / 3 / 5 / 4; }
.div12 { grid-area: 4 / 4 / 5 / 5; }
.div13 { grid-area: 5 / 3 / 6 / 4; }
.div14 { grid-area: 5 / 4 / 6 / 5; }
.div15 { grid-area: 6 / 3 / 7 / 4; }
.div16 { grid-area: 6 / 4 / 7 / 5; }

修改说明 #

• 去掉body的display: grid，同时设置min-height: 100vh确保页面占满视口，为网格布局提供足够空间。
• 给.parent添加min-height: 100vh，让1fr能将高度均分给6行，避免行塌陷。
• 给图片设置max-width: 100%，确保图片自适应单元格宽度，不会撑破布局。
• 用grid-gap替代分开的行列间距属性，代码更简洁。

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