Własność CSS column-width

> Dodaj do ulubionych

Własność CSS column-width określa optymalną szerokość kolumn w układzie wielokolumnowym CSS. Element mający przypisaną tę własność o wartości innej niż auto staje się kontenerem wielokolumnowym.

Wartości i składnia

Własność column-width jako wartość przyjmuje słowo kluczowe auto albo liczbę całkowitą z jednostką długości CSS.

auto
Szerokość kolumn zostanie określona przez inne własności, na przykład column-count o wartości innej niż auto.
Liczba z jednostką długości CSS
Określa optymalną szerokość kolumn, w których ma zostać rozmieszczona treść elementu.

Przeglądarka nie interpretuje tej wartości jako „sztywnego nakazu”, tylko jako wskazanie optymalnego ustawienia. Oznacza to, że rzeczywista szerokość kolumn może być większa lub mniejsza od zdefiniowanej.

Jeśli dostępnej przestrzeni w poziomie będzie mniej niż wynosi ustawiona szerokość kolumny, to przeglądarka utworzy najszerszą możliwą kolumnę.

Jeśli natomiast po utworzeniu pewnej liczby kolumn pozostanie ilość miejsca niewystarczająca do utworzenia kolejnej pełnej kolumny, przeglądarka rozdzieli tę przestrzeń po równo między już utworzone kolumny.

Na przykład, jeśli szerokość kontenera wielokolumnowego wynosi 600 pikseli, a szerokość kolumny zostanie ustawiona na 250 pikseli (przy własności column-gap ustawionej na 0), to ostatecznie przeglądarka utworzy kolumny o szerokości 300 pikseli, aby wypełnić pozostające 100 pikseli dostępnej przestrzeni.

Przykłady

W poniższym przykładzie treść elementu div zostanie podzielona na kolumny o szerokości 300 pikseli.


div {
  width: 600px;
  column-width: 250px;
  column-gap: 0;
}

Choć własności column-width została nadana wartość 250px, przeglądarka utworzy kolumny o szerokości 300 pikseli. Dlaczego? Ponieważ najpierw wirtualnie utworzy dwie kolumny po 250 pikseli szerokości każda, a następnie pozostałe 100 pikseli rozdzieli po równo między już utworzone kolumny.

Podsumowanie

ZastosowanieKontenery blokowe
Obsługiwane wartościSłowo kluczowe auto i liczba całkowita z jednostką długości CSS
Wartość początkowaauto
DziedziczenieNie
Specyfikacja CSSCSS Multi-column Layout Module Level 1, column-width
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.