Blog

CSS Container Queries erklärt

Webentwickler kennen Media Queries, um Layouts je nach Gerät anzupassen. Am Beispiel von Produkt-Teasern zeigen wir erst die klassische Lösung mit Media Queries und deren Grenzen – und danach, wie Container Queries diese Probleme deutlich flexibler lösen können.

Thomas Bieli

Lead Frontend Entwickler

CSS Container Queries: die besseren Media Queries

Jeder Webentwickler kennt Media Queries. Diese sind notwendig, um die verschiedenen Elemente der Webseite auf jedem Gerät schön darzustellen.

Wir zeigen euch ein einfaches Beispiel anhand von Produkt-Teasern. Diese sollen auf mobilen Geräten im Hochformat untereinander, auf Tablet im Hochformat nebeneinander und auf Desktop im Querformat nebeneinander dargestellt werden.

Wir lösen das Problem zuerst wie gehabt mit Media Queries und zeigen deren Grenzen auf. Danach zeigen wir, wie die bestehenden Probleme mit Container Queries gelöst werden können.

Darstellung auf Desktop

Darstellung auf Tablet

Darstellung auf Mobile

Let's get started

HTML:
Der «times»-Helper wiederholt den Code-Block so viele Male, wie angegeben.

html

<div class="container">
    <div class="row">
        {{#times 2}}
            <div class="product-teaser">
                <div class="product-teaser__image">
                    <img src="https://via.placeholder.com/400x300">
                </div>
                <div class="product-teaser__content">
                    <h3>Produkt Titel</h3>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                        ut labore et dolore magna aliquyam</p>
                </div>
            </div>
        {{/times}}
    </div>
</div>

CSS:

css

.row {
  display: flex;
  flex-wrap: wrap;
}

.product-teaser {
  padding: 0 5px 10px;
  width: 100%;

  @media (min-width: 768px) {
    width: 50%;
  }

  @media (min-width: 992px) {
    display: flex;

    .product-teaser__image, .product-teaser__content {
      width: 50%;
    }

    .product-teaser__image {
      padding-right: 5px;
    }
  }
}

Anwendung

Nun möchten wir auf einer anderen Seite diese beiden Produkt-Teaser neben einem Bild darstellen.

html

<div class="container">
    <div class="wrapper">
        <img src="https://via.placeholder.com/400x300">
        <div class="row">
            {{#times 2}}
                <div class="product-teaser">
                    <div class="product-teaser__image">

      <img src="https://via.placeholder.com/400x300">
                    </div>
                    <div class="product-teaser__content">
                        <h3>Produkt Titel</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                            ut labore et dolore magna aliquyam</p>
                    </div>
                </div>
            {{/times}}
        </div>
    </div>
</div>

Würden wir nun einfach in HTML ein Bild neben den beiden Teasern einfügen, so hätten wir das Problem, dass diese auf Desktop im Querformat dargestellt werden. Obwohl das Hochformat besser passen würde.

Eine mögliche Lösung wäre eine neue CSS Regel, welche das Bild vor dem «row»-Element (nachfolgend Teaser-Row genannt) berücksichtigt. Auch könnte man bei den Produkt-Teasern neben dem Bild eine zusätzliche Klasse setzen.

css

img + .row .product-teaser {
  display: block;
  .product-teaser__image, .product-teaser__content {
    width: 100%;
    padding: 0;
  }
}

Bei diesem Dummy-Beispiel ist dies einfach zu realisieren. Jedoch muss darauf geachtet werden, dass immer ein Bild neben der Teaser-Row eingefügt wird. Man kann also nicht frei wählen, welchen Inhalt man da platziert. Effizienter wäre es doch, wenn wir prüfen könnten, über wie viel Platz die Teaser-Row verfügt. So können wir die passende Ansicht der Produkt-Teaser automatisch bestimmen. Mit den Container Queries wird dies möglich.

Container Queries schaffen hier Abhilfe

Wir haben nun einmal zwei Produkt-Teaser neben einem Bild und einmal zwei Produkt-Teaser auf einer Zeile:

html

<div class="container">
    <div class="wrapper">
        <img src="https://via.placeholder.com/400x300">
        <div class="row">
            {{#times 2}}
                <div class="product-teaser">
                    <div class="product-teaser__image">
                        <img src="https://via.placeholder.com/400x300">
                    </div>
                    <div class="product-teaser__content">
                        <h3>Produkt Titel</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                            invidunt
                            ut labore et dolore magna aliquyam</p>
                    </div>
                </div>
            {{/times}}
        </div>
    </div>

    <div class="row">
        {{#times 2}}
            <div class="product-teaser">
                <div class="product-teaser__image">
                    <img src="https://via.placeholder.com/400x300">
                </div>
                <div class="product-teaser__content">
                    <h3>Produkt Titel</h3>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                        invidunt
                        ut labore et dolore magna aliquyam</p>
                </div>
            </div>
        {{/times}}
    </div>
</div>

CSS:

css

.row {
  display: flex;
  flex-wrap: wrap;
  container-type: inline-size;
}

.product-teaser {
  padding: 0 5px 10px;
  width: 100%;

  @media (min-width: 768px) {
    width: 50%;
  }
}

@container (min-width: 1000px) {
  .product-teaser {
    display: flex;

    .product-teaser__image, .product-teaser__content {
      width: 50%;
    }

    .product-teaser__image {
      padding-right: 5px;
    }
  }
}

Neu bei der Row dazugekommen ist:

container-type: inline-size

Die Media Query für Desktop wurde durch eine Container Query ersetzt.

Da der Container neben dem Bild nicht mehr als 1000px breit ist, werden die CSS-Regeln in dieser Query nicht auf diesen Bereich angewandt. Somit können wir die Teaser beliebig platzieren. Sobald genügend Platz vorhanden ist, werden diese im Querformat dargestellt.

Standardmässig geht die Container Query immer auf die Breite des Parent-Elements. Bei uns wird die Query auf Produkt-Teaser mit einer Teaser-Row als Parent angewandt. Dies kann jedoch mit der

container-name: name;

Property auf dem Container überschrieben werden. Zusätzlich wird der Name bei der Query mitgegeben.

css

.row {
  container-type: inline-size;
  container-name: teaserRow;
}

@container teaserRow (min-width: 1000px) {
  .product-teaser {
  }
}

Zusätzlich gibt es Container Query Units:

cqw (Container Query Width) – 1% der Breite des Containers
cqh (Container Query Height) – 1% der Höhe des Containers
cqi (Container Query Inline) – 1% der inline Grösse des Containers
cqb (Container Query Block) – 1% Der Block Grösse des Containers
cqmin (Container Query Minimum) – Der kleinere Wert von cqi oder cqb
cqmax (Container Query Maximum) – Der grössere Wert von cqi oder cqb

Beispiel:
Die Titel und Textgrösse wird anhand der Breite des Containers gesetzt:

css

h3 { 
 font-size: 2cqw;
}

p {
 font-size: 1.5cqw;
}

Fazit

Container Queries sind eine gute Möglichkeit für die Entwicklung von responsiven Webseiten mit dynamischen Elementen, die sich jederzeit dem Bildschirm optimal anpassen. Jedoch werden sie leider noch nicht ganz von allen Browsern unterstützt, was die Verwendung noch nicht ganz so einfach macht.

Die aktuell unterstützten Browser können hier geprüft werden: https://caniuse.com/?search=container%20queries

Weitere Stories

Website-Check: So erkennst du das Potenzial deiner Website

Ein Website-Check beantwortet drei Fragen: Was ist messbar gut, was kostet dich Geld oder Sichtbarkeit und wie viel Potenzial steckt noch in der bestehenden Website? Wir zeigen, was ein Check heute prüfen muss, wann Optimieren nichts mehr bringt und wo automatisierte Analysen an Grenzen stossen.

KI-Navigation und visuelles Editieren: Wie unser KI-Assistent die User Experience und Content-Pflege revolutioniert

KI verändert die Art und Weise, wie wir mit digitalen Plattformen interagieren. Bei der raffiniert media AG nutzen wir künstliche Intelligenz gezielt dort, wo sie echten Mehrwert schafft: zur Vereinfachung von Suchwegen für Besucher und zur Automatisierung im Redaktionsalltag.

Pixelgenaue Web-Umsetzung nach Mass: Wie wir das Designkonzept von another-studio.ch realisiert haben

Für das Designstudio another-studio.ch haben wir als verlässlicher Entwicklungspartner die kompletten Relaunch- und Ausbauphasen der Website von Lynn Grütter umgesetzt – kreative Entwürfe ohne optische Kompromisse in einem modernen Storyblok CMS.

Wie wir für Foma Galvanik durch ein pragmatisches Upgrade die Zukunft sichern

Veraltete Systeme und teure Wartungszyklen haben die Foma Galvanik ausgebremst. Durch den Wechsel auf einen modernen Tech-Stack mit Storyblok und Next.js haben wir ein effizientes Soft-Redesign realisiert, das die Performance steigert und gleichzeitig das Budget schont.

Shop-Migration zu Headless

Von WooCommerce oder einem selbstgebauten Shop zu einer Headless-Architektur mit Payload und Next.js – mit Redirect-Konzept, damit deine Google-Rankings die Migration überleben. Inklusive der offenen Grenzen: Beta-Status der Commerce-Erweiterung, Versand/Steuern/Abos und Schweizer Zahlungsarten.

Payload CMS Agentur Schweiz

Payload CMS aus der Schweiz: wofür wir es einsetzen, wann wir davon abraten und warum es auch für KMU ohne eigenes Entwicklungsteam funktioniert. Inklusive der Faktoren, die den Aufwand eines Payload-Projekts wirklich treiben.