Własność CSS column-gap

Własność CSS column-gap określa szerokość odstępu między kolumnami w układzie wielokolumnowym CSS, a także w innych rodzajach układów CSS, takich jak Flexbox CSS czy CSS Grid.

Kiedyś własność ta odnosiła się wyłącznie do elementów w układzie wielokolumnowym CSS, ale później rozszerzono jej definicję tak, aby obejmowała wszystkie rodzaje układu CSS.

Wartości i składnia

Własność column-gap jako wartość przyjmuje słowo kluczowe normal, liczbę z jednostką długości lub wartość procentową.

normal

W przypadku kontenerów wielokolumnowych słowo to oznacza 1em, a w pozostałych rodzajach układu CSS jest ono równoważne z wartością 0.

Liczba z jednostką długości

Określa konkretną odległość między kolumnami w danym rodzaju układu CSS.

Wartość procentowa

Określa odległość między kolumnami jako ułamek szerokości kontenera.

Przykłady

Poniższa deklaracja ustawia 60-pikselową odległość między kolumnami w układzie wielokolumnowym.

div {
  columns: 3;
  column-gap: 60px;
}

Podsumowanie