Grid layout combinations
I'm trying to recreate this reference image with css grid but i'm a little confused on the most sufficient way to lay out the grid. This is a new design style i'm trying too so it creates a little more confusion with laying it out 
.
I've attempted to draw out plans for the grid layout but i've ran into a few things that have halted me a little due to confusion, for example, in the first image, i've laid the grid out with one column and four rows but i'm unsure whether wrapping the last two images in a container or having two rows in the grid is the best way to go. When i thought about having two columns in the grid i got a little confused on how to span the top row of three items along two columns so i thought that one column along with flex to lay out the three items would be best additionally wrapping the last two images in a container but i'm honestly not sure on the best approach to this. I'm trying to decide on the best approach that also allows an easier conversion to a responsive version of the grid (as seen in the second image, which i've also attempted to draw the plan out to). Has anyone got any advice?
.I've attempted to draw out plans for the grid layout but i've ran into a few things that have halted me a little due to confusion, for example, in the first image, i've laid the grid out with one column and four rows but i'm unsure whether wrapping the last two images in a container or having two rows in the grid is the best way to go. When i thought about having two columns in the grid i got a little confused on how to span the top row of three items along two columns so i thought that one column along with flex to lay out the three items would be best additionally wrapping the last two images in a container but i'm honestly not sure on the best approach to this. I'm trying to decide on the best approach that also allows an easier conversion to a responsive version of the grid (as seen in the second image, which i've also attempted to draw the plan out to). Has anyone got any advice?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
