0

Here is a small code I've done

https://codepen.io/Scipionh/pen/yLabxWx

My requirements are the followings:

  • each item has to have the same width (apart from the other block)
  • the width of the container is defined and I need to have items touching its border
  • I have an unknown number of items (here 8 before the other block but it may be more or less)
  • the Other block should span over all the remaining columns in the row it is in

In my example, I would like to have the Other block fitting in the second row.

Basically the culprit here is

grid-column: 2/-1;

as 2 is an hardcoded value.

I KNOW this is a flexbox job as we want to consume the remaining space (and have already done it with it) !

But any idea how to fix my grid solution?

Cheers

Scipion
  • 11,449
  • 19
  • 74
  • 139
  • as I commented in your previous deleted question, this is a flexbox job, there is nothing in CSS grid *fill remaining columns* Unless you write a ton of media query to cover each case individually – Temani Afif Dec 17 '20 at 11:27
  • read the point (6) in the accepted answer of the duplicate – Temani Afif Dec 17 '20 at 11:28
  • @TemaniAfif If you read what I wrote, you could clearly see that I have done it correctly with flex. So I am aware "this is a flexbox job". The question was more about, how to do it with grid and I was aware there was no "native property" to do it. So the question was more about how to tweak my html/css to achieve it. So not really a duplicate mate. You mentioned it could be done with "tons of media query", you may propose a solution ? – Scipion Dec 17 '20 at 11:44
  • https://stackoverflow.com/a/56339098/8620333 – Temani Afif Dec 17 '20 at 11:55
  • Thanks this was the expected answer. – Scipion Dec 17 '20 at 12:00

0 Answers0