Container Queries – Anpassung an den umfassenden Container

Container Queries vs Media Queries

Container Queries ähneln Media Queries, aber sind flexibler, vor allem bei wiederverwendbaren Komponenten in komplexen Layouts. Es gibt zahlreiche Stilelemente, die in unterschiedlichen Umgebungen auftauchen können: z.B. Produktkarten (cards), die im Hauptbereich der Seite, in Sidebars und auf der Produktseite verwendet werden.

• Media Queries (@media) steuern das Layout und Stile basierend auf der Viewport-Größe (also je nach Breite des Browserfensters).
• Container Queries (@container) reagieren auf die Größe des übergeordneten Containers, nicht auf den gesamten Viewport.

Ein Beispiel sind die Auszüge von Blogposts, die in einer Sidebar oder in einem Grid-Layout platziert werden. Auch die Anordnung von Blog-Beiträgen im Raster der Startseite vs Sidebar fällt in diese Kategorie. Meist zeigt das Layout bei schmalen Viewports Karten und auch ihre Inhalte zeilenweise untereinander, und erst bei breiteren Viewpoints werden zwei oder mehr Karten nebeneinander gesetzt.

Bis zwei oder mehr Karten oder Blog-Teaser nebeneinander erscheinen, werden Bilder übergroß: dann ist es effizienter, auch die Inhalte von Karten nebeneinander zu setzen.

Grid – z.B. breiter Bereich der Landing Page

CSS Grid und Subgrid – Zeilen gleicher Höhe

Mit CSS flex und grid ist ein solider Spaltensatz eingezogen. Aber erst jetzt haben flex und grid endlich eine einfache Lösung für ein tägliches Problem: In zwei, drei oder mehr Spalten bilden Überschriften, Texte und Bilder ein Raster.

<div class="post-wrapper">
	<div class="post">
		<header class="post-header">
			<h2 class="post-title">
				<a href="/css-grid-und-subgrid/">CSS Grid und Subgrid – Zeilen gleicher Höhe</a>
			</h2>
		</header>
		<div class="postsvg">
			<a href="/css-grid-und-subgrid/"> <img src="/wp-content/uploads/2022/09/css-grid-und-subgrid.svg" width="966" height="444" alt="CSS subgrad Spalten mit Zeilen gleicher Höhe"> </a> 
		</div>
		<div class="postexcerpt">
			<p>Mit CSS flex und grid ist ein solider Spaltensatz eingezogen. Aber erst jetzt haben flex und grid endlich eine einfache Lösung für ein tägliches Problem: In zwei, drei oder mehr Spalten bilden Überschriften, Texte und Bilder ein Raster.</p>
		</div>
	</div>
</div>
			

Die wichtigsten Regeln und Konzepte für Container Queries

1. Ein Container muss explizit mit container-type definiert werden:

   /* Container definieren */
   .post-wrapper {
   	container-type: inline-size;
   	/* oder: container-type: size, wenn auch die Höhe relevant ist */
   	padding: 1rem;
   	width: 100%;
   	max-width: 920px;
   	background: gainsboro;
   }
   

   Ein zusätzlicher Wrapper ist eigentlich nicht nötig, solange container-type auf einem Vorfahren gesetzt ist.
   inline-size misst die Breite (in Schreibrichtung, also meist horizontal). Container Queries messen nur die Größe des nächsten enthaltenen Containers – nicht des Viewports!
2. Zusätzlich kann container-name gesetzt werden, um gezielt auf den Container zuzugreifen:

   .post-wrapper {
   	container-type: inline-size;
   	container-name: post;
   }
   

3. Die Container Query ähnelte einer @media-Query:

   /* Wenn der Container breiter als 400px ist */
   @container (min-width: 401px) {
   	.post {
   		display: grid;
   		grid-template-areas: "header header"
   						     "image excerpt";
   		grid-template-columns: 1fr 1fr;
   		gap: 1rem
   	}
   }
   

   oder mit einem Namen

   @container post (min-width: 400px) {
    …
   }
   

4. Container Queries wirkt nur auf Elemente innerhalb des definierten Containers.

Cards

Das Layout für Produkt-Karten und ebenso für die Auszüge von Blog-Beiträgen setzt Karten / Auszüge untereinander, bis der Platz auf einem größeren Monitor reicht, um zwei oder mehr Karten nebeneinander zu setzen.

Wenn diese Layout-Elemente nicht nur im Hauptbereich der Seite sitzen, sondern auch in Seitenleisten oder Fußleisten erscheinen, kommen ebenfalls Container-Queries zum Zuge.

.content, 
.sidebar {
	min-width: 120px;
	container-type: inline-size;
	container-name: cards;
}

/* Ab 520px: 2 Spalten */
@container cards (min-width: 520px) {
	.card-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.card {
		flex: 1 1 calc(50% - 1rem);
	}
}

/* Ab 920px: 4 Spalten */
@container cards (min-width: 920px) {
	.card {
		flex: 1 1 calc(25% - 1rem);
	}
}

Die wichtigsten Regeln und Eigenschaft zu Container Queries

Werden Container Queries die klassischen Media Queries ersetzen?

Immerhin sind Media Queries über 12 Jahre alt, und selbst einfache Internet-Auftritte profitieren von wiederverwendbaren Komponenten. Auf jeden Fall werden @container immer häufiger @media ergänzen.