Reproduce flex behaviour with grid
Hello, I've just found out this pen: https://codepen.io/RamSande/pen/ebNYJP and I wanted to try to replicate it using grid, I tried
But this doesn't make the last elements occupy the whole content, is it possible to do that with grid? I also tried
1fr but it doesn't work as I want13 Replies
You would need 10 columns, then make the last two items span 5 columns
btw, the other boxes should also span 2 columns
Like this
In addtion to using the 10 columns, you also need a media query. I don't know if you tried changing the width of the viewport. It switches to 4 columns for narrower displays, and it does this without the need for a media query. Flex is definitely the simpler solution to achieve this.
Thank you. I know that it's the best solution and I'll go with that. I was just curious to know if maybe I missed some grid feature but it looks like I didn't. Thanks again
I tried a solution with Flex, but I don't know how to avoid this (without media queries): it's ok for the element to take as much space as they need (so grow to 1), but I don't want that only one element wraps
https://codepen.io/n00bCod3r/pen/EaxyvKJ
The problem is your flex basis. You set a fixed pixel value instead of a percent.
My original response was to the image and the the full text of what you said. The number of items on the last row depends on the total number of items.
This doesn't solve the problem on the possibility of only one element wrapped, and even auto doesn't. I was thinking about some emulation of grid's minmax but I don't think it's possible
Ohh this looks interesting, saved to my favorites and notion :D
That solution is still not ideal, because it requires specifying the number of columns in advance.
Oh I see
This is my real use case, unfortunately I don't know how many elements on each tab there will be
But I didn't like any grid combination I tried soo