A modern, mobile-first approach to HubSpot's layout.css file

dnd-layout.css

/* required css vars
 * --site-width (site max-width)
 * --site-gutter (site container padding)
 * --site-spacing-y (site vertical rhythm)
 * --hs-grid-gap-x (horizontal gap between dnd columns)
 */

.dnd-section {
  padding: 4em 0;
}

/* row-module class for full row modules that utilize the --site-gutter var */
.dnd-section .row-module {
  margin: 0 calc(var(--site-gutter) * -1);
}

.dnd-section > .row-fluid {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--site-width);
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  position: relative;
}

.dnd-section > .row-fluid .hs-private {
  width: 100%; /* for the dnd add module here placeholder */
}

@media (min-width: 768px) {
  .dnd-section .row-fluid {
    column-gap: var(--hs-grid-gap-x);
    display: flex;
  }
  
  .dnd-section [class*='span'] {
    flex: 1;
  }

  {% for i in range(0,13) %}
    .dnd-section .span{{ i }} {
      flex-basis: {{ i / 12 * 100 ~ '%' }};
    }
  {% endfor %}
}

/* page editor */
.hs-inline-edit .dnd-module {
  min-height: 40px!important;
}

Got any thoughts or questions? Comment below 👇 and/or follow me on Twitter @johnIsFuller

Heads up if any of you use this... the visibility classes (.hide, .show, etc) are not included!

i would use the gap instead of column-gap .. https://caniuse.com/?search=gap

Yeah I definitely thought about it – but since gap is shorthand for row-gap & column-gap and the hs dnd grid does not wrap (making row-gap useless), I just included column-gap @adesignl