Spaltenabstand | CSS-Tricks

Die CSS-Eigenschaft column-gap legt den Abstand (auch „Stege“ genannt) zwischen Spalten in CSS Grid-, Flexbox- und CSS-Spalten-Layouts fest.

Kontext

Wenn Sie sich fragen, warum es eine column-gap-Eigenschaft gibt, obwohl es bereits eine grid-column-gap gibt, sind Sie nicht allein! Tatsächlich ersetzt column-gap effektiv grid-column-gap. Durch das Weglassen des grid-Präfixes ist viel klarer, dass wir Abstände in mehr Situationen steuern können als nur mit CSS Grid.

Ja, es ist ein bisschen mühsam, wenn Sie bereits mit grid-column-gap gearbeitet haben, da Sie jetzt beides für die breiteste Browserunterstützung deklarieren müssen, bis die Browser die Änderung übernommen haben. Eine „zukunftssichere“ Implementierung könnte also etwa so aussehen, wobei Browser, die column-gap unterstützen, es verwenden und Browser, die es nicht unterstützen, es überspringen und stattdessen grid-column-gap verwenden.

.something {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  column-gap: 25px;
}

Syntax

column-gap: normal | <length-percentage>

Anfangswert: normal
Gilt für: Multi-Column-Container, Flex-Container, Grid-Container
Vererbt: nein
Prozente: beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wert: angegebenes Schlüsselwort, andernfalls ein berechneter <length-percentage>-Wert
Animationstyp: nach berechnetem Werttyp

Diese formale Syntax besagt im Grunde, dass column-gap entweder einen normal-Wert (der Standardwert) oder einen Längenwert akzeptiert, der entweder als Einheit (z. B. 25px oder 1,25em) oder als Prozentsatz (z. B. 10 %) angegeben ist.

Werte

Abgesehen vom normal-Wert akzeptiert row-gap Zahlen und Prozentsätze. „Normal“ bedeutet, was für den Browser Standard ist.

/* Default value */
column-gap: normal;

/* <length> values */
column-gap: 50px;
column-gap: 2rem;
column-gap: 1.5em;
column-gap: 5vw;
column-gap: 25ch;

/* <percentage> value */
column-gap: 15%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;