_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%
grid-75-25: zwei Spalten im Verhältnis 77% : 20% (+ 3% gap)

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

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

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

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

  &.grid-auto-fit {
    > .group-inside {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min($min, 100%), 1fr));
      column-gap: $column-gap;
      row-gap: $row-gap;
    }
  }

  &.grid-auto-fill {
    > .group-inside {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min($min, 100%), 1fr));
      column-gap: $column-gap;
      row-gap: $row-gap;
    }
  }

  &.grid-2c {
    > .group-inside {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      column-gap: $column-gap;
      row-gap: $row-gap;
      @container contentElementGroup (width > #{$tweakpoint-40}) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

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

  &.grid-4c {
    > .group-inside {
      --gap: 2.25rem;
      display: grid;
      column-gap: $column-gap;
      row-gap: $row-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 {
    > .group-inside {
      display: grid;
      column-gap: $column-gap;
      row-gap: $row-gap;
      @container contentElementGroup (width > #{$tweakpoint-tablet}) {
        grid-template-columns: 60% 37%;
        --gap: 3%;
      }
    }
  }

  &.grid-75-25 {
    > .group-inside {
      display: grid;
      column-gap: $column-gap;
      row-gap: $row-gap;
      @container contentElementGroup (width > #{$tweakpoint-tablet}) {
        grid-template-columns: 77% 20%;
        --gap: #{$content-flow-space} 3%;
      }
    }
  }

  .grid-1-2 {
  .group-inside {
    display: grid;
    column-gap: $column-gap;
    row-gap: $row-gap;
    @container contentElementGroup (width > #{$tweakpoint-tablet}) {
      grid-template-columns: 1fr 2fr;
    }
  }
}

  &.grid-2-1 {
    > .group-inside {
      display: grid;
      column-gap: $column-gap;
      row-gap: $row-gap;
      @container contentElementGroup (width > #{$tweakpoint-tablet}) {
        grid-template-columns: 2fr 1fr;
      }
    }
  }

  &.flex-wrap {
  > .group-inside {
      display: flex;
      flex-wrap: wrap;
      column-gap: $column-gap;
      row-gap: $row-gap;
    }
  }

  // utility-class .flow
  // use with nested content-element-groups
  &.flow {
    > .group-inside {
        > *:where(:not(:first-child)) {
        margin-block-start: $article-flow-space;
      }
    }
    // if headline is a separate element, unset margin-block-start
    > *:where(h1, h2, h3) + [class^="mod_"] {
      margin-block-start: unset;
    }
  }
}