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?
29 Replies
You could use
grid-template-areas and grid-area. But bear in mind any grid-gap you use will be applied throughout, so if you want the two images at the bottom to be closer than the paragraphs of text above, you might want to consider having that as one column and using flex instead for that particular row.ah yeah that makes a lot of sense now, thank you, i'll give that a go š
No problem. š
hey again, i hope you don't mind me asking for a pointer with this š
, i've annotated the picture here with where i got a little stuck. This is for the tablet layout btw, i attatched a codepen incase that helps?
https://codepen.io/deerCabin/pen/mdQBjag
just realised my english in the annotation is all messed up š
, i'll fix that..
Do you mean the gap in green is too small?
yeah i'm sorry, must have forgot to specify that š
, then when altering the gap property in the parent it affects the one where the red line is too as the container surrounding the large image is also a grid item.
grid-gap will affect all of the gaps in the container. If that gap isn't large enough, you can apply a top margin to fix that.ah gotcha, thank you once again.
All good. š
and i also have to adapt the "content" div in order to make it's items (the title and 2 paragraphs) the same width as the top three items? or is it supposed to auto span?
If you're using
grid-template-areas, you'll need to declare the span yourself.ah yeah i understand, i believe it's already spanning as its one row but the "sea scape" title seems to always be short of width however in the reference image it spans the whole way?
Try adding
justify-items: center to the element housing the title and the two paragraphs.
justify-content: center may also work. I forget which to use lol.all good lol, i've tried both and it doesn't seem to be altering anything?
The element will need to be of
display: grid type. Since everything appears to be centered you could try applying it to the main container itself.i've tried it in both containers and it doesn't seem to be producing the same output as the reference image, the first two images are examples of what happens when i alter each container if that helps. and the second two images are what's desired and what mine looks like if that additionally helps.
Do you have an updated CodePen to share?
yeah for sure, it's all updated
i have a feeling i've made a rookie mistake somewhere or it's to do with the way i've laid things out
Ah I see why
justify-content/justify-items: center; must be either justify-content: center; or justify-items: center; on your .container and .content classes.
It turns out that justify-items is the one you want.
Adding width: 100%; onto your .two-img class should fix the image size issues.that was completely a mistake on my half trying to show you it like that, i put the / to show that i tried both, i didn't put them on the same line like that š
Oh I see, my bad. š
nah all good, all me š
You can play around with
max-width on the .container class if you want to achieve your design exactly. Otherwise it looks very close to it.
šah thank you, i can see how that'd work. thank you for the feedback š, and sorry for taking up a couple hours of your time for that.
No problem, happy to help. š
I'm going to head off to bed now. Been awake for 21 hours so I'm surprised that I've been any help at all. š¤£
dang nearly hitting the all nighter over there š
, have a good night š
Nearly š But my body can't do it like it used to lmao
Goodnight!
well that's something you can't argue with š