Layout Grid - Seventh UI CSS

Breakpoint Contract

Breakpoint	CSS points	Columns	Gutter/Padding	Margin
Small	320px - 599px	4	16px	16px
Medium	600px - 839px	8	16px	16px
Expanded	840px - 1199px	12	16px	24px
Large	1200px - 1599px	16	16px	24px
Extra-large	1600px+	16	16px	24px

Source: Figma Layout breakpoints, node 633:1428.

Container And Grid

Full span

.sui-container applies the DS margin, while .sui-grid applies the responsive column count and 16px gutter.

Span 4

Full width on Small, then 4 columns from Medium upward.

Span 4

Aligned to the same grid contract.

Span 8

Variable spans can change by breakpoint.

Stack

First block

Use stack for simple vertical flows.

Second block

Adjust spacing with --sui-layout-gap.

Auto Grid Helper

Item 1

Auto-fit repeated content using the DS gutter.

Item 2

Minimum width is configurable.

Item 3

Columns collapse safely.

Item 4

No JavaScript required.

Compatibility

These helpers are optional. Quasar consumers can keep using q-layout, q-page, row, and col-*; Seventh layout classes are namespaced and do not target framework classes.

<main class="sui-container">
  <section class="sui-grid">
    <div class="sui-grid__item" style="--sui-grid-span-medium: 4; --sui-grid-span-expanded: 4;">
      ...
    </div>
  </section>
</main>