Streaming live at 10am (PST)

I'd like to make a 3x3 grid but can't seem to do it


#1

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


[1]: http://
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link


#2

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 :+1:


#3

Here it is! https://preview.webflow.com/preview/shawn-fleming?utm_source=shawn-fleming&preview=f27f4a3994ec86718ce23c0872ff53f6 sorry, wasn’t sure how those worked


#4

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?


#5

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


#6

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:

  • Add the Columns element and choose the amount
  • Give it a class, set its width and make it centered
  • Drop images in, create a class and assign to each column
  • Add the padding to the newly created column class
  • Duplicate the row element for each new line of images

#7

I followed along your way, and it works perfectly now! Thank you so much for all your help :smile: