Spalten stylen

Da Spaltenboxen, die innerhalb von Multi-Column-(multicol)-Containern erstellt werden, anonyme Boxen sind, ist das Stylen einzelner Spalten nicht möglich. Wir können jedoch die Abstände zwischen den Spalten und den Container im Allgemeinen stylen. Dieser Leitfaden erklärt, wie man den Abstand und die Stilregeln zwischen den Spalten ändert.

Spaltenabstände

Der Abstand zwischen Spalten wird mit der Eigenschaft column-gap oder gap gesteuert. Die Eigenschaft column-gap ist im Multi-Column-Layout Modul definiert. Die Eigenschaft gap ist im Box-Alignment Modul definiert. Dies ist eine einheitliche Eigenschaft zur Definition von Abständen zwischen Boxen in allen Layouts, die Abstände unterstützen, einschließlich CSS Grid Layout und CSS Flexible Box Layout.

Der Anfangswert von column-gap ist 1em, was verhindert, dass Spalten ineinanderlaufen. In anderen Layout-Methoden wird column-gap als Synonym für gap unterstützt, jedoch mit einem Anfangswert von 0. Der Schlüsselwortwert normal setzt column-gap auf den Anfangswert.

Sie können den Abstand mit jedem <length>-Wert ändern. Im untenstehenden Beispiel ist der column-gap auf 40px gesetzt.

html
<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>
css
body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-gap: 40px;
}

Der erlaubte Wert für column-gap ist ein <length-percentage>, was bedeutet, dass Prozentsätze erlaubt sind. Prozentwerte für column-gap werden als Prozentsatz der Breite des Multicol-Containers berechnet.

Spaltenregeln

Die Spezifikation definiert column-rule-width, column-rule-style und column-rule-color, wobei ein Kurzbefehl column-rule bereitgestellt wird. Diese Eigenschaften funktionieren genauso wie die border-Eigenschaften: Jeder <line-style> kann als column-rule-style verwendet werden, genau wie bei einem gültigen border-style.

Diese Eigenschaften werden auf das Element angewendet, das der Multicol-Container ist. Daher haben alle Spalten die gleiche Regel. Regeln werden nur zwischen den Spalten und nicht an den äußeren Rändern gezogen. Regeln werden auch nur zwischen Spalten gezogen, die Inhalt haben.

Im nächsten Beispiel wurde eine 5px gepunktete Regel mit der Farbe rebeccapurple unter Verwendung der Langformwerte erstellt.

css
body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-rule-width: 5px;
  column-rule-style: dotted;
  column-rule-color: rebeccapurple;
}

Beachten Sie, dass die Regel selbst keinen Platz beansprucht: Eine breite Regel wird die Spalten nicht auseinanderdrücken, um Platz für die Regel zu schaffen. Stattdessen überlagert die Regel den Abstand.

Das untenstehende Beispiel verwendet eine sehr breite Regel von 40px und 10px Abstand. Die Regel wird unter dem Spalteninhalt angezeigt. Um auf beiden Seiten der Regel Platz zu schaffen, müsste der Abstand auf mehr als 40px erhöht werden.

css
body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-gap: 10px;
  column-rule: 40px solid rebeccapurple;
}

Nächste Schritte

Dieser Artikel beschreibt alle aktuellen Möglichkeiten, wie Spaltenboxen gestylt werden können. Im nächsten Leitfaden sehen wir uns an, wie man Elemente innerhalb eines Containers über alle Spalten hinweg erstreckt.