Beispiel:CSS-calc-3.html
Aus SELFHTML-Wiki
<!doctype html> <html lang="de"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Das letzte Kind im Grid</title>
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
body {
font-family: sans-serif;
max-width: 40rem;
margin: auto;
padding: .7rem;
}
section {
margin-block: 2rem;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.card {
/*
Die Karten können sich selbst zählen:
sibling-index() ist die eigene Position.
sibling-count() ist die Anzahl aller Karten.
Daraus berechnen wir den Abstand zum Ende:
Karte 1: 3 - 1 = 2 Schritte bis zum Ende
Karte 2: 3 - 2 = 1 Schritt bis zum Ende
Karte 3: 3 - 3 = 0 Schritte bis zum Ende
*/
--distance-to-end: calc(sibling-count() - sibling-index());
/*
Jetzt machen wir daraus einen einfachen Schalter:
- Die letzte Karte hat Abstand 0.
- Nur bei ihr wird --is-last-card zu 1.
- Bei allen anderen Karten bleibt --is-last-card 0.
*/
--is-last-card: clamp(0, calc(1 - var(--distance-to-end)), 1);
/*
Für die Farbe brauchen wir denselben Schalter als Prozentwert:
Normale Karte: 0 * 100% = 0%
Letzte Karte: 1 * 100% = 100%
*/
--last-card-color: calc(var(--is-last-card) * 100%);
border: thin solid currentColor;
/*
Bei normalen Karten bleibt die Mischung bei #fffbf0.
Bei der letzten Karte wechselt sie komplett zu ##ebf5d7.
*/
background-color: color-mix(
in srgb,
#fffbf0 calc(100% - var(--last-card-color)),
#ebf5d7 var(--last-card-color)
);
padding-inline: 1rem;
}
.card h3 {
}
.full-width-last .card {
/*
Normale Karten belegen 1 Spalte.
Die letzte Karte belegt 2 Spalten.
Nicht letzte Karte: span calc(1 + 0) = span 1
Letzte Karte: span calc(1 + 1) = span 2
*/
grid-column: span calc(1 + var(--is-last-card));
}
.centered-half-last .card {
/*
Auch hier wird die letzte Karte zuerst auf eine eigene Zeile gesetzt,
indem sie über beide Spalten läuft.
*/
grid-column: span calc(1 + var(--is-last-card));
justify-self: center;
/*
Normale Karten bleiben 100% breit.
Die letzte Karte wird 50% breit.
Nicht letzte Karte: 100% - 0 * 50% = 100%
Letzte Karte: 100% - 1 * 50% = 50%
*/
width: calc(100% - (var(--is-last-card) * 50%));
box-sizing: border-box;
}
</style>
</head> <body>
Inhaltsverzeichnis
Das letzte Kind im Grid
<section>
Letztes Element über die ganze Breite
<article class="card">
Karte 1
Position 1 von 3, also 2 Schritte bis zum Ende
</article>
<article class="card">
Karte 2
Position 2 von 3, also 1 Schritt bis zum Ende
</article>
<article class="card">
Karte 3
Position 3 von 3, also 0 Schritte bis zum Ende
</article>
</section>
<section>
Letztes Element halb breit und zentriert
<article class="card">
Karte 1
Position 1 von 3, also 2 Schritte bis zum Ende
</article>
<article class="card">
Karte 2
Position 2 von 3, also 1 Schritt bis zum Ende
</article>
<article class="card">
Karte 3
Position 3 von 3, also 0 Schritte bis zum Ende
</article>
</section>
</body> </html>
