Grid

Het responsive 12-column grid systeem. Het grid past automatisch aan op verschillende schermformaten.

Gebruik

example.scss
@use "@ftp/style-library/scss/mixins/grid" as *;
@use "@ftp/style-library/scss/mixins/breakpoint" as *;

.my-grid {
  @include grid();
}

.my-item {
  // Standaard: 1 kolom (phone)
  // Tablet: 2 kolommen
  @include breakpoint-from(tablet) {
    grid-column: span 6;
  }
  // Laptop+: 3 kolommen
  @include breakpoint-from(laptop) {
    grid-column: span 4;
  }
}

Breakpoints

Breakpoint
Range
Columns
Gap
Phone
0 - 767px
1
24px
Tablet
768 - 1280px
4-6
24px
Laptop
1281 - 1919px
6-12
40px
Desktop
1920 - 2559px
12
48px
Wide-screen
2560px+
12
48px

12 items (volledig grid)

1
2
3
4
5
6
7
8
9
10
11
12

6 items

1
2
3
4
5
6

3 items

1
2
3

2 items

1
2

1 item

1

Complex layouts — real-world archetypen

Drie patronen die laten zien hoe je de grid-tokens stapelt voor niet-triviale layouts: een dashboard-shell met sidebar + utility, een product-grid met een featured spotlight, en een klassiek magazine-stramien. Elk voorbeeld toont de live render bovenaan, gevolgd door de SCSS die het oplevert.

Dashboard-shell

Header (12-span) + sidebar (3-span) + main (6-span) + utility (3-span) + footer (12-span). Onder laptop klapt de sidebar boven de main en de utility eronder; onder tablet stack alles 1-koloms.

Header · 12-span
Main content · 6-span
Footer · 12-span
example.scss
.dashboard {
  display: grid;
  grid-template-columns: 1fr;            // phone: 1-koloms stack
  gap: $inline-l;

  @include breakpoint-from(tablet) {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "header  header  header  header  header  header  header  header  header  header  header  header"
      "side    side    side    main    main    main    main    main    main    util    util    util"
      "footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer";
    gap: $inline-xl;
  }
}

.dashboard__header  { grid-area: header; }
.dashboard__sidebar { grid-area: side; }
.dashboard__main    { grid-area: main; }
.dashboard__utility { grid-area: util; }
.dashboard__footer  { grid-area: footer; }

Product-grid + featured-item

Featured product beslaat 2×2 cellen, omringd door 1×1 standard-cells. Schaalt van 4-up op laptop naar 2-up op tablet naar 1-up op phone — de featured-spotlight verschuift mee.

Featured · 2×2
1
2
3
4
5
6
example.scss
.product-grid {
  display: grid;
  grid-template-columns: 1fr;            // phone: 1-up
  gap: $inline-m;

  @include breakpoint-from(tablet) {
    grid-template-columns: repeat(2, 1fr); // tablet: 2-up
  }

  @include breakpoint-from(laptop) {
    grid-template-columns: repeat(4, 1fr); // laptop: 4-up
  }
}

.product-grid__featured {
  @include breakpoint-from(tablet) {
    grid-column: span 2;                 // 2 cells wide
    grid-row: span 2;                    // 2 rows tall
  }
}

Magazine-layout

Hero (12-span) + 2 secondary articles (6-span elk) + 3 tertiary cards (4-span elk) + sidebar widget. Onder laptop klapt de sidebar boven de tertiairy-rij; onder tablet stack alles.

Hero · 12-span
Secondary · 6-span
Secondary · 6-span
Tertiary · 4-span
Tertiary · 4-span
Tertiary · 4-span
example.scss
.magazine {
  display: grid;
  grid-template-columns: 1fr;
  gap: $inline-l;

  @include breakpoint-from(tablet) {
    grid-template-columns: repeat(12, 1fr);
    gap: $inline-xl;
  }
}

.magazine__hero      { grid-column: 1 / -1; }   // full bleed

.magazine__secondary {
  @include breakpoint-from(tablet) { grid-column: span 6; }
}

.magazine__tertiary {
  @include breakpoint-from(tablet)  { grid-column: span 6; }
  @include breakpoint-from(laptop)  { grid-column: span 4; }
}

.magazine__sidebar {
  @include breakpoint-from(tablet) { grid-column: 1 / -1; }
  @include breakpoint-from(laptop) { grid-column: span 4; grid-row: 3; }
}