If the grid-items had different heights and gap had to be between them is of 20px.
In the below codepen, the gap shows too much between, how to make sure that row gap and column gap is exactly 20px.
https://codepen.io/Lohitha-Yalavarthi/pen/JjzWzVG
The gap b.w 1 and 4 should be 40px how to do that? and every other column and row gap should be 40px , irrespective how different heights of each cards are adjusted for grid-items and same with 3 and 6 and each card should continue to have its original height.
4 Replies
https://www.youtube.com/shorts/NNLxPcEnZDY
You can do this. Or wait for masonry
Kevin Powell
YouTube
A simple way to make a masonry layout
Columns can be a handy way to create a masonry layout while we wait for browsers to add support for the grid version.
#css
--
Come hang out with other dev's in my Discord Community
š¬ https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
ā https://www.kevinpowell.co/newsletter
Come hang out with me live every Monda...
Looking into it, thanks
can we approach this in react for styled componentS?
Its say masonry is not found
https://www.npmjs.com/package/masonry-layout. ???
@tok124 (CSS Nerd) ?
I have no idea. I've never used react and to be honest, i will never use it ^^ So yeah, i let someone else answer that question :p
oK