CODEWITHSUNDEEP
htmlcssflexbox
Lullaby
Lullaby

Reputation: 21

I need a help building a layout of 3 columns with FLEXBOX

I'm going to leave 3 examples, and I need the second example to look the same as the third one without having to specify measurements manually, and using flexbox, Also the third example is not responsive, if I shrink the container, it breaks. Thanks for reading!



<div id="one">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<div id="two" class="space">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<div id="three" class="space">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(146, 55, 158);
    gap: 75px;
}

div {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    outline: 1px solid #fff;
    width: 300px;
    height: 300px;
}

p {
    outline: 1px solid #fff;
    width: calc(100% / 3);
    height: calc(100% / 3);
}

.space {
    padding: 10px;
    gap: 10px;
}

#three p {
    width: 86.67187118px;
    height: 86.67187118px;
}

enter image description here

I'm trying to make this kind of layout without using Grid, I've been trying for a long time and I can't get anything, if you help me I would be very grateful.

Upvotes: 0

Views: 779

Answers (1)

dbonev
dbonev

Reputation: 402

Please try this:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
}

.inner-item {
    width: 33.33%;
    box-sizing: border-box;
}


<div class="container">
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
    <span class="inner-item"></span>
</div>

Upvotes: 1

Related Questions