How to Display Squarespace Events in a Grid Layout

Squarespace does not give you a grid option for your Events page out of the box. The default layout stacks events in a single column list, which works fine for a handful of events but starts to feel long and hard to scan once your list grows. This CSS fix converts that list into a clean three column grid, with full width thumbnails, consistent spacing, and a single column fallback on mobile.

No plugins, no JavaScript. Just CSS pasted into Custom CSS.

The Code

This converts your upcoming events list into a three column grid:

.eventlist.eventlist--upcoming {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.eventlist-column-date {
  width: 100% !important;
}
.eventlist.eventlist--upcoming .eventlist-event {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.eventlist.eventlist--upcoming .eventlist-column-thumbnail,
.eventlist.eventlist--upcoming .eventlist-column-info {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}
.eventlist.eventlist--upcoming .eventlist-column-info {
  padding: 0 !important;
  margin-top: 20px;
}
.eventlist.eventlist--upcoming .eventlist-column-thumbnail {
  padding-bottom: 66.66% !important; // adjust thumbnail ratio here
}
@media screen and (max-width: 767px) {
  .eventlist.eventlist--upcoming {
    grid-template-columns: 1fr !important;
  }
}

What this does:

• repeat(3, minmax(0, 1fr)) creates three equal columns that flex with the container width

• padding-bottom: 66.66% forces a consistent 3:2 aspect ratio on every event thumbnail

• The media query drops the grid to a single column on screens below 768px

Not happy with the 3:2 ratio? Swap padding-bottom to match your preferred crop:

Ratio	Value
1:1 (Square)	padding-bottom: 100%
4:3 (Standard)	padding-bottom: 75%
3:2 (Default)	padding-bottom: 66.66%
16:9 (Widescreen)	padding-bottom: 56.25%
2:3 (Portrait)	padding-bottom: 150%

Here is the updated gap note:

Want more or less space between cards?

Adjust the gap value to control spacing between rows and columns independently:

gap: 20px !important; // same spacing on both row and column

gap: 20px 30px !important; // row 20px | column 30px

gap: 30px 20px !important; / / row 30px | column 20px

How to add

• Go to Custom Code→ Custom CSS in your Squarespace panel

• Paste the code at the bottom of any existing CSS

• Replace the hex color values with your own

• Hit Save and check your list on the page

Past Events Grid

If you have past events enabled on your Events page, paste this second snippet directly below the first. It applies the same grid treatment to the past events section and also hides the event meta row on upcoming events to keep the cards clean:

.eventlist.eventlist--past {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 50px 20px !important;
  margin-top: 20px;
  .eventlist-past-upcoming-divider {
    display: none;
  }
}
.eventlist-column-date {
    width: 100% !important;
}
.eventlist.eventlist--past .eventlist-event {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.eventlist.eventlist--past .eventlist-column-thumbnail,
.eventlist.eventlist--past .eventlist-column-info {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}
.eventlist.eventlist--past .eventlist-column-info {
    padding: 0 !important;
    margin-top: 20px;
}

.eventlist.eventlist--past .eventlist-column-thumbnail {
    padding-bottom: 66.66% !important;
}
@media screen and (max-width: 767px) {
    .eventlist.eventlist--past {
        grid-template-columns: 1fr !important;
    }
}

Final Result

Once saved, your Events page will display upcoming events in a clean three column grid with consistent thumbnail ratios and spacing between cards. If you have past events enabled and added the second snippet, those will match the same grid layout. On mobile, both sections drop to a single column automatically.