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)
3 Replies
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.
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
Yeah either method works, it’s preference