Mehrspaltiges Layout

Die Spezifikation für mehrspaltiges Layout bietet Ihnen eine Methode, Inhalte in Spalten anzuordnen, wie Sie sie in einer Zeitung sehen könnten. Dieser Artikel erklärt, wie Sie diese Funktion nutzen.

Voraussetzungen: HTML-Grundlagen (lernen Sie Einführung in HTML) und eine Vorstellung davon, wie CSS funktioniert (lernen Sie Einführung in CSS).
Ziel: Zu lernen, wie man mehrspaltige Layouts auf Webseiten erstellt, wie sie in einer Zeitung zu finden sind.

Ein einfaches Beispiel

Lassen Sie uns erkunden, wie man ein mehrspaltiges Layout verwendet — oft als multicol bezeichnet. Sie können mitmachen, indem Sie die Startdatei für das multicol herunterladen und das CSS an den entsprechenden Stellen hinzufügen. Am Ende des Abschnitts sehen Sie ein Beispiel, wie der endgültige Code aussehen sollte.

Ein Drei-Spalten-Layout

Unsere Startdatei enthält etwas sehr einfaches HTML: einen Wrapper mit einer Klasse namens 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 der beiden Eigenschaften verwenden: column-count oder column-width. Die Eigenschaft column-count nimmt eine Zahl als Wert und erstellt entsprechend viele 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 Spalten, die Sie erstellen, haben flexible Breiten — der Browser berechnet, wie viel Platz jeder Spalte zugeteilt wird.

Setzen der column-width

Ä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 von Ihnen angegebenen Größe geben, wie möglich; der verbleibende Platz wird dann zwischen den vorhandenen Spalten aufgeteilt. Das bedeutet, dass Sie nicht genau die von Ihnen festgelegte Breite erhalten, es sei denn, Ihr Container ist genau durch diese Breite teilbar.

Styling der Spalten

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

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

Verwenden Sie Ihr oben genanntes Beispiel und ändern Sie die Größe des Abstands, indem Sie eine column-gap-Eigenschaft hinzufügen. Sie können mit verschiedenen Werten spielen — die Eigenschaft akzeptiert jede Längeneinheit.

Fügen Sie nun eine Regel zwischen den Spalten mit column-rule hinzu. Ähnlich wie bei der border-Eigenschaft, 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);
}

Probieren Sie aus, Regeln mit unterschiedlichen Stilen und Farben hinzuzufügen.

Etwas zu beachten ist, dass die Regel keine eigene Breite einnimmt. Sie liegt über dem mit column-gap erstellten Spalt. Um auf beiden Seiten der Regel mehr Platz zu schaffen, müssen Sie die Größe des column-gap erhöhen.

Spaltenüberspannung

Sie können ein Element über alle Spalten hinweg anordnen. In diesem Fall wird der Inhalt an der Stelle unterbrochen, an der das überspannende Element eingeführt wird, und dann unterhalb des Elements weitergeführt, wodurch eine neue Reihe von Spalten erstellt wird. Um ein Element über alle Spalten zu spannen, geben Sie für die Eigenschaft column-span den Wert all an.

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

Spalten und Fragmentierung

Der Inhalt eines mehrspaltigen Layouts ist fragmentiert. Er verhält sich im Wesentlichen ähnlich wie Inhalte in paginierten Medien, z. B. wenn Sie eine Webseite drucken. Wenn Sie Ihren Inhalt in einen Multicol-Container verwandeln, wird er in Spalten fragmentiert. Damit der Inhalt dies kann, muss er gebrochen werden.

Fragmentierte Boxen

Manchmal tritt dieser Bruch an Stellen auf, 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 fragmentiert sind.

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;
}

Setzen von break-inside

Um dieses Verhalten zu steuern, können wir Eigenschaften aus der CSS-Fragmentierung Spezifikation verwenden. Diese Spezifikation bietet uns Eigenschaften, um das Brechen von Inhalten in Multicol und in paginierten Medien zu steuern. Zum Beispiel, indem man die Eigenschaft break-inside mit einem Wert von avoid zu den Regeln für .card hinzufügt. Dies ist der Container der Überschrift und des Textes, also wollen wir ihn nicht fragmentiert haben.

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 finden einige weitere Tests, um zu überprüfen, dass Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Multicol.

Zusammenfassung

Sie wissen jetzt, wie Sie die grundlegenden Funktionen des mehrspaltigen Layouts nutzen können, ein weiteres Werkzeug, das Ihnen zur Verfügung steht, wenn Sie eine Methode zur Gestaltung Ihrer Entwürfe wählen.

Siehe auch