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