0

I have the following scenario in my website:

enter image description here

To explain, I have 3 columns, and every cell is going to have a different height, and I would like to wrap it so that it doesn't wrap the entire row, but rather it wraps and positions the elements properly like this:

enter image description here

My current css settings:

.article {
    flex-basis: 33.333%;
    align-self: flex-start;
    padding: 10px;    
    border:1px solid green;
    white-space: nowrap
}

.flex {
    display: flex;
}

.f-wrap {
    flex-wrap: wrap;
}

Snippet of the HTML code:

<div class="b-section flex f-wrap v-margin-2">
    <div class="article"></div>
    <div class="article"></div>
    <div class="article" style="height: 200px"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>          
</div>

I've also tried with display grid, but I'm still getting this:

enter image description here

.articles {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}

.article {
  align-self: flex-start;
  padding: 10px;
  border: 1px solid green;
}

.grid {
  display: grid;
}
<div class="b-section articles grid v-margin-2">
  <div class="article"></div>
  <div class="article"></div>
  <div class="article" style="height: 200px"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
</div>
Adam
  • 5,495
  • 2
  • 7
  • 24
gmmk
  • 69
  • 5
  • Perhaps look at grid, in particular the [grid-auto-flow: dense](https://css-tricks.com/almanac/properties/g/grid-auto-flow/) property? – Adam Jun 26 '23 at 14:17
  • I've looked at some examples, but in all of them they're setting the height manually of every cell. In My case the height of every element will be detrmined by the cell contents which will be an image taken from database – gmmk Jun 26 '23 at 14:18
  • I think you're probably looking at something like masonry layout. I think firefox does it out of the box but the reality is you're looking at a third-party solution. There are a few out there that look pretty decent. – Adam Jun 26 '23 at 14:22
  • Yes exactly, can I achieve that with just flex display? – gmmk Jun 26 '23 at 14:24
  • Also I've just tried your suggestion of using a grid display, I did and you can reload this page I've edited the post to include also my attempt of implementing it with a grid display, without success. – gmmk Jun 26 '23 at 14:25

0 Answers0