Aby podzielić tekst na dwie kolumny w HTML, najlepiej skorzystać z nowoczesnych możliwości CSS, które pozwalają w prosty sposób uzyskać efekt znany z gazet czy magazynów. Poniżej znajdziesz kompleksowy poradnik na temat dzielenia tekstu na kolumny – od podstawowych właściwości CSS, przez praktyczne przykłady kodu, po omówienie technik stylizacji i zastosowań w projektach internetowych.
Podstawowe rozwiązanie: css column-count
Najprostszym i najczęściej stosowanym sposobem na podział tekstu na dwie kolumny w HTML jest użycie właściwości column-count w CSS:
<div class="tekst"> Tutaj wstaw swój długi tekst, który zostanie automatycznie podzielony na dwie równe kolumny – tak jak w gazecie. Efekt jest całkowicie uzyskiwany za pomocą CSS. </div> .tekst { column-count: 2; } Efekt – tekst w obrębie kontenera .tekst zostanie rozdzielony na dwie kolumny, o szerokości dobranej automatycznie tak, aby wypełnić całą szerokość kontenera. To rozwiązanie nie wymaga dzielenia tekstu na osobne elementy HTML – całość pozostaje w jednym bloku.
Dodatkowe właściwości stylujące kolumny
Aby kontrolować wygląd oraz rozstaw kolumn, można zastosować poniższe właściwości CSS:
column-gap– odstęp między kolumnami;
domyślnie: ok. 1em
przykład:
.tekst { column-count: 2; column-gap: 40px; /* szerszy odstęp */ } column-rule– pionowa linia oddzielająca kolumny;
przykład:
.tekst { column-count: 2; column-gap: 30px; column-rule: 2px solid #aaa; } column-width– sugerowana szerokość kolumny (przeglądarka sama określi ostateczną ilość kolumn, jeśli szerokość ekranu jest ograniczona).
.tekst { column-width: 350px; } Te właściwości można dowolnie ze sobą łączyć, uzyskując bardzo elastyczny system prezentacji tekstu.
Przykładowy kod praktyczny
Przykładowy fragment html i css do zastosowania na stronie:
<section class="poradnik-kolumny"> <h2>Jak zrobić dwie kolumny tekstu?</h2> <div class="tekst"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet facilisis urna. Praesent consectetur, ipsum eu cursus efficitur, sem magna convallis tortor, nec imperdiet turpis... <!-- ...więcej tekstu... --> </div> </section> .poradnik-kolumny .tekst { column-count: 2; column-gap: 30px; column-rule: 1px solid #cccccc; text-align: justify; /* Opcjonalnie padding/margines do środka */ } Zastosowania i zalety tej techniki
- Układ gazetowy – idealne dla artykułów, blogów, czasopism i długich opisów, gdzie czytelnikowi łatwiej skanować tekst podzielony na węższe szpalty;
- Responsywność – podział na kolumny dynamicznie dostosowuje się do szerokości okna przeglądarki. Na mniejszych urządzeniach można zmniejszać liczbę kolumn za pomocą media queries, np.:
@media (max-width: 700px) { .tekst { column-count: 1; } } - Łatwość wdrożenia – brak potrzeby ręcznego dzielenia treści i pisania dodatkowych znaczników HTML.
Zaawansowane wskazówki
- Unikanie łamania elementów nagłówków i obrazów – standardowo wszystkie dzieci bloku kolumnowego są dzielone na kolumny – jeśli nie chcesz, by dany element był łamany, użyj
break-inside: avoid;; - Stylowanie tytułów i podtytułów – dodawaj nagłówki przed lub po sekcjach tekstu, które mają być „kolumnowane”, aby zachowały pełną szerokość kontenera.
.naglowek { break-after: column; } Alternatywy – flexbox i grid do kolumn z różnych elementów
Jeśli celem jest ułożenie różnych elementów w kolumny (np. zdjęcia obok tekstu, listy, formularze), warto rozważyć użycie CSS Flexbox lub Grid Layout. Jednak dla prostego podziału tekstu na równe szpalty, jak w artykułach czy gazetach, multikolumny CSS pozostają najwygodniejsze.
Przeglądarki – szerokie wsparcie
Właściwości column-count oraz pokrewne są obsługiwane przez wszystkie nowoczesne przeglądarki komputerowe i mobilne. Można z nich korzystać bezpiecznie we współczesnych projektach internetowych.
Podsumowując –
podział tekstu na dwie kolumny w HTML najlepiej realizować za pomocą właściwości column-count w CSS. To proste, uniwersalne i responsywne rozwiązanie, które pozwala szybko uzyskać efekt gazetowy, nie wymagając dodatkowych znaczników w kodzie HTML. Dzięki rozszerzającym właściwościom takim jak column-gap i column-rule można dodatkowo precyzyjnie kontrolować wygląd i estetykę kolumn.
