First of all, I’m unable to align anything in the same way as the visual. I’m sure I’m just missing something obvious with grid, but can’t work it out.
Second of all, the image on the right (manually aligned) seems to jump down to a tiny size randomly in the designer and in the published site, and I am not sure how to stop this:
I have a solution that I am not positive you are looking for… but it will work.
You are trying to add padding around your images by using the grid columns and rows. I would personally avoid doing this as it will become quite cumbersome when you are trying to work on responsiveness.
Instead, I would recommend 3 rows and 3 columns and remove all px gap. This will help a lot with responsiveness.
Secondly, I would add ‘related’ content together in a div…
Green Lines = Columns/Rows
Red Boxes = Div
Numbers = Div number
The reason I’d do the divs, is because you can then add the padding as a %. This will also help with responsiveness. You can add additional padding/margins directly on your text if needed.
Now for positioning. Select your div and place them manually into the grid. You can then get them space properly.
Div 1 = Row 1 - Row 1 & Col 1- Col 2
Div 2 = Row 1 - Row 2 & Col 3 to Col 3
Div 3 = Row 2 - Row 3 & Col 1 - Col 1
Div 4 = Row 3 - Row 3 & Col 2 - Col 3
Final note: Make the grid into %'s instead of FR. This will help you with what you are doing. FR will vary depending how many columns/rows you add.
Column 1 = 40%
Column 2 = 20%
Column 3 = 40%
Sorry, I know the image is a little messy and hard to follow, let me know if you need additional clarification.
Thank you SO MUCH! That makes perfect sense and wasn’t messy or hard to follow at all, quite the opposite! This is the first time I’ve attempted to use grid, I never thought to use % and margins in the divs - much more sensible way to do things. You’re a lifesaver!
@Dave_Birnie I wonder if I could borrow your expertise one more time please?
When the section responds down, the text overflows its container. I’ve checked there are no fixed heights on containers etc. but I can’t seem to make it resize the grid so it fits:
That’s awesome, thanks so much. You’re right- font sizes are much trickier than I expected. Definitely a something I’ll anticipate better in future! Thanks for all your help!
