Zuviel Markup

[Gunnar Bittersmann]

@@heinetz

Was meint Ihr?

Na, da hast du uns ja ein schönes Rätsel zum Wochenanfang gestellt. Wobei das Rätsel nicht darin besteht umzusetzen, was du willst; sondern darin herauszufinden, was du willst.

Ich rate mal: Bei schmalem Viewport sollen manche Elemente (Bilder bspw.) über die volle Breite vom linken bis zum rechten Viewportrand gehen. Andere Elemente (Text) sollen links und rechts Abstand zum Viewportrand haben. Bei breitem Viewport sollen aber alle (Bilder und Texte) dieselbe Maximalbreite haben und horizontal zentriert sein.

Dafür brauchst du keine dreifach verschachtelten Elemente. Nur den Container und dessen Kinder. In meinem Beispiel sind das:

<figure>
	<img/>
	<figcaption>…</figcaption>
	<footer>…</footer>
</figure>

Mit Grid ist das einfach gemacht: 3 Spalten, die linke und rechte gleich breit, mindestens 1rem (bspw.). Die mittlere Spalte höchtens 40rem (bspw.). Die Spaltenlinien erhalten sprechende Namen:

figure
{
	display: grid;
	grid-template-columns:
		[full-start] minmax(1rem, 1fr)
		[text-start] minmax(auto, 40rem)
		[text-end] minmax(1rem, 1fr)
		[full-end];
}

Bild über volle Breite:

figure > img
{
	grid-column: full;
}

Text im Bereich zwischen den Linien text-start und text-end:

figcaption,
figure > footer
{
	grid-column: text;
}

Ab einem Breakpoint wird das Bild auch durch die Linien text-start und text-end begrenzt:

@media (min-width: 42em)
{
	figure > img
	{
		grid-column: text;
	}
}

Fertig.

Anstatt die Breiten der Elemente von außen durch ein Grid festzulegen, kann man auch für die Elemente Breiten und Außenabstände angeben.

LLAP 🖖