CODEWITHSUNDEEP
cssflexboxcss-grid
Théo Benoit
Théo Benoit

Reputation: 587

CSS Grid auto adjust width on each rows

I've some little boxes to place, and I have some row of boxes which have like : 3 boxes then 2 boxes on the second row etc...

What I have made so far, was based on flexbox (not really easy to "play" with), so I tried with grid, and have a little problem. What I've made in flexbox (it's what I want on desktop, but of course, when resizing it don't fit properly). Here is what it do with flexbox :

enter image description here

But then, when I resize the browser :

enter image description here

So, I know that flexbox isn't really made to do grid like that. So I tried another way, using grid. I know how it's work to make a grid with the same content on each rows, but I don't know how to do it without the same content.

Here is a little snippet of what I've imagine :

.boxes_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 30px;
}
<div class="boxes_container">
  <div class="box">
    <img src="http://placehold.it/347x252">
  </div>
  <div class="box">
    <img src="http://placehold.it/347x252">
  </div>
  <div class="box">
    <img src="http://placehold.it/347x252">
  </div>
  <div class="box">
    <img src="http://placehold.it/538x240">
  </div>
  <div class="box">
    <img src="http://placehold.it/538x240">
  </div>
</div>

I have tried with auto-fill to, but It don't work. I'm pretty sure the answer is not that hard, but It's might be a fonction or I don't know, when I searched on Google I saw a function "fit-content()" but don't really know if that would work there. Tried to do something with that, but didn't worked out.

Thanks for your help.

Upvotes: 0

Views: 851

Answers (1)

Moose
Moose

Reputation: 333

Do either of these layout examples come close to what you are trying to achieve? - you will need to resize browser window to see the collapsing layout.

1) 3,2 >> 2,1,2 >> 1,1,1,1,1

https://codepen.io/FEARtheMoose/pen/WgOwRV?editors=1100#0

2) 3,2 >> 1,1,1,1,1

https://codepen.io/FEARtheMoose/pen/KxqzoV?editors=1100#0

Also here is an example of what i mean by if you could have 6 boxes in a 3,3,2 it would collapse down neater. https://codepen.io/FEARtheMoose/pen/rZwevy?editors=1100#0

Upvotes: 1

Related Questions