Mehrspaltenlayout

Die Mehrspaltenlayout-Spezifikation bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie sie möglicherweise in einer Zeitung sehen. Dieser Artikel erklärt, wie Sie dieses Feature nutzen können.

Voraussetzungen: Grundlagen von HTML (siehe Inhalte mit HTML strukturieren) und ein grundlegendes Verständnis dafür, wie CSS funktioniert (siehe CSS Styling-Grundlagen).
Ziel: Erlernen, wie man ein Mehrspaltenlayout auf Webseiten erstellt, wie Sie es in einer Zeitung finden könnten.

Ein einfaches Beispiel

Lassen Sie uns erkunden, wie man ein Mehrspaltenlayout nutzt – oft als Multicol bezeichnet. Sie können dem Beispiel folgen, indem Sie die Multicol-Ausgangsdatei herunterladen und das CSS an den geeigneten Stellen hinzufügen. Am Ende des Abschnitts können Sie ein Beispiel sehen, wie der endgültige Code aussehen sollte.

Ein Drei-Spalten-Layout

Unsere Ausgangsdatei enthält ein sehr einfaches HTML: einen Wrapper mit einer Klasse von 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 column-count-Eigenschaft nimmt eine Zahl als Wert und erstellt diese Anzahl von 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 von Ihnen erstellten Spalten haben flexible Breiten – der Browser berechnet, wie viel Platz jeder Spalte zugewiesen wird.

Einstellen der Spaltenbreite

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

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

Der Browser gibt Ihnen nun so viele Spalten wie möglich in der von Ihnen angegebenen Größe; der verbleibende Platz wird dann zwischen den bestehenden Spalten aufgeteilt. Das bedeutet, dass Sie nicht genau die Breite erhalten, die Sie angegeben haben, es sei denn, Ihr Container ist exakt durch diese Breite teilbar.

Die Spalten stylen

Die durch Multicol erstellten Spalten können nicht individuell gestylt werden. Es gibt keine Möglichkeit, eine Spalte größer als andere zu machen oder die Hintergrund- oder Textfarbe einer einzelnen Spalte zu ändern. Sie haben zwei Möglichkeiten, um die Anzeige der Spalten zu ä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 obiges Beispiel, um die Größe des Abstands 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 die gleichen Werte wie border.

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

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

Etwas zu beachten ist, dass die Linie selbst keine Breite einnimmt. Sie verläuft über den Abstand, den 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 überspannen

Sie können ein Element über alle Spalten erstrecken. In diesem Fall bricht der Inhalt, wo das überspannende Element eingeführt wird, und setzt sich dann unterhalb des Elements fort, 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 Mehrspaltenlayouts ist fragmentiert. Er verhält sich im Wesentlichen genauso wie Inhalte in paginierten Medien, z.B. wenn Sie eine Webseite drucken. Wenn Sie Ihren Inhalt in einen Multicol-Container umwandeln, fragmentiert er in Spalten. Damit der Inhalt dies tun kann, muss er brechen.

Fragmentierte Boxen

Manchmal tritt dieses Brechen an Stellen auf, die zu einem schlechten Leseerlebnis führen. Im folgenden Beispiel habe ich Multicol verwendet, um eine Serie 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 werden.

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 gibt 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, daher möchten wir nicht, 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;
}

Die Hinzufügung dieser Eigenschaft bewirkt, dass die Boxen in einem Stück bleiben – sie fragmentieren nun nicht mehr über die Spalten hinweg.

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 fortfahren – siehe Testen Sie Ihre Fähigkeiten: Multicol.

Zusammenfassung

Sie wissen nun, wie Sie die Grundfunktionen des Mehrspaltenlayouts nutzen, ein weiteres Werkzeug, das Ihnen zur Verfügung steht, wenn Sie eine Layoutmethode für Ihre Designs wählen, die Sie erstellen.

Siehe auch