Mehrspaltiges Layout

Die Spezifikation für mehrspaltige Layouts bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie es beispielsweise in einer Zeitung sehen könnten. Dieser Artikel erklärt, wie Sie dieses Feature nutzen können.

Voraussetzungen: HTML-Grundlagen (studieren Sie Inhalte mit HTML strukturieren), und eine Vorstellung davon, wie CSS funktioniert (studieren Sie CSS-Styling-Grundlagen).
Ziel: Lernen, wie man ein mehrspaltiges Layout auf Webseiten erstellt, wie Sie es in einer Zeitung finden könnten.

Ein einfaches Beispiel

Lassen Sie uns erkunden, wie man ein mehrspaltiges Layout verwendet — oft multicol genannt. Sie können mitmachen, indem Sie die Multicol-Ausgangsdatei herunterladen und das CSS in die entsprechenden Stellen hinzufügen. Am Ende des Abschnitts können Sie ein Beispiel sehen, wie der finale Code aussehen sollte.

Ein dreispaltiges Layout

Unsere Ausgangsdatei enthält etwas sehr einfaches HTML: ein Wrapper mit der Klasse container, in dem sich eine Überschrift und einige Absätze befinden.

Das <div> mit der Klasse container wird unser Multicol-Container. Wir aktivieren Multicol, indem wir eine von zwei Eigenschaften verwenden: column-count oder column-width. Die Eigenschaft column-count nimmt eine Zahl als Wert und erstellt diese Anzahl an Spalten. Wenn Sie das folgende CSS zu Ihrem Stylesheet hinzufügen und die Seite neu laden, erhalten Sie drei Spalten:

css
.container {
  column-count: 3;
}

Die erstellten Spalten haben flexible Breiten — der Browser berechnet, wie viel Platz jeder Spalte zugewiesen wird.

Spaltenbreite einstellen

Ändern Sie Ihr CSS, um column-width wie folgt zu verwenden:

css
.container {
  column-width: 200px;
}

Der Browser wird Ihnen nun so viele Spalten der angegebenen Größe geben, wie er kann; der verbleibende Platz wird dann zwischen den vorhandenen Spalten aufgeteilt. Das bedeutet, dass Sie nicht genau die Breite erhalten, die Sie angeben, es sei denn, Ihr Container ist genau durch diese Breite teilbar.

Gestaltung der Spalten

Die von Multicol erstellten Spalten können nicht individuell gestaltet werden. Es gibt keine Möglichkeit, eine Spalte größer zu machen als andere oder die Hintergrund- oder Textfarbe einer einzelnen Spalte zu ändern. Sie haben zwei Möglichkeiten, die Anzeige der Spalten zu ändern:

  • Ändern der Größe der Lücke zwischen den Spalten mit column-gap.
  • Hinzufügen einer Linie zwischen den Spalten mit column-rule.

Verwenden Sie Ihr obiges Beispiel, um die Größe der Lücke zu ändern, indem Sie eine column-gap-Eigenschaft hinzufügen. Sie können mit verschiedenen Werten experimentieren — die Eigenschaft akzeptiert jede Längeneinheit.

Fügen Sie nun eine Linie zwischen den Spalten mit column-rule hinzu. Ähnlich wie die Eigenschaft border, die Sie in früheren Lektionen kennengelernt haben, ist column-rule eine Kurzform für column-rule-color, column-rule-style und column-rule-width und akzeptiert dieselben Werte wie border.

css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79 185 227);
}

Versuchen Sie, Linien unterschiedlicher Stile und Farben hinzuzufügen.

Etwas, das zu beachten ist, ist, dass die Linie keine eigene Breite einnimmt. Sie liegt über der Lücke, die Sie mit column-gap erstellt haben. Um mehr Platz auf beiden Seiten der Linie zu schaffen, müssen Sie die Größe des column-gap erhöhen.

Spalten übergreifen

Sie können ein Element über alle Spalten erstrecken lassen. In diesem Fall wird der Inhalt dort unterbrochen, wo das übergreifende Element eingefügt wird, und dann unterhalb des Elements fortgesetzt, wodurch ein neuer Satz von Spalten entsteht. Um ein Element über alle Spalten zu erstrecken, geben Sie den Wert all für die Eigenschaft column-span an.

Hinweis: Es ist nicht möglich, ein Element nur über einige Spalten zu erstrecken. Die Eigenschaft kann nur die Werte none (Standardwert) oder all haben.

Spalten und Fragmentierung

Der Inhalt eines mehrspaltigen Layouts ist fragmentiert. Er verhält sich im Wesentlichen genauso wie Inhalte in Medien mit Seitenumbrüchen, z. B. beim Drucken einer Webseite. Wenn Sie Ihren Inhalt in einen Multicol-Container verwandeln, wird er in Spalten fragmentiert. Damit der Inhalt dies tun kann, muss er brechen.

Fragmentierte Boxen

Manchmal passiert dieses Brechen an Stellen, die zu einem schlechten Leseerlebnis führen. Im folgenden Beispiel habe ich Multicol verwendet, um eine Reihe von Boxen anzuordnen, von denen jede eine Überschrift und etwas Text enthält. Die Überschrift wird vom Text getrennt, wenn die Spalten zwischen den beiden fragmentieren.

html
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

Break-inside einstellen

Um dieses Verhalten zu kontrollieren, können wir Eigenschaften aus der CSS Fragmentation Spezifikation verwenden. Diese Spezifikation gibt uns Eigenschaften, um das Brechen von Inhalten in Multicol und in Medien mit Seitenumbrüchen zu steuern. Zum Beispiel, indem Sie die Eigenschaft break-inside mit einem Wert von avoid zu den Regeln für .card hinzufügen. Dies ist der Container der Überschrift und des Textes, sodass wir nicht möchten, dass er fragmentiert wird.

css
.card {
  break-inside: avoid;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

Das Hinzufügen dieser Eigenschaft bewirkt, dass die Boxen in einem Stück bleiben — sie fragmentieren nun nicht mehr über die Spalten.

Testen Sie Ihre Fähigkeiten!

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Multicol.

Zusammenfassung

Sie wissen nun, wie Sie die grundlegenden Funktionen des mehrspaltigen Layouts verwenden können, ein weiteres Werkzeug zu Ihrer Verfügung, wenn Sie eine Layout-Methode für die Designs auswählen, die Sie erstellen.

Siehe auch