CSS Columns - helle.

Spaltenlayout CSS3 Column

Ein Masonry-Layout - also Spalten mit gleicher Breite aber unterschiedlichen Höhen der Inhalte, wobei diese untereinander passend angeordnet werden - kann damit leicht umgesetzt werden. Oft für Fotos eingesetzt, funktioniert aber auch für jede Art von Inhaltselementen.

HTML

<div class="column_container">
  <div class="item"> ... </div>
  <div class="item"> ... </div>
  <div class="item"> ... </div>
  <div class="item"> ... </div>
  ...
</div>

Sass .scss

.column_container {  
  @include prefix((
    column-count: 1,
    column-gap: 0
  ), webkit moz);
  @media screen and (min-width: $break-medium) {
    @include prefix(( 
      column-count: 2,
      column-gap: 4vw
    ), webkit moz);
  }
  @media screen and (min-width: $break-xlarge) {
    @include prefix((
      column-count: 3,
    ), webkit moz);
  }
  .item {
    -webkit-column-break-inside: avoid;
              page-break-inside: avoid;
                   break-inside: avoid;
    margin-bottom: 2rem;
  }
}

Quelle

Tipp von Franko im Contao Forum

Das ist ein Test mit einer langen Bildunterschrift. Die Breite ist per CSS auf die Bildbreite begrenzt: figure {width: min-content; }

Frühling

Dieser Inhalt wird im Frühling angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: spring

Sommer

Dieser Inhalt wird im Sommer angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: summer

Herbst

Dieser Inhalt wird im Herbst angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: autumn

Winter

Dieser Inhalt wird im Winter angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: winter

Howto Saisonschalter

Galerie

In the City

Squares mit Flexbox

Zwei nebeneinanderliegende Quadrate, die bei Screen-Breiten <960px untereinander als Rechtecke dargestellt werden. Bis zu einer Screen-Höhe von 640px wird das Foto als Vollbild gezeigt.

Ansehen

Content Elements mit CSS column