Your thought process

I often spend far too long trying to work out which way to address a layout, should it be flex or grid, 3 columns x 2 rows etc. Taking the layout below, how do you address the approach? (pink elements are images, arrows show direction of content)
No description
No description
3 Replies
snxxwyy
snxxwyy7mo ago
For me personally, i'd choose grid for this layout with 3 columns and 3 rows. The size of the columns and rows are up to you. Then i'd declare the two images and content at the bottom to span across multiple columns and rows. For the first image i'd use grid-row: span 2;, for the second image i'd use grid-column: span 2;, and for the content at the bottom, you could either use grid-column: span 3; or grid-column: 1 / -1;. I would personally pick the second option here as if you add more columns, the content will span across the new column automatically, assuming that specific content will always be the full width of the grid. Here's a labelled explanation if that helps more.
No description
vattevaii
vattevaii7mo ago
Using grid area is a really neat approach.. you won't have to worry about span on each element and it's easier to make it responsive too Image1 content1 content2 Image1 image2 image2 Content3 content3 content3
snxxwyy
snxxwyy7mo ago
Yeah either method works, it’s preference
Want results from more Discord servers?
Add your server