如何堆叠Div铺满容器宽高？仿iPhone相册布局问题

我想模仿iPhone相册的布局效果，目前用Flexbox堆叠Div，但因为Div宽高不一，没法实现正确的堆叠，也没法让Div铺满整个页面。

当前效果：

想要实现的iPhone相册效果：

原示例代码 #

原CSS代码 #

#container {
    display: flex;
    flex-direction: column;
    flex-flow: row wrap;
    height: 600px;
    width: 300px;
    border-radius: 35px;
    background-color: red;
}

.photo {
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 10px;
    border: 2.5px solid white;
}

.photo.big {
    width: 150px;
    height: 250px;
    background-color: blue;
    border-radius: 10px;
    border: 2.5px solid white;
}

原HTML代码 #

<!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 rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo big"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
    </div>
</body>
</html>

解决方案：使用CSS Grid实现不规则布局 #

Flexbox是一维布局系统，擅长单行/单列排列，对于这种需要二维空间分配的不规则网格，CSS Grid是更合适的选择。通过定义网格行列规则，指定元素占据的网格区域，可完美复刻iPhone相册布局。

修改后的CSS代码 #

#container {
    display: grid;
    /* 定义3列等宽网格 */
    grid-template-columns: repeat(3, 1fr);
    /* 行高随内容自动调整 */
    grid-auto-rows: auto;
    height: 600px;
    width: 300px;
    border-radius: 35px;
    background-color: red;
    /* 网格元素间距 */
    gap: 5px;
    padding: 10px;
    /* 内边距计入容器宽高 */
    box-sizing: border-box;
}

.photo {
    background-color: blue;
    border-radius: 10px;
    border: 2.5px solid white;
}

/* 大图占据2列2行 */
.photo.big {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
}

修改后的HTML代码（仅调整元素顺序适配网格） #

<!DOCTYPE html>
<html lang="zh-CN">
<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 rel="stylesheet" href="styles.css">
    <title>iPhone相册布局</title>
</head>
<body>
    <div id="container">
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo big"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
        <div class="photo"></div>
    </div>
</body>
</html>

关键说明 #

1. grid-template-columns：通过repeat(3,1fr)创建3列等宽网格，自动平分容器宽度。
2. grid-column/grid-row：控制大图的网格占据范围，span 2表示跨越2个列/行。
3. gap：统一设置元素间距，替代手动计算边框留白，布局更简洁。
4. box-sizing: border-box：确保容器内边距和边框包含在指定宽高中，避免布局溢出。

调整后元素会自动填满容器，实现和iPhone相册一致的不规则堆叠效果。

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