columns

Dzieli treść elementu na kolumny jak w gazecie. Skrót dla column-width i column-count.

Wartość domyślna: auto auto
Dziedziczona: Nie
Animowalna: tak, szerokość jako długość, liczba jako liczba całkowita
Dotyczy: kontenery blokowe poza tabelami
JavaScript: element.style.columns = "12rem 3"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.topics {
  columns: 8rem 3;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topics li {
  break-inside: avoid;
  padding-block: 4px;
}

HTML przykładu

<p style="margin: 0 0 8px; font-weight: 600;">Tematy dokumentacji CSS</p>
<ul class="topics">
  <li>Selektory</li>
  <li>Pseudoklasy</li>
  <li>Model pudełkowy</li>
  <li>Flexbox</li>
  <li>Grid</li>
  <li>Typografia</li>
  <li>Kolory i tła</li>
  <li>Efekty</li>
  <li>Przejścia</li>
  <li>Animacje</li>
  <li>Reguły @</li>
  <li>Funkcje</li>
</ul>

Podgląd

Definicja i zastosowanie

Właściwość columns zamienia zwykły blok w kontener wielokolumnowy. Treść płynie jak w gazecie: wypełnia pierwszą kolumnę, przechodzi do następnej, a przeglądarka sama wyrównuje ich wysokość. Nie trzeba przy tym zmieniać HTML ani dzielić tekstu na części.

To skrót dla dwóch właściwości. column-width podaje idealną szerokość kolumny: przeglądarka tworzy tyle kolumn, ile się zmieści, i poszerza je, żeby wypełniły miejsce. column-count podaje liczbę kolumn. Gdy ustawisz obie, liczba działa jak górny limit, więc columns: 12rem 3 oznacza najwyżej trzy kolumny, każdą szeroką na co najmniej 12rem. Sama szerokość daje układ responsywny bez media queries.

Odstęp między kolumnami ustawia column-gap (domyślne normal to tutaj 1em), a linię między nimi column-rule. Nagłówek przez całą szerokość uzyskasz dzięki column-span: all, a break-inside: avoid na elemencie zabroni dzielenia go między kolumny, co przydaje się przy kartach, cytatach i pozycjach listy.

Pamiętaj o kolejności czytania: elementy biegną z góry na dół, kolumna po kolumnie, a nie wierszami. Do siatki kart, w której liczy się kolejność od lewej do prawej, lepszy jest Grid. Unikaj też długich tekstów w kolumnach wyższych niż ekran, bo czytelnik musi przewijać w dół i wracać na górę.

Składnia

columns: <szerokość kolumny> || <liczba kolumn>;
column-width: auto | <długość>;
column-count: auto | <liczba całkowita>;

Wartości

auto
Brak kolumn, notatki płyną jedna pod drugą. To wartość domyślna, czyli auto auto.
2
liczba kolumn
Dokładnie dwie kolumny równej szerokości. Zwróć uwagę, że dłuższa notatka może się rozciąć między kolumnami.
80px
szerokość kolumny
Tyle kolumn, ile się zmieści, każda szeroka na co najmniej 80px. Przeciągnij prawy dolny róg ramki w lewo, a kolumn będzie ubywać.
80px 2
szerokość i limit
Kolumny mają co najmniej 80px, ale nigdy nie będzie ich więcej niż dwie. Tam, gdzie poprzednia wersja mieściła trzy, ta zatrzymuje się na dwóch szerszych.
break-inside: avoid
bez dzielenia
Dwie kolumny, ale każda notatka zostaje w jednym kawałku. Jeśli się nie mieści, przeglądarka przenosi ją w całości do następnej kolumny.

Wartość	Typ	Opis
auto		Brak kolumn, notatki płyną jedna pod drugą. To wartość domyślna, czyli `auto auto`.
2	liczba kolumn	Dokładnie dwie kolumny równej szerokości. Zwróć uwagę, że dłuższa notatka może się rozciąć między kolumnami.
80px	szerokość kolumny	Tyle kolumn, ile się zmieści, każda szeroka na co najmniej 80px. Przeciągnij prawy dolny róg ramki w lewo, a kolumn będzie ubywać.
80px 2	szerokość i limit	Kolumny mają co najmniej 80px, ale nigdy nie będzie ich więcej niż dwie. Tam, gdzie poprzednia wersja mieściła trzy, ta zatrzymuje się na dwóch szerszych.
break-inside: avoid	bez dzielenia	Dwie kolumny, ale każda notatka zostaje w jednym kawałku. Jeśli się nie mieści, przeglądarka przenosi ją w całości do następnej kolumny.

Wartości w praktyce

auto

Brak kolumn, notatki płyną jedna pod drugą. To wartość domyślna, czyli auto auto.

.demo { columns: auto; }

Dokładnie dwie kolumny równej szerokości. Zwróć uwagę, że dłuższa notatka może się rozciąć między kolumnami.

.demo { columns: 2; }

80px

Tyle kolumn, ile się zmieści, każda szeroka na co najmniej 80px. Przeciągnij prawy dolny róg ramki w lewo, a kolumn będzie ubywać.

.demo { columns: 80px; }

80px 2

Kolumny mają co najmniej 80px, ale nigdy nie będzie ich więcej niż dwie. Tam, gdzie poprzednia wersja mieściła trzy, ta zatrzymuje się na dwóch szerszych.

.demo { columns: 80px 2; }

break-inside: avoid

Dwie kolumny, ale każda notatka zostaje w jednym kawałku. Jeśli się nie mieści, przeglądarka przenosi ją w całości do następnej kolumny.

.demo { columns: 2; }
.note { break-inside: avoid; }

Więcej przykładów

Galeria w stylu „masonry”

CSS

.gallery {
  columns: 120px;
  column-gap: 10px;
}

.gallery > * {
  break-inside: avoid;
  margin-bottom: 10px;
}

HTML przykładu

<style>
  .tile { display: grid; align-items: end; padding: 8px 10px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 13px; }
</style>
<div class="gallery">
  <div class="tile" style="height: 90px; background: linear-gradient(160deg, #7c3aed, #4c1d95);">1</div>
  <div class="tile" style="height: 140px; background: linear-gradient(160deg, #0ea5e9, #075985);">2</div>
  <div class="tile" style="height: 70px; background: linear-gradient(160deg, #10b981, #065f46);">3</div>
  <div class="tile" style="height: 120px; background: linear-gradient(160deg, #f59e0b, #92400e);">4</div>
  <div class="tile" style="height: 80px; background: linear-gradient(160deg, #f43f5e, #9f1239);">5</div>
  <div class="tile" style="height: 110px; background: linear-gradient(160deg, #a78bfa, #5b21b6);">6</div>
</div>

Podgląd

Kafelki o różnej wysokości układają się bez dziur, bo każdy trafia pod poprzedni w tej samej kolumnie. Numery pokazują kolejność: biegnie z góry na dół, kolumna po kolumnie, a nie wierszami.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Zamiast sztywnej liczby kolumn podaj szerokość, na przykład columns: 14rem. Na telefonie zostanie jedna kolumna, a na szerokim ekranie pojawią się kolejne.
Karty, cytaty i pozycje listy w kolumnach oznacz break-inside: avoid, żeby nie rozpadały się na dwie części.
Jeśli elementy muszą iść po kolei w wierszach, na przykład wyniki wyszukiwania, użyj Grida. W kolumnach kolejność biegnie z góry na dół.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs