CSS Grid - helle.

Aufgabe

(Item 1) Verschiedene Inhaltselemente in einem Grid-Layout darstellen - mit Anpassungen an die verschiedenen Viewports. Außerdem sollen die Sass-SCSS-Codezeilen(in Item 3) nicht umgebrochen werden.

Fazit: Wenige Zeilen SCSS reichen aus, um die Aufgabe zu lösen. CSS-Grid macht deshalb richtig Spaß.

Item 2

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim.

// --------------------
// Item 3
// layout/_cssgrid.scss
// --------------------

.gridcontainer {
    margin-bottom: $margin-bottom;
    display: grid;
    grid-template-rows: 1fr; 
    grid-template-columns: 100%;
    grid-row-gap: 4rem;
    grid-column-gap: 4.5rem;

    @include respond-above(md) {
        grid-template-columns: 51% 1fr;
        .item {
            &:nth-child(1) {
                grid-column: 1 / 3;
            }
            &:nth-child(3) {
                grid-row: 2 / 6;
            }
        }
    }

    @include respond-above(xl) {
        grid-template-columns: max-content 1fr 1fr;
        .item {
            &:nth-child(3) {
                grid-row: 2 / 5;
            }
            &:nth-child(6) {
                grid-column: 2 / 4;
            }
            //&.item10 {
            &:nth-child(10) {
                grid-column: 2 / 4;
            }
        }
    }
}

Vorbereitung

(Item 4) Jedes Inhaltselement innerhalb des Gridcontainers erhält die CSS-Klasse .item (der Klassenname kann beliebig anders lauten).

Mit :nth-child(x) kann man darauf zugreifen.

Vorgehensweise

(Item 5) Empfehlung ist, die CSS-Regeln nach der Methode: Mobile first zu schreiben.

Mit der SASS SCSS-Schreibweise ist das sehr übersichtlich und leicht zu kontrollieren.

Item 6

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim.

Saisonsteuerung

(Item 7) Das Bild in Item 8 wird über einen einfachen CSS-Saisonschalter nur in der aktuellen Jahreszeit angezeigt. Danach erscheint automatisch ein anderes saisonbezogenes Inhaltselement.

Die wechselnden Inhaltselemente brauchen dafür lediglich die CSS-Klassen spring, summer, autumn oder winter.

Howto Saisonschalter

Saisoninhalt (item8)