_content-element-groups.scss

Im Template wird eine zusätzliche Klasse .group-inside um den Inhalt gewrappt. Das ermöglicht die Verwendung von container queries. Elementgruppen können mit z.B. mit flex oder grid gegliedert werden. Die Klasse wird in der Elementgruppe vergeben.

Folgende Klassen stehen zur Zeit zur Verfügung:

grid-2c: zwei gleich breite Spalten
grid-3c: drei gleich breite Spalten
grid-4c: vier gleich breite Spalten
grid-gs: “goldener Schnitt” zwei Spalten im Verhältnis 60% : 37%

In der Elementgruppe kann auch eine übergeordnete Überschrift vergeben werden.

@use "../abstracts/" as *;

// Grid
// .content-element-group.grid-xc .group-inside

.content-element-group {
  container-type: inline-size;
  container-name: contentElementGroup;
}

.grid-2c {
  .inside,
  .group-inside {
    display: grid;
    gap: $gap;
    @container contentElementGroup (width > #{$tweakpoint-40}) {
      grid-template-columns: 1fr 1fr;
    }
  }
}
.grid-3c {
  .inside,
  .group-inside {
    --gap: 2.25rem;
    display: grid;
    gap: $gap;
    @container contentElementGroup (width > #{$tweakpoint-40}) {
      grid-template-columns: 1fr 1fr;
    }
    @container contentElementGroup (width > #{$tweakpoint-53}) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}
.grid-4c {
  .inside,
  .group-inside {
    --gap: 2.25rem;
    display: grid;
    gap: $gap;
    @container contentElementGroup (width > #{$tweakpoint-40}) {
      grid-template-columns: 1fr 1fr;
    }
    @container contentElementGroup (width > #{$tweakpoint-53}) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}

.grid-gs {
  .inside,
  .group-inside {
    display: grid;
    gap: $gap;
    @container contentElementGroup (width > #{$tweakpoint-tablet}) {
      grid-template-columns: 60% 37%;
      --gap: 3%;
    }
  }
}

Check

Filzi hat zusätzliche Klassen, diese sind aber noch nicht für container-queries optimiert TODO