Kiedy używasz kolumn CSS? Analiza danych PlatoBlockchain. Wyszukiwanie pionowe. AI.

Kiedy używasz kolumn CSS?

To nie jest retoryczne: naprawdę interesuje mnie znalezienie świetnych przypadków użycia dla układów wielokolumnowych CSS.

Odpowiedź wydaje się prosta. Użyj kolumn, jeśli chcesz podzielić dowolną treść na kolumny, prawda? Oto rodzaj przykładów, które można znaleźć w artykułach, które pokazują, jak działają wielokolumnowe układy CSS, w tym nasz własny Almanach:

Tak jest. Ale czy to rzeczywisty przypadek użycia? Mmmm może. Jeśli tekst jest stosunkowo krótki, może to miły akcent. W ten sposób sprzedałem to sobie podczas przeprojektowywania mojej strony internetowej a kilka lat temu. Dziś tak nie jest, ale tak to wyglądało wtedy:

Kiedy używasz kolumn CSS?

Ale cały długi artykuł podzielony na kolumny? Uwielbiam to w gazetach, ale niechętnie przewijam stronę w dół, aby przeczytać jedną kolumnę, tylko po to, by przewinąć z powrotem w górę, aby zrobić to ponownie.

Przypuszczam, że możemy go użyć do umieszczenia dwóch elementów obok siebie, ale flexbox jest do tego bardziej odpowiedni. Dodatkowo ograniczenie uniemożliwia nam wybór kolumn w celu ich indywidualnego zwymiarowania. Kolumny muszą mieć taką samą szerokość.

Jedną z rzeczy, które mają dla nich kolumny, jest to, że są jedyną metodą układu CSS, która paprochy zawartość. (To znaczy, chyba że liczymy Regiony CSS… w każdym razie co się z nimi stało?!) Tak więc, jeśli chcesz podzielić akapit na kolumny, jest to już możliwe bez dodatkowych wrapperów.

Kiedy jeszcze może być konieczne podzielenie ciągłego bloku treści na kolumny? Pamiętam, że musiałem to zrobić, kiedy miałem dużą, nieuporządkowaną listę przedmiotów. Podoba mi się sposób, w jaki listy ułatwiają skanowanie zawartości, ale długie listy mogą sprawić, że jedna strona strony będzie wyglądać na bardzo ciężką. Załóżmy na przykład, że wymieniliśmy wszystkie tagi postów dla sztuczek CSS w grupach alfabetycznych. W tym celu świetnie sprawdza się układ wielokolumnowy:

Śmiało i spróbuj zmienić szerokość widocznego obszaru. Zdefiniowano trzy kolumny, ale ich liczba będzie się zmieniać w zależności od ilości dostępnego miejsca. Muszę kochać tę responsywną dobroć bez pracy w mediach!

Pracowałem nad demo dla :left pseudo-klasa i sięgnęłam po columns ponieważ jest to świetny sposób na fragmentowanie rzeczy do drukowania dem. Więc myślę, że jest inny przypadek użycia. Podczas tworzenia demonstracji zdałem sobie sprawę, że wielokolumnowy układ można wykorzystać do stworzenia murowanej siatki elementów, takiej jak galeria obrazów:

Ale co jeszcze? Czy ograniczamy się do krótkich akapitów, długich list i swobodnych siatek?

Znak czasu:

Więcej z Sztuczki CSS