Mehrspaltiges Layout
Die Mehrspalten-Layout-Spezifikation bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie sie in einer Zeitung sehen könnten. Dieser Artikel erklärt, wie Sie diese Funktion verwenden können.
| Voraussetzungen: | Grundlagen von HTML (studieren Sie Inhalte mit HTML strukturieren), und eine Vorstellung davon, wie CSS funktioniert (studieren Sie CSS-Grundlagen zum Styling.) |
|---|---|
| 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 — oft als Multicol bezeichnet — verwendet. Sie können mitmachen, indem Sie die Multicol-Ausgangsdatei herunterladen und das CSS an die entsprechenden Stellen hinzufügen. Am Ende des Abschnitts können Sie ein Beispiel sehen, wie der endgültige Code aussehen sollte.
Ein dreispaltiges Layout
Unsere Ausgangsdatei enthält etwas sehr einfaches HTML: einen Wrapper mit einer Klasse von container, in dem sich eine Überschrift und einige Absätze befinden.
Der <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 von 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 ermittelt, wie viel Platz jeder Spalte zugewiesen wird.
Festlegen der column-width
Ändern Sie Ihr CSS, um column-width wie folgt zu verwenden:
.container {
column-width: 200px;
}
Der Browser wird Ihnen nun so viele Spalten wie möglich in der von Ihnen angegebenen Größe geben; verbleibender Platz wird dann zwischen den bestehenden Spalten geteilt. Das bedeutet, dass Sie nicht genau die von Ihnen angegebene Breite erhalten, es sei denn, Ihr Container ist genau durch diese Breite teilbar.
Styling der Spalten
Die von Multicol erstellten Spalten können nicht individuell gestylt werden. Es gibt keine Möglichkeit, eine Spalte größer zu machen als andere Spalten oder die Hintergrund- oder Textfarbe einer einzelnen Spalte zu ändern. Sie haben zwei Möglichkeiten, die Anzeige der Spalten zu ändern:
- Ändern Sie die Größe des Abstands zwischen den Spalten mit
column-gap. - Fügen Sie eine Linie zwischen den Spalten hinzu 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 border-Eigenschaft, die Sie in vorherigen Lektionen kennengelernt haben, ist column-rule eine Shorthand für column-rule-color, column-rule-style, und column-rule-width, und akzeptiert die gleichen Werte wie border.
.container {
column-count: 3;
column-gap: 20px;
column-rule: 4px dotted rgb(79 185 227);
}
Versuchen Sie, Linien in verschiedenen Stilen und Farben hinzuzufügen.
Es ist zu beachten, dass die Linie keine eigene Breite einnimmt. Sie liegt über dem 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.
Spannen über Spalten
Sie können ein Element dazu veranlassen, sich über alle Spalten zu erstrecken. In diesem Fall wird der Inhalt dort unterbrochen, wo das Element über die Spalten eingeführt wird, und setzt sich dann unterhalb des Elements fort, indem eine neue Gruppe von Spalten erstellt wird. Um ein Element über alle Spalten zu spannen, geben Sie den Wert all für die Eigenschaft column-span an.
Hinweis:
Es ist nicht möglich, dass ein Element nur einige Spalten umspannt. Die Eigenschaft kann nur die Werte none (was der Standardwert ist) oder all haben.
Spalten und Fragmentierung
Der Inhalt eines mehrspaltigen Layouts ist fragmentiert. Er verhält sich im Wesentlichen genauso wie Inhalt in Paginierungsmedien, z. B. wenn Sie eine Webseite drucken. Wenn Sie Ihren Inhalt in einen Multicol-Container umwandeln, wird er in Spalten fragmentiert. 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 Beispiel unten habe ich Multicol verwendet, um eine Reihe von Boxen anzuordnen, die jeweils eine Überschrift und etwas Text enthalten. Die Überschrift wird vom Text getrennt, wenn die Spalten sich 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-bottom: 1em;
}
Festlegen von break-inside
Um dieses Verhalten zu steuern, können wir Eigenschaften aus der CSS Fragmentation-Spezifikation verwenden. Diese Spezifikation gibt uns Eigenschaften an die Hand, um das Brechen von Inhalten in Multicol und in Paginierungsmedien zu steuern. Zum Beispiel durch Hinzufügen der Eigenschaft break-inside mit dem Wert avoid zu den Regeln für .card. Dies ist der Container der Überschrift und des Textes, daher möchten wir nicht, dass dieser fragmentiert wird.
.card {
break-inside: avoid;
background-color: rgb(207 232 220);
border: 2px solid rgb(79 185 227);
padding: 10px;
margin-bottom: 1em;
}
Durch das Hinzufügen dieser Eigenschaft bleiben die Boxen vollständig — sie fragmentieren nun nicht mehr über die Spalten hinweg.
Zusammenfassung
Sie wissen nun, wie Sie die grundlegenden Funktionen von Mehrspalten-Layouts nutzen können, ein weiteres Werkzeug, das Ihnen zur Verfügung steht, wenn Sie ein Layout für die Designs, die Sie erstellen, auswählen.