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 na0
), 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
Zastosowanie | Kontenery blokowe |
---|---|
Obsługiwane wartości | Słowo kluczowe auto i liczba całkowita z jednostką długości CSS |
Wartość początkowa | auto |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Multi-column Layout Module Level 1, column-width |