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
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢10mo ago
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...
angell1389
angell1389ā€¢10mo ago
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) ?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢10mo ago
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
angell1389
angell1389ā€¢10mo ago
oK
Want results from more Discord servers?
Add your server