How to create one vertical column in between rows in Flexbox [closed]

You have two ways to solve this. Either flexbox or CSS grid, both are good, but I prefer the CSS grid way:

Flexbox

.container {
        width: 100%;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .column {
        display: flex;
        flex-direction: column;
        height: 90%;
        width: 30%;
    }

    .box {
        background-color: gray;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30%;
    }

    .box1 {
        height: 30%;
    }
    
    .box2, .box5 {
        height: 30%;
        margin: 20px 0;
    }

    .middle {
        height: 100%;
    }
    .column-large {
        margin: 0 20px;
        width: 30%;
        height: 100%;
    }

<div class="container">
    <div class="column">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
    <div class="column-large">
        <div class="box middle">middle</div>
    </div>
    <div class="column">
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
</div>

CSS Grid

With CSS grid, this is what you can achieve. If you play around with the widths and heights, you could fit this to your needs. In case you want to know more about CSS grid in general, this article is a very good way to start: https://css-tricks.com/snippets/css/complete-guide-grid/.

.container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-areas:
            ". middle ."
            "tl middle tr"
            "ml middle mr"
            "bl middle br"
            ". middle .";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 5% 30% 30% 30% 5%;
        gap: 20px;
    }

    .box {
        background-color: gray;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box1 {
        grid-area: tl;
    }
    
    .box2 {
        grid-area: tr;
    }
    .box3 {
        grid-area: ml;
    }
    .box4 {
        grid-area: mr;
    }
    .box5 {
        grid-area: bl;
    }
    .box6 {
        grid-area: br;
    }
    .middle {
        grid-area: middle;
    }

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box middle">middle</div>
</div>

More Related Contents:

Leave a Comment Cancel reply