Moduł CSS Multi-column Layout to potężne narzędzie, które pozwala łatwo tworzyć wielokolumnowe układy stron internetowych. Rozwój responsywnego projektowania oznacza, że ważne jest, aby zrozumieć, jak korzystać z tego modułu.
Możesz użyć właściwości kolumn do tworzenia elastycznych i dynamicznych układów, które dostosowują się do różnych rozmiarów ekranu.
Określanie numeru kolumny, szerokości i odstępu
Aby utworzyć odpowiedni wielokolumnowy układ treści strony, należy zacząć od określenia liczby kolumn, które ma obejmować. Jedną z najważniejszych właściwości modułu wielokolumnowego jest tzw liczba kolumn właściwość, której używasz do ustawiania liczby kolumn do podziału zawartości.
Na przykład:
.pojemnik {
liczba kolumn: 3;
}
Możesz także określić szerokość i odstęp między kolumnami. Możesz ustawić wartość szerokości kolumny za pomocą dowolnego z obsługiwane jednostki CSS tak jak piks, oni, Lub %.
Jeśli szerokość kolumny jest ustawione na automatyczny, przeglądarka obliczy szerokość każdej kolumny na podstawie liczba kolumn nieruchomości i dostępnej przestrzeni wewnątrz układu.
Na przykład ta deklaracja CSS 3 kolumny, każda o szerokości ok 200 piksele:
.pojemnik {
liczba kolumn: 3;
szerokość kolumny: 200piks;
}
The przerwa w kolumnie właściwość określa odstęp lub odstęp między kolumnami w układzie wielokolumnowym. Ustawi rozmiar pustych spacji między sąsiednimi kolumnami i może przyjąć wartość długości w pikselach, emach lub innych obsługiwanych jednostkach.
Na przykład:
.pojemnik {
liczba kolumn: 3;
przerwa w kolumnie: 20piks; /* ustawia odstęp między kolumnami na 20 pikseli */
}
Domyślnie wartość przerwa w kolumnie jest ustawione na normalna. Twoja przeglądarka wybiera tę wartość, aby uzyskać spójne odstępy między kolumnami w układzie, zachowując przy tym atrakcyjność wizualną. Ta wartość może również różnić się w zależności od przeglądarki i może również zależeć od rozmiaru czcionki, wysokości linii, właściwość pozycjii inne właściwości układu zawartości kolumn.
Zapewnienie równowagi kolumn
Kolumny CSS próbują wypełnić całą dostępną przestrzeń w układzie. Czasami może to spowodować, że kolumny będą miały znacznie różne wysokości, przez co układ będzie wyglądał nierówno.
Aby zrównoważyć kolumny, należy upewnić się, że każda kolumna w układzie zawiera mniej więcej taką samą ilość treści.
Możesz to osiągnąć, ustawiając CSS wypełnienie kolumny nieruchomość do balansować. Przeglądarka spróbuje następnie równomiernie rozmieścić zawartość we wszystkich kolumnach, tak aby miały mniej więcej tę samą wysokość.
The wypełnienie kolumny właściwość jest ustawiona na balansować domyślnie, ale wartość automatyczny zmieni to zachowanie. Użycie auto rozdziela zawartość między kolumny na podstawie dostępnego miejsca. Może to spowodować nierówne odstępy między kolumnami i nierówne wysokości kolumn. Może nawet stworzyć układ z pustymi kolumnami.
Oto przykład użycia wypełnienie kolumny właściwość do równoważenia kolumn w układzie wielokolumnowym:
.układ wielokolumnowy {
liczba kolumn: 3;
przerwa w kolumnie: 20piks;
wypełnienie kolumny: balansować;
}
W tym przykładzie mamy układ wielokolumnowy z trzema kolumnami i odstępem 20 pikseli między każdą kolumną. Ustawiając wypełnienie kolumny nieruchomość do balansować, zapewniamy równomierne rozłożenie treści w kolumnach, co zapewnia wyważoną wysokość kolumn.
Ważne jest, aby pamiętać, że wypełnienie kolumny właściwość może nie działać dobrze we wszystkich układach i może powodować nierówne odstępy między kolumnami. W takich przypadkach może być konieczne użycie JavaScript w celu ręcznego zrównoważenia kolumn. Pamiętaj o przestrzeganiu najlepszych praktyk i użyj progresywnego ulepszania abyś nie polegał na JavaScript.
Kładąc wszystko razem
Możesz zebrać wszystko, czego nauczyłeś się o wdrażaniu układu z kolumnami CSS i użyć go do stworzenia układu w stylu magazynu.
Najpierw utwórz podstawową strukturę HTML. Użyj elementu kontenera, aby opakować zawartość, a następnie utwórz kilka elementów podrzędnych, które możesz następnie rozmieścić w kolumnach.
HTML>
<HTML>
<głowa>
<połączyćrel=„arkusz stylów”href="CSSkolumny.css" />
głowa>
<ciało>
Element kontenera
<dzklasa=„układ magazynu”>Elementy potomne
<dzklasa="artykuł">
<h2>Tytuł artykułuh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Wejdź
magna vel lorem pharetra bibendum.P>
dz><dzklasa="artykuł">
<h2>Tytuł artykułuh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Wejdź
magna vel lorem pharetra bibendum.P>
dz><dzklasa="artykuł">
<h2>Tytuł artykułuh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Wejdź
magna vel lorem pharetra bibendum.P>
dz>
dz>
ciało>
HTML>
Aby utworzyć układ w stylu magazynu za pomocą modułu CSS Multi-column, połącz liczba kolumn, szerokość kolumny, przerwa w kolumnie, I wypełnienie kolumny nieruchomości:
.magazine-layout {
liczba kolumn: 3;
szerokość kolumny: 300piks;
przerwa w kolumnie: 20piks;
wypełnienie kolumny: balansować;
}
.artykuł {
kolor tła: #f8f8f8;
promień granicy: 4piks;
pudełko-cień: 0 2piks 4piksrgba(0, 0, 0, 0.1);
wyściółka: 10piks;
włamanie: unikaj kolumny;
}
Ten przykład definiuje również włamanie nieruchomość na .artykuł klasa o wartości ok unikaj kolumny. Właściwość zapewnia, że każdy artykuł pozostaje w jednej kolumnie, a nie jest dzielony na wiele kolumn. Oto jak powinien wyglądać układ:
Używanie rozwiązań awaryjnych dla nieobsługiwanych przeglądarek
Należy zauważyć, że liczba kolumn właściwość nie jest obsługiwana we wszystkich przeglądarkach. Przeglądarki, które nie obsługują liczba kolumnzamiast tego wyświetli zawartość w jednej kolumnie.
Aby zapewnić style awaryjne dla nieobsługiwanych przeglądarek, możesz użyć zapytań o funkcje, takich jak @obsługuje wykryć wsparcie dla liczba kolumn właściwość i zapewniają alternatywne style, gdy właściwość nie jest obsługiwana.
Na przykład:
.pojemnik {
/* Powrót do przeglądarek, które nie obsługują liczby kolumn */
szerokość: 100%;
}
/* Wykryj wsparcie dla liczby kolumn */
@obsługuje (liczba kolumn:3) {
.pojemnik {
liczba kolumn: 3;
}
}
W tym przykładzie używamy @obsługuje zapytanie funkcji w celu wykrycia wsparcia dla liczba kolumn nieruchomość. Jeśli przeglądarka obsługuje liczbę kolumn, plik pojemnik element wyświetli się w trzech kolumnach. Jeśli przeglądarka nie obsługuje liczenia kolumn, wyświetli zawartość w jednej kolumnie przy użyciu metody szerokość nieruchomość.
Podział treści na kolumny
Ogólnie rzecz biorąc, kolumny CSS zapewniają praktyczny i skuteczny sposób tworzenia elastycznych i responsywnych układów wielokolumnowych, które zwiększają użyteczność i wygodę użytkownika treści internetowych.
Korzystając razem z kolumn CSS i JavaScript, możesz tworzyć jeszcze bardziej wyrafinowane i dynamiczne układy, które się dostosowują do różnych preferencji użytkowników i rozmiarów urządzeń, dzięki czemu Twoje treści internetowe będą bardziej dostępne i atrakcyjne dla użytkowników.
