1

As the picture describes, I want to wrap items as such.

enter image description here

This is my current HTML and CSS.

<div class="column-container">

<div class="col item">1 <- More text and thus taller than the other ones</div>
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>

</div>


    .column-container {
        display: flex;
        justify-content: center;
        flex-flow: row wrap;
        height: 100%;
    }

    .item {
        height: fit-content;
        min-width: 300px;
        max-width: 300px;
        margin: 10px;
    }

Here's a fiddle as well..

https://jsfiddle.net/3Ly5zh4n/1

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
davidzki
  • 11
  • 2

3 Answers3

1

Flexbox is probably not the best choice for this since flexbox is used to display content next to each other either vertical or horizontal. I'd suggest using CSS Grid instead. It might be a new area for some, but it's a quite good choice for handling columns in CSS.

The following is an example of how it can be used. The method repeat(auto-fill, ...) fills the whole container with either a full fraction for each element, or the minimum width of 150px, which should be 300px in your case.

.column-container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 grid-template-rows: 1fr 1fr;
 grid-gap: 10px;
 height: 300px;
}

.item {
 display: flex;
 justify-content: center;
 align-items: center;
 
 font-size: 36px;

 color: white;
 background-color: red;
}

.item--first {
 grid-row: 1 / span 2;
}
<div class="column-container">
 <div class="item item--first">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
</div>

I'd suggest reading css tricks A Complete Guide to Grid for further information. Hope this helps a bit.

Phoenix1355
  • 1,589
  • 11
  • 16
  • Thanks a lot. This works as intended. The items aren't centered in the column-container now though. justify-content: center does nothing to it. How do I do that? Thanks in advance. – davidzki Sep 13 '19 at 09:07
  • You can give the `column-container` another contain that centers it using flexbox. – Phoenix1355 Sep 13 '19 at 09:10
  • If you feel that my answer helped you, you could [accept my answer](http://meta.stackexchange.com/a/5235). – Phoenix1355 Sep 26 '19 at 11:12
0

 .column-container {
        display: flex;
       
        flex-flow: row wrap;
        height: 100%;
    }

    .item {
        height: fit-content;
        min-width: 150px;
        max-width: 150px;
        margin: 10px;
        border: 1px solid black;
    }
<div style="display: flex;justify-content: center">
<div class="column-container">
<div class="col item" style="height: 100px;">1 <- More text and thus taller than the other ones</div>
</div>
<div class="column-container">
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>
</div>
</div>
tanvi korgaonkar
  • 363
  • 1
  • 6
0

I think this this will do what you want. Its a simpler approach but it behaves the way you explain in your requested image.

HTML:

<div>
    <ul>
        <!-- I have set the height of this li to 300px to demo the concept. -->
        <li class="col item" style="height: 300px">
            1 More text and thus taller than the other ones.
        </li>
        <li class="col item">2</li>
        <li class="col item">3</li>
        <li class="col item">4</li>
        <li class="col item">5</li>
    </ul>
</div>

CSS:

ul {
    padding: 0;
}

ul .item {
    list-style: none;
    float: left;
    height: 100px;
    width: 300px;
    margin: 10px;
    border: 1px solid red;
}

This should give you a result of:

Result layout

Hope this helps...

Terence
  • 1
  • 1