Squarespace Tutorial: Split Layout Design

In this tutorial, I show you how to create a split layout section in the Brine template of Squarespace. Below you will find the video tutorial as well as the code used.

Split Layout Section Design In Squarespace

Custom CSS:

#split-layout {
  .Index-page-content {
    padding: 0px!important;
    max-width: 100%;
    .sqs-block {
      padding: 0px!important;
    .image-inset.content-fit {
      height: 100%
    .design-layout-card img {
      height: 100%!important;
      object-fit: cover;
      -o-object-fit: cover;
    @media screen and (max-width: 640px) {
      .sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
        display: block;
      .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
        width: 100%;
      .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
        position: relative;
        width: 100%;

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.