I’m trying to create a layout in a section to show 3 rows of 3 images on desktop (and one long row on mobile). I’ve laid out the 9 elements in 3 different ‘row’ elements. The site looks fine in the editor, but when I preview or visit the site the elements get all out of whack and no longer form a grid. How can I achieve this?
Here is my site Read-Only: shawnfleming.design
That’s very strange, but it looks like you’re still missing your read-only link. Let me know when you get that created and I’ll take a look at it for you 
Here it is! https://preview.webflow.com/preview/shawn-fleming?utm_source=shawn-fleming&preview=f27f4a3994ec86718ce23c0872ff53f6 sorry, wasn’t sure how those worked
So it looks like you’ve got your grid figured out and I don’t see any issues when previewing the site, but all of the tiles are touching instead of spaced out like in your first screenshot. Are you just looking to add some padding around each of those images?
I removed the padding and changed the section’s margins to % instead of pixels to try to fix it, but it’s still misaligned for me. I do ultimately want 20px space between each picture
I’m not seeing that on my end, but I recorded a short video on how I would go about creating the same thing from scratch. Not the most graceful recording, but it should give you an idea of how to go about recreating it.
If your having trouble following along, here are the steps from the video:
class, set its width and make it centeredclass and assign to each columnpadding to the newly created column class
row element for each new line of imagesI followed along your way, and it works perfectly now! Thank you so much for all your help 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.