Waterfall flow layout 2

To achieve waterfall flow layout so that the images fill the first row and then the second row, you can use CSS multi-column layout to control it. Currently your layout uses column-count and column-gap to define the number of columns and the gaps between them, but this results in elements being evenly distributed between different columns.

To achieve your needs, you can consider the following methods:

Using Flexbox layout: Set the container #grid-container 's display properties to display: flex;and then add the child .item to the container. In this way, the children will be arranged in order according to the default flex behavior, first in the first row and then in the second row. The sample code is as follows:

<style> 
    #grid-container { 
        display: flex; 
        flex-wrap: wrap; /* 允许子项换行 */ 
        width: 800px;
         border: 2px solid pink; 
    } 
    .item { 
        flex: 0 0 calc(33.33% - 10px); /* 设置子项宽度为列数的 1/3，减去列之间的间隙 */                         
        margin-right: 10px; /* 列之间的间隙 */
        margin-bottom: 10px; /* 行之间的间隙 */ 
        height: auto; /* 自动计算高度 */ 
        background-size: cover; 
        background-position: center; 
        text-align: center; 
     } 
</style>

In the above example, we used Flexbox layout to arrange the children as per your requirements. You can further adjust the number of columns and gaps as needed.

Using CSS Grid Layout: Another approach is to use CSS Grid Layout to arrange elements by defining grid rows and columns. This method is more flexible and allows you to precisely control the position of each element. The sample code is as follows:

<style> 
    #grid-container { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); /* 定义三列网格 */
        grid-gap: 10px; /* 列之间和行之间的间隙 */ 
        width: 800px; 
        border: 2px solid pink; 
    } 
    .item { 
        margin-bottom: 10px; /* 行之间的间隙 */ 
        height: auto; /* 自动计算高度 */ 
        background-size: cover; 
        background-position: center;
        text-align: center;
     } 
</style>

Both methods can achieve your needs, and you can choose one of them based on the specific requirements of your project.

Case: Implement the following waterfall flow layout, and the serial numbers are arranged horizontally first and then the second line after the line break.

code

<!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">
    <title>Document</title>
</head>
<style>
    #grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 定义三列网格 */
        grid-gap: 10px; /* 列之间和行之间的间隙 */
        width: 800px;
        border: 2px solid pink;
    }

    .item {
        margin-bottom: 10px; /* 行之间的间隙 */
        height: auto; /* 自动计算高度 */
        background-size: cover;
        background-position: center;
        text-align: center;
    }

    .item:nth-child(2n) {
        height: 12em;
    }

    .item:nth-child(3n) {
        height: 14em;
    }

    .item:nth-child(4n) {
        height: 16em;
    }

    .item:nth-child(5n) {
        height: 18em;
    }

    .item:nth-child(6n) {
        height: 20em;
    }

    .item:nth-child(7n) {
        height: 22em;
    }

    .item:nth-child(8n) {
        height: 24em;
    }
</style>
<body>
    <div id="grid-container">
    </div>
</body>
<script>
    const gridContainer = document.getElementById('grid-container')  
    for(let i=0;i<7;i++){
        const item = document.createElement('div');
        const textNode = document.createTextNode(`${i}`)
        item.appendChild(textNode)
        item.classList.add("item"); 
        item.style.backgroundImage = `url(https://picsum.photos/800/600?random=${i})`
        gridContainer.appendChild(item)

    }
</script>
</html>

Waterfall flow layout 2

Guess you like