Mehrspaltiges Layout
Die Spezifikation für mehrspaltige Layouts bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie sie in einer Zeitung zu sehen sind. In diesem Artikel wird erklärt, wie Sie diese Funktion verwenden können.
| Voraussetzungen: | HTML-Grundlagen (lernen Sie Das Strukturieren von Inhalten mit HTML) und ein Verständnis, wie CSS funktioniert (lernen Sie CSS-Styling-Grundlagen.) |
|---|---|
| Zielsetzung: | Lernen, wie man ein mehrspaltiges Layout auf Webseiten erstellt, wie es in einer Zeitung zu finden ist. |
Ein einfaches Beispiel
Lassen Sie uns erkunden, wie man das mehrspaltige Layout verwendet — oftmals 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 sehen Sie ein Beispiel dafür, wie der endgültige Code aussehen sollte.
Ein dreispaltiges Layout
Unsere Startdatei enthält ein sehr einfaches HTML: ein Wrapper mit einer Klasse 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 Eigenschaft column-count nimmt eine Zahl als Wert an und erstellt so 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 zugewiesen wird.
Festlegen der column-width
Ändern Sie Ihr CSS so, dass column-width wie folgt verwendet wird:
.container {
column-width: 200px;
}
Der Browser wird nun so viele Spalten wie möglich in der von Ihnen angegebenen Größe anzeigen; der verbleibende Raum wird dann zwischen den vorhandenen Spalten aufgeteilt. Das bedeutet, dass Sie nicht genau die Breite erhalten, die Sie angeben, es sei denn, Ihr Container ist genau durch diese Breite teilbar.
Stil der Spalten
Die von 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, das Erscheinungsbild 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 Regel 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 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.
Es ist zu beachten, dass die Regel keine eigene Breite einnimmt. Sie liegt über dem von Ihnen mit column-gap erstellten Abstand. Um mehr Platz auf beiden Seiten der Regel zu schaffen, müssen Sie die Größe des column-gap erhöhen.
Spaltenübergreifend
Sie können ein Element dazu bringen, sich über alle Spalten zu erstrecken. In diesem Fall wird der Inhalt dort unterbrochen, wo das Spanning-Element eingeführt wird, und dann unterhalb des Elements fortgesetzt, wodurch ein neuer Satz von Spalten erstellt wird. Um ein Element über alle Spalten zu ziehen, legen Sie den Wert all für die Eigenschaft column-span fest.
Hinweis:
Es ist nicht möglich, ein Element nur über einige Spalten zu ziehen. Die Eigenschaft kann nur die Werte none (was der Standard ist) oder all haben.
Spalten und Fragmentierung
Der Inhalt eines mehrspaltigen Layouts wird fragmentiert. Es verhält sich im Wesentlichen so, wie es Inhalte in paginierten Medien tun, wie beim Drucken einer Webseite. Wenn Sie Ihren Inhalt in einen Multicol-Container verwandeln, wird er in Spalten fragmentiert. Damit der Inhalt dies tun kann, muss er brechen.
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 zu gestalten, von denen jede eine Überschrift und etwas Text enthält. Die Überschrift wird vom Text getrennt, wenn die Spalten zwischen den 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 kontrollieren, 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 kontrollieren. Zum Beispiel, indem die Eigenschaft break-inside mit einem Wert von avoid zu den Regeln für .card hinzugefügt wird. Dies ist der Container der Überschrift und des Textes, also möchten wir nicht, dass es 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 fragmentieren jetzt nicht mehr über die Spalten.
Zusammenfassung
Sie wissen nun, wie Sie die grundlegenden Funktionen des mehrspaltigen Layouts verwenden können, ein weiteres Werkzeug zu Ihrer Verfügung, wenn Sie eine Layout-Methode für die Designs auswählen, die Sie erstellen.