How do I create an asymmetric grid layout on Squarespace?

An asymmetric grid breaks the uniform column pattern to create visual interest — common on editorial and portfolio sites. You can achieve this with CSS Grid on Squarespace 7.1 by targeting a section's content wrapper.

Use grid-template-columns with fractional units to create unequal splits (like 2fr 1fr) and span specific items across multiple grid cells for a magazine-style layout.

[data-section-id="YOUR_SECTION_ID"] .content-wrapper {
  display: grid !important;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
[data-section-id="YOUR_SECTION_ID"] .fe-block:first-child {
  grid-row: span 2;
}
@media screen and (max-width: 767px) {
  [data-section-id="YOUR_SECTION_ID"] .content-wrapper {
    grid-template-columns: 1fr;
  }
}