Z lastnostmi za postavitev besedila v stolpce lahko daljše besedilo samodejno razdelimo v več navpičnih stolpcev, podobno kot v revijah ali časopisih. Ta način je uporaben predvsem za daljše besedilne vsebine, ne pa za celotno postavitev strani.
Postavitev v stolpce je primerna takrat, ko želimo bolje izrabiti vodoravni prostor in ohraniti krajše vrstice besedila. Za razporeditev več različnih vsebinskih sklopov po vrsticah in stolpcih pa sta navadno primernejša Flexbox ali Grid.
Pomni: Lastnosti za stolpce so namenjene predvsem razdelitvi besedila ali podobne tekoče vsebine. Niso splošen nadomestek za celotno postavitev strani.
Osnovna pravila
- Besedilo se v stolpcih preliva iz enega stolpca v naslednjega.
- Število stolpcev lahko določimo neposredno ali pa določimo približno širino stolpca.
- Razmik med stolpci vpliva na berljivost besedila.
- Med stolpce lahko dodamo ločilno črto.
- Pri nekaterih elementih moramo preprečiti neugodno prelamljanje med stolpci.
Pozor: Besedilo v stolpcih je lahko na ožjih zaslonih manj pregledno. Zato je smiselno preveriti, ali se število stolpcev pri manjših širinah zmanjša.
Določitev števila stolpcev: column-count
Lastnost column-count določi, na koliko stolpcev naj se razdeli vsebina elementa. Brskalnik nato vsebino samodejno razporedi od vrha navzdol po posameznih stolpcih.
<div id="column">Lorem ipsum dolor sit amet, consectetur...</div>#column {
column-count: 3;
}Določitev razmika med stolpci: column-gap
Lastnost column-gap določa razmik med stolpci. Večji razmik izboljša berljivost, posebej pri daljšem besedilu ali širših zaslonih.
<div id="column1">Lorem ipsum dolor sit amet, consectetur...</div>#column1 {
column-count: 3;
column-gap: 30px;
}Pomni: Pri stolpcih je razmik med stolpci zelo pomemben za berljivost. Premajhen razmik lahko naredi prikaz nepregleden.
Določitev črte med stolpci: column-rule
Lastnost column-rule nariše črto med stolpci. Deluje podobno kot obroba, vendar je namenjena samo ločevanju stolpcev. Z eno lastnostjo lahko določimo širino, slog in barvo črte.
<div id="column2">Lorem ipsum dolor sit amet, consectetur...</div>#column2 {
column-count: 3;
column-gap: 30px;
column-rule: 2px solid gray;
}Novejše možnosti za postavitev besedila v stolpce
Poleg osnovnih lastnosti danes pogosto uporabimo še column-width oziroma krajši zapis columns. Tako lahko brskalnik sam prilagaja število stolpcev glede na razpoložljivo širino. To je pogosto bolj prilagodljivo kot strogo določeno število stolpcev.
| Lastnost | Pomen |
|---|---|
column-width |
določi približno želeno širino posameznega stolpca |
columns |
okrajšava za column-width in column-count |
column-span |
element razširi čez vse stolpce, npr. naslov |
break-inside |
pomaga preprečiti neugodno prelamljanje elementa med stolpci |
V spodnjem primeru je uporabljen krajši zapis columns, naslov se raztegne čez vse stolpce, posamezne kartice pa se po možnosti ne prelomijo med stolpci.
#column3 {
columns: 220px 3;
column-gap: 30px;
column-rule: 1px solid #bbb;
}
#column3 h3 {
column-span: all;
}
#column3 .karticaBesedilo {
break-inside: avoid;
}Postavitev besedila v stolpce
Lastnost columns omogoča krajši zapis, s katerim hkrati določimo približno širino stolpca in največje želeno število stolpcev.
Z column-span: all lahko na primer naslov razširimo prek vseh stolpcev, zato je uvodna struktura vsebine bolj pregledna.
Lastnost break-inside: avoid je uporabna pri karticah, slikah, citatih ali drugih blokih, ki jih ne želimo razrezati med dva stolpca.
Postavitev besedila v stolpce je posebej primerna za daljše članke, opombe, razlage in podobne vsebine, kjer želimo izboljšati izrabo vodoravnega prostora.
Za zahtevnejše dvodimenzionalne postavitve elementov pa sta običajno primernejša Flexbox in Grid, saj nudita več nadzora nad razporeditvijo.
Priporočila
- Stolpično postavitev uporabljaj predvsem za daljše besedilne vsebine.
- Preveri, ali je število stolpcev smiselno glede na širino zaslona.
- Za boljšo berljivost določi ustrezen razmik med stolpci.
- Pri naslovih ali večjih blokih po potrebi uporabi
column-span. - Pri karticah, slikah ali citatih razmisli o uporabi
break-inside: avoid.
Pri postavitvi besedila v stolpce se vsebina preliva iz enega stolpca v drugega. Zato moramo biti previdni pri elementih, kot so slike, kartice, daljši naslovi ali odstavki z ozadjem. Po potrebi uporabimo break-inside: avoid in preverimo prikaz tudi na ožjih zaslonih.
Pogoste napake
- Stolpci se uporabljajo za celotno postavitev strani, čeprav so namenjeni predvsem tekočemu besedilu.
- Število stolpcev je preveliko glede na razpoložljivo širino.
- Razmik med stolpci je premajhen, zato je besedilo slabše berljivo.
- Elementi se neugodno prelomijo med stolpci.
- Prikaz na ožjih zaslonih ni preverjen ali prilagojen.