mitmario.dev

Abschnitt 10 · Lektion 3

Elemente platzieren

CSS Im Browser 3 Min Lesezeit 3 BeispieleLektion 3 von 9

Eine Karte soll doppelt so breit sein wie ihre Nachbarn, eine andere über die ganze Zeile gehen. Dafür legt man einzelne Elemente über mehrere Spuren. Klingt einfach, nur hat die Zählung dahinter eine Falle.

Linien, nicht Spuren

Von Linie zu Linie 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.linien {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  color: #b91c1c;
}

.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.zelle {
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* Von Linie 2 bis Linie 4, also über die zweite und
   die dritte Spalte. Zwei Spalten breit, obwohl in
   der Angabe eine 4 steht. */
.breit {
  grid-column: 2 / 4;
  background-color: #b91c1c;
}

Grid zählt die Linien zwischen den Spuren, nicht die Spuren selbst.

Ein Raster mit drei Spalten hat vier senkrechte Linien. Eine sitzt am linken Rand, zwei liegen dazwischen und eine am rechten. Nummeriert wird ab 1.

grid-column: 2 / 4 bedeutet deshalb “von Linie 2 bis Linie 4”. Dazwischen liegen die zweite und die dritte Spalte, das Element ist also zwei Spalten breit. In der Angabe steht eine 4 und herausgekommen sind zwei Spalten. Und dort verrechnet man sich.

Im Inspector misst eine gewöhnliche Zelle bei der Breite, mit der die Spalte startet, rund 116 × 51, die breite rund 240 × 51. Das ist nicht das Doppelte von 116. Es sind 116 plus 116 plus die 8 Pixel Lücke dazwischen. Eine Lücke, die überbrückt wird, zählt mit. Das ist die zweite Stelle, an der man sich verrechnet.

Das Ganze ist ein Shorthand, grid-column: 2 / 4 steht für grid-column-start: 2 und grid-column-end: 4. Für Zeilen gibt es grid-row mit denselben Regeln, nur auf der anderen Achse.

span

span spart das Zählen 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.zelle {
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* span sagt nur, wie viele Spuren überdeckt werden.
   Wo das Element anfängt, sucht sich die automatische
   Platzierung selbst. */
.gross {
  grid-column: span 2;
  background-color: #b91c1c;
}

/* Dasselbe für Zeilen. grid-row funktioniert genauso,
   nur auf der anderen Achse. */
.hoch {
  grid-row: span 2;
  background-color: #15803d;
}

Wenn du nicht zählen willst, sagst du einfach, wie breit es sein soll. grid-column: span 2 überdeckt zwei Spuren, und wo das Element anfängt, sucht sich die automatische Platzierung selbst.

Im Streifen kommt dasselbe heraus wie eben, rund 240 × 51 wie bei 2 / 4. Die hohe Kachel darunter misst rund 116 × 110, also 51 plus 51 plus die Lücke. Dieselbe Rechnung, nur nach unten.

Das ist meistens die bessere Wahl. Eine Karte, die doppelt so breit sein soll, ist dann doppelt so breit, egal an welcher Stelle im Raster sie gerade landet. Eine feste Startlinie legt sie dagegen an eine bestimmte Position, und sobald davor eine Karte dazukommt, sitzt sie plötzlich falsch.

grid-row: span 2 macht dasselbe nach unten. Damit baust du die Kachel, die in einer Galerie doppelt so hoch ist wie ihre Nachbarn.

Die negative Zahl

Warum 1 / -1 und nicht 1 / 4 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.raster {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

/* Irgendwann wächst das Raster auf vier Spalten, und
   niemand denkt daran, die Zahlen in den Kindern
   nachzuziehen. */
.fest {
  grid-template-columns: repeat(4, 1fr);
}

.zelle {
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

.voll {
  grid-column: 1 / 4;
  background-color: #b91c1c;
}

.bis-ende {
  grid-column: 1 / -1;
  background-color: #15803d;
}

Linien lassen sich auch von hinten zählen. -1 ist immer die letzte Linie und -2 die vorletzte. Das bringt mehr, als es zuerst klingt.

grid-column: 1 / -1 bedeutet “über die ganze Breite”, und zwar egal, wie viele Spalten das Raster gerade hat. Ändert sich die Spaltenzahl, ändert sich am Kind nichts.

grid-column: 1 / 4 sieht in einem dreispaltigen Raster genauso aus und ist eine Zeitbombe. Irgendwann wächst das Raster auf vier Spalten, und dann bleibt die Karte eine Spalte vor dem Ende stehen, obwohl sie eigentlich über die ganze Breite gehen sollte. In dem Moment denkt niemand daran, in den Kindern die Zahlen nachzuziehen.

Feste Zahlen nehme ich nur, wenn die Position wirklich fest ist. Für “so breit wie es geht” steht 1 / -1, für “so und so viele Spuren” steht span.

In der Aufgabe sollen zwei von sieben Karten aus der Reihe tanzen.

Zum Mitnehmen

Gezählt werden die Linien, nicht die Spuren, und zwar ab 1. Ein dreispaltiges Raster hat vier senkrechte Linien. grid-column: 2 / 4 reicht deshalb von Linie 2 bis Linie 4 und ist zwei Spalten breit, nicht drei.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.