Übung: Schöner rastern mit Mondrian

In dieser Übung geht es darum zu verstehen, wie HTML-Elemente mit CSS gerastert werden können. Dazu baust du einen «responsive Mondrian», d.h. eine Website mit farbigen Flächen, die ähnlich angeordnet sind, wie ein Mondrian-Bild. Die Flächen sollen sich je nach Viewport-Grösse anders anordnen (mind. ein Breakpoint).

Aufbau der Raster und Beispiele

Der Raster beinhaltet sieben Rechtecke: Ein Schwarzes, ein Rotes, ein Blaues, ein Gelbes und drei Weisse.

Als Referenz-Beispiele dienen folgende Kompositionen:

3 Spalten, 3 Zeilen.

4 Spalten, 3 Zeilen.

4 Spalten, 5 Zeilen.

5 Spalten, 3 Zeilen.

5 Spalten, 4 Zeilen.

Programmierung

Der Raster

Zum Rastern brauchst du ein HTML-Element, z.B. eine <section>. Statt name kannst du deinen Vornamen als id verwenden.

<section id="name"></section>

Im Stylesheet schreibst du:

*, html {
  margin: 0;
  box-sizing: border-box; /* vermeidet Probleme mit Weissraum */
}

#name {
  width: 100vw;
  height: 100vh;
  border: 10px solid red; /* später löschen */
}

Auch hier kannst du statt name deinen Vornamen benutzen.

Die Inhalte

Jeder Raster enthält sieben Elemente, vier davon haben eigene Identitäten.

<section class="name">
  <div id="black-rect"></div>
  <div id="yellow-rect"></div>
  <div id="blue-rect"></div>
  <div id="red-rect"></div>
  <div id="white-rect-1"></div>
  <div id="white-rect-2"></div>
  <div id="white-rect-3"></div>
</section>

Die Zellen CSS-Regeln brauchen nicht viele Regeln.

#red-rect { background: red;    }
#black-rect { background: black;  }
#blue-rect { background: blue;   }
#yellow-rect { background: yellow; }
#white-rect-1,
#white-rect-2,
#white-rect-3 { background: white;  }

Die Inhalte sind im Moment noch unsichtbar, weil sie keine Grösse haben.

Der Raster

Die Mondrian-Sections rasterst du mit display: grid;.

.mondrian {
  width: 100vw;
  height: 100vh;
  border: 1px solid red;
  display: grid;
}

Das Resultat sieht so aus:

Raster ohne definierte Spalten und Zeilen.

Interessant ist hier Folgendes:

• Durch das Einstellen auf display:grid; wurden die Mondrian-Sections so viele Zeilen unterteilt, wie es Inhalte gibt.
• Jede Zeile ist so breit wie der Raster (wir haben noch keine Spalten definiert).
• Dadurch entstehen sieben Zellen.
• Die Inhalte werden, obwohl sie keine definierte Höhe und Breite haben, auf die Grösse dieser Zellen gestreckt.

Erstes Beispeil: 3 Spalten, 3 Zeilen

Im Stylesheet gliederst die die erste Mondrian-Sektion in drei Spalten und drei Zeilen.

Die Einheit fr steht für ´fraction’. Damit kannst du die verfügbare Fläche gleichmässig oder in Verhältnissen zueinander auf Rasterspalten verteilen.

.mondrian {
  /* zusätzliche Eigenschaften: */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

Das ergibt Folgendes:

Die Fläche wurde in drei Spalten und drei Zeilen gegliedert. Wieder können wir einige interessante Aspekte von CSS-Grid beobachten:

• Durch die drei Spalten und drei Zeilen entstehen neun Zellen.
• Die Inhalte ordnen sich von oben links nach unten rechts der Reihe nach in diese Zellen ein.
• Die Inhalte werden auf die Grösse der einzelnen Zellen gestreckt.

Rand und Rasterlinien

Mit background, padding und grid-gap kannst du dem Raster einen Rand und Rasterlinien zu geben. Die Umrisslinie brauchen wir jetzt nicht mehr.

.mondrian {
  width: 100vw;
  height: 100vh;
  display: grid;
  background: black;
  padding: 10px; /* diesen Wert musst du selber entscheiden */
  grid-gap: 10px; /* diesen Wert musst du selber entscheiden */
}

Das ergibt für die erste Mondrian-Sektion folgende Anordnung.

Nun sind alle Inhalte so gross wie eine Zelle, und nach der siebten Zelle ist der Raster leer. Die Inhalte müssen in die richtige Reihenfolge gebracht werden und über die richtige Anzahl Spalten und Zeilen gespannt werden.

Reihenfolge von Inhalten eines Rasters

Die Inhalte eines gerasterten HTML-Elements werden der Reihe nach von oben rechts nach unten links in die Zellen eingefügt, die durch die Spalten und Zeilen des Rasters entstehen. Wenn es übrigens nicht genug Zeilen im Raster hat, werden automatisch so viele zusätzliche Zeilen angefügt, bis alle Inhalte untergebracht sind.

Die Reihenfolge der Inhalte kannst du natürlich ändern, indem du die Reihenfolge im HTML-Markup änderst. Die Reihenfolge von Inhaltes eines CSS-Grid-Elements kannst du aber auch mit der Eigenschaft order verändern.

Z.B. kannst du das rote Rechteck in der ersten Mondrian-Section an den Anfang verschieben:

#eins .rot { order: -1; }

Positive Werte der Eigenschaft order ergeben eine aufsteigender Folge, der Wert -1 springt automatisch an den Anfang. Mit der Reihenfolge alleine kommst du aber nicht ans Ziel. Du brauchst eine Möglichkeit, einen Inhalt über mehrere Zellen zu spannen.

Mehrere Zeilen und Spalten überspannen

Mit den CSS-Eigenschaften grid-row und grid-column kannst du bestimmen, wo sich ein Inhalt in einem Raster einfügt. Genauer gesagt, von welcher Rasterlinie bis zu welcher Rasterlinie es sich einfügt. Mit Rasterlinie sind die Linien gemeint, die die Spalten und Zeilen eines Rasters begrenzen. In einem Raster mit drei Spalten und drei Zeilen gibt es vier vertikale Rasterlinien: Die erste am linken Rand, die Zweite zwischen der ersten und zweiten Spalte, die Dritte zwischen der zweiten und der dritten Spalte und die Vierte am rechten Rand des Rasters. Es gibt auch vier horizontale Rasterlinien: Die Erste am oberen Rand, die zweite zwischen der ersten und der zweiten Zeile, die Dritte zwischen der zweiten und der Dritten Zeile und die Vierte am unteren Rand.

Die Werte der Eigenschaften grid-row und grid-column referenzieren diese Rasterlinien. Du kannst entweder nur angeben, an welcher Rasterlinie ein Element angeschlagen werden soll, z.B. grid-column: 2; oder ob ein Element mehrere Spalten oder Zeilen überspannen soll, z.B. grid-row: 1/3;. In letzterem Beispiel wird ein Element vom oberen Rand eines Rasters bis zur horizontalen Rasterlinie zwischen der zweiten und dritten Zeile gespannt und überlagert so die ersten zwei Zeilen des Rasters.

Und genau so kannst du das erste weisse Rechteck dem Referenz-Beispiel gemäss in den Raster einpassen:

#white-rect-1 {
  grid-row: 1/3;
  grid-column: 2;
}

Fun Fact: Die Rasterlinien kannst du mit den Dev-Tools von Firefox einblenden.

Erster Raster: 3 Spalten, 3 Zeilen – Fortsetzung

Nun hast du alle nötigen Eigenschaften, um die CSS-Regeln für deinen Responsive Mondrian zu schreiben.