Specify different properties to different items in the CMS Grid

Design help General
1

Hey everyone,

I’ve added a bunch of blog posts to the CMS, dragged it into my canvas, and then coverted it into a grid. I get is something that looks like this:

image
image803×792 274 KB

Here’s what I’d like to achieve:

I’d like for the top row to not have a top margin, but I’d like every row beneath it to have a 32px top-margin. I know how to specify the same margin for every item in the grid, but not quite sure how to exclude the the first row from having this margin applied.

Site is located here: https://preview.webflow.com/preview/loosely-sealed-vf?utm_medium=preview_link&utm_source=dashboard&utm_content=loosely-sealed-vf&preview=e10170fdceff5621af2ccbba8c09dffe&mode=preview

Any help would be appreciated!

Thanks!

2

Hi @bugsyb

Welcome to the Webflow Forum!

You should be able to resolve this issue by converting the Collection List into a grid:

  1. Select the Collection List within the Collection List Wrapper
  2. Make sure the layout is set to Full width in the Elements Settings panel
  3. Apply display:grid in the Style panel
  4. Set the row gap to 32 px. This adds a gap only between the rows. Optionally, you can adjust the column gap if you need to.

CloudApp

Then, you need to readjust the Collection list to be responsive. I highly recommend that you watch the “Turn a collection list into a responsive grid” video lesson on Webflow University:

Hope this is helpful. If you have any other questions, please don’t hesitate to respond back.

My best,
Anna