Two Columns Grid Design
hey anyone knows how to achieve this design using css grid? I've been trying all day to figure out how to recreate this kind of 2 columns staircase but without success.
Thank you
15 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yes I already did that but I don't want the divs inside the 2 columns to be right next to each other
there is a little offset
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
column-gap is adding to both columnsadd only bottom gap to the left side and top gap to the right side if that is a thing
or margintop and margin bottom
I'll see if it's doable
otherwise you can look into a "masonry" plugin or tutorial
its sort of what theses different off standard grids are built on
Select the every 2n'th child of the parent and give them margin-top
as an example https://www.npmjs.com/package/react-responsive-masonry
npm
react-responsive-masonry
React responsive masonry component built with css flexbox. Latest version: 2.1.6, last published: 2 months ago. Start using react-responsive-masonry in your project by running
npm i react-responsive-masonry. There are 11 other projects in the npm registry using react-responsive-masonry.not vouching for that library but something like this can help you
div:nth-child(2n)
yes I understand, thank you @needmorewood and @Barış-Pal !
as selector
You're welcome, good lucky
Giving margin to second child only, might work too, I haven't tested it
I had to add margin to every div on the 2nd column @Barış-Pal doesn't work for only the first child! Thank you for the solution
You're welcome 🙂