Why isn't my image grid displaying four columns?

Question

I am trying to learn from w3 and I found image grid galleries. I tried to make one with four columns, but my last column wraps underneath my first 3.

<div class="row">
            <div class="column">
                <img src="Pictars/bubbles.jpg">
                <img src="Pictars/Bicky.jpg">
            </div>
            <div class="column">
                <img src="Pictars/surfer2.jpg">
                <img src="Pictars/Pier.jpg">
            </div>
            <div class="column">
                <img src="Pictars/oranges.jpg">
            </div>
            <div class="column">
                <img src="Pictars/nightStation.jpg">
            </div>
        </div>

if I remove flex:wrap in my css row class it works! Why doesn't it display right with flex set to wrap?

.row{
    display: flex;
    /*flex-wrap: wrap;*/
    padding: 0 4px;
    justify-content: center;
}

.column{
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

We need the CSS in an working demo. – Paulie_D Jan 05 '20 at 05:20 — Paulie_D, Jan 05 '20 at 05:20

score 0 · Answer 1 · answered Jan 05 '20 at 06:21

Remove padding or add box-sizing:border-box

.row{
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    justify-content: center;
}

.column{
    flex: 25%;
    max-width: 25%;
    box-sizing: border-box; /* New added style */
    padding: 0 4px;
    box-shadow: 0 0 10px red inset;
}

.column img{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

<div class="row">
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
    <div class="column">
        <img src="https://i.stack.imgur.com/rJhzj.jpg?s=64&g=1">
    </div>
</div>

Why isn't my image grid displaying four columns?

1 Answers1