Mehrspaltiges Layout
Die Spezifikation für das mehrspaltige Layout bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie sie vielleicht in einer Zeitung sehen. Dieser Artikel erklärt, wie Sie diese Funktion verwenden können.
| Voraussetzungen: | HTML-Grundlagen (studieren Sie Strukturierung von Inhalten mit HTML) und eine Vorstellung davon, wie CSS funktioniert (studieren Sie CSS-Styling-Grundlagen.) |
|---|---|
| Ziel: | Lernen, wie man ein mehrspaltiges Layout auf Webseiten erstellt, wie man es in einer Zeitung finden könnte. |
Ein einfaches Beispiel
Lassen Sie uns erkunden, wie man das mehrspaltige Layout verwendet — oft als multicol bezeichnet. Sie können mitmachen, indem Sie die multicol Ausgangsdatei 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 dreispaltiges Layout
Unsere Ausgangsdatei enthält ein sehr einfaches HTML: einen Wrapper mit einer Klasse container, in dem sich eine Überschrift und einige Absätze befinden.
Das <div> mit einer Klasse von container wird zu unserem 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 an Spalten. Wenn Sie das folgende CSS zu Ihrem Stylesheet hinzufügen und die Seite neu laden, erhalten Sie drei Spalten:
.container {
column-count: 3;
}
Die Spalten, die Sie erstellen, haben flexible Breiten — der Browser berechnet, wie viel Platz jeder Spalte zugewiesen wird.
Einstellen der column-width
Ändern Sie Ihr CSS, um column-width wie folgt zu verwenden:
.container {
column-width: 200px;
}
Der Browser erstellt jetzt so viele Spalten, wie es die von Ihnen angegebene Größe zulässt; der verbleibende Platz wird dann zwischen den vorhandenen Spalten verteilt. Das bedeutet, dass Sie nicht genau die von Ihnen angegebene Breite erhalten, es sei denn, Ihr Container ist genau durch diese Breite teilbar.
Stil der Spalten
Die durch multicol erstellten Spalten können nicht einzeln 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, die Anzeige der Spalten zu ändern:
- Änderung 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 durch Hinzufügen einer column-gap-Eigenschaft zu ändern. 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 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.
.container {
column-count: 3;
column-gap: 20px;
column-rule: 4px dotted rgb(79 185 227);
}
Versuchen Sie, Linien mit unterschiedlichen Stilen und Farben hinzuzufügen.
Beachten Sie, dass die Linie keine eigene Breite einnimmt. Sie liegt im 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.
Über Spalten spannen
Sie können ein Element alle Spalten überspannen lassen. In diesem Fall bricht der Inhalt dort, wo das überspannende Element eingeführt wird, und wird dann unterhalb des Elements fortgesetzt, wodurch ein neuer Satz Spalten entsteht. Um ein Element über alle Spalten zu spannen, geben Sie den Wert all für die column-span-Eigenschaft an.
Hinweis:
Es ist nicht möglich, ein Element nur über 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 so, wie sich Inhalte in Seitenträgermedien verhalten, z.B. wenn Sie eine Webseite drucken. Wenn Sie Ihren Inhalt zu einem multicol Container machen, wird er in Spalten fragmentiert. Damit der Inhalt dies tun kann, muss er brechen.
Fragmentierte Boxen
Manchmal erfolgt dieses Brechen an Stellen, die zu einem schlechten Leseerlebnis führen. Im untenstehenden Beispiel habe ich multicol verwendet, um eine Reihe von Boxen darzustellen, von denen jede eine Überschrift und etwas Text enthält. Die Überschrift wird vom Text getrennt, wenn die Spalten zwischen den beiden fragmentieren.
<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>
.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;
}
Einstellung von break-inside
Um dieses Verhalten zu steuern, können wir Eigenschaften aus der CSS Fragmentation Spezifikation verwenden. Diese Spezifikation gibt uns Eigenschaften, um das Brechen von Inhalten in multicol und in Seitenträgermedien zu steuern. Zum Beispiel indem wir 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, daher wollen wir nicht, dass er fragmentiert wird.
.card {
break-inside: avoid;
background-color: rgb(207 232 220);
border: 2px solid rgb(79 185 227);
padding: 10px;
margin: 0 0 1em 0;
}
Durch das Hinzufügen dieser Eigenschaft bleiben die Boxen ganz — sie fragmentieren jetzt nicht mehr über die Spalten hinweg.
Zusammenfassung
Sie wissen nun, wie Sie die grundlegenden Funktionen des mehrspaltigen Layouts nutzen, ein weiteres Werkzeug, das Ihnen zur Verfügung steht, wenn Sie eine Layoutmethode für Ihre Entwürfe wählen.