Mehrspaltiges Layout
Die Spezifikation für mehrspaltige Layouts bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie sie vielleicht in einer Zeitung sehen. Dieser Artikel erklärt, wie Sie dieses Feature nutzen können.
| Voraussetzungen: | Grundkenntnisse in HTML (lernen Sie mehr über Strukturierung von Inhalten mit HTML), und eine Vorstellung davon, wie CSS funktioniert (lernen Sie mehr über CSS Styling-Grundlagen.) |
|---|---|
| Ziel: | Lernen, wie Sie ein mehrspaltiges Layout auf Webseiten erstellen, wie Sie es vielleicht in einer Zeitung finden. |
Ein einfaches Beispiel
Lassen Sie uns erkunden, wie man ein mehrspaltiges Layout nutzt — oft als multicol bezeichnet. Sie können mitmachen, indem Sie die Multicol-Startdatei herunterladen und das CSS an den entsprechenden Stellen hinzufügen. Am Ende des Abschnitts können Sie ein Beispiel dafür sehen, wie der endgültige Code aussehen sollte.
Ein Dreispaltenlayout
Unsere Startdatei enthält einige sehr einfache HTML: einen Wrapper mit der Klasse container, in dem sich eine Überschrift und einige Absätze befinden.
Das <div> mit der Klasse container wird zu unserem 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 die entsprechende 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 von Ihnen erstellten Spalten haben flexible Breiten — der Browser ermittelt, wie viel Platz jede Spalte erhält.
Festlegen der Spaltenbreite
Ändern Sie Ihr CSS, um column-width wie folgt zu verwenden:
.container {
column-width: 200px;
}
Der Browser gibt Ihnen nun so viele Spalten, wie es mit der von Ihnen angegebenen Größe möglich ist; der verbleibende Platz wird dann zwischen den vorhandenen Spalten aufgeteilt. Das bedeutet, dass Sie nicht genau die von Ihnen angegebene Breite erhalten, es sei denn, Ihr Container ist genau durch diese Breite teilbar.
Gestaltung 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 ändern:
- Ändern der Größe des Abstands zwischen den Spalten mit
column-gap. - Hinzufügen einer Trennlinie 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 spielen — die Eigenschaft akzeptiert jede Längeneinheit.
Fügen Sie nun eine Regel 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.
.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.
Beachten Sie, dass die Regel keine eigene Breite einnimmt. Sie liegt über dem Abstand, den Sie mit column-gap erstellt haben. Um mehr Platz auf jeder Seite der Regel zu schaffen, müssen Sie die column-gap-Größe erhöhen.
Spaltenübergreifung
Sie können bewirken, dass ein Element über alle Spalten gespannt wird. In diesem Fall wird der Inhalt dort unterbrochen, wo das span-element eingeführt wird, und setzt sich dann unterhalb des Elements fort und erstellt eine neue Reihe von Spalten. 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, ein Element nur über einige Spalten zu spannen. Die Eigenschaft kann nur die Werte none (was der Standardwert ist) oder all haben.
Spalten und Fragmentierung
Der Inhalt eines mehrspaltigen Layouts wird fragmentiert. Es verhält sich im Wesentlichen genauso, wie Inhalte sich in Paged-Medien verhalten, 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 tun 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 darzustellen, von denen jede eine Überschrift und einen Text enthält. Die Überschrift wird vom Text getrennt, wenn die Spalten zwischen beiden fragmentiert werden.
<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 Fragmentierung-Spezifikation verwenden. Diese Spezifikation gibt uns Eigenschaften zur Steuerung des Brechens von Inhalten in Multicol- und Paged-Medien. 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 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-bottom: 1em;
}
Durch das Hinzufügen dieser Eigenschaft bleiben die Boxen in einem Stück—sie werden jetzt nicht mehr über die Spalten fragmentiert.
Zusammenfassung
Sie wissen jetzt, wie Sie die grundlegenden Merkmale des mehrspaltigen Layouts nutzen, ein weiteres Werkzeug, das Ihnen zur Verfügung steht, wenn Sie eine Layoutmethode für die Designs wählen, die Sie erstellen.