CSS stupci

Sadržaj HTML stranice (ili njenog dela) moguće je organizovati i u formi stubaca (columns). Pomoću posebnih CSS atributa, podešavamo najpre broj ili širinu stubaca, zatim razmak i liniju između stubaca, kao i način popunjavanja stubaca. Ponekad će se unutar stubaca javiti neki elemenat koji je toliko važan da ćemo želeti da se prikaže preko više stubaca (npr. neki naslov), što je takođe moguće podesiti.

Ovde ćemo obraditi sledeće CSS atribute:

column-count Broj stubaca
column-width Širina stubaca
columns Kompleksan atribut za podešavanje broja i širine stubaca
column-gap Širina razmaka između stubaca
column-rule-width Debljina linije između stubaca
column-rule-style Vrsta linije između stubaca
column-rule-color Boja linije između stubaca
column-rule Kompleksan atribut za podešavanje izgleda linije izmneđu stubaca
column-fill Način popunjavanja stubaca
column-span Da li se elemenat može prostirati preko više stubaca

Atributi za stupce se prosto zadaju za elemenat za koji želimo da se sadržaj prikaže u obliku stubaca. Stupci se "aktiviraju" ako zadamo bar jedan od atributa: column-count, column-width ili columns. Taj element nije ništa posebno (trebao da bude neki blok element), a inače može biti pozicioniran, imati širinu i visinu i sl. Dakle jedan sasvim običan blok.

.blok { width: 80%; height: 500px; column-count: 3; column-rule: 2px solid red; }

Vrlo je važno doneti pravu odluku - kada koristiti stupce?

Ok, ovo je malo preterano, ali pre nego što jedva dočekate da poređate tekst vašeg sajta kao u novinama, zapitajte se zašto jako retko viđate stupce na internetu? Istina je da stupci dobro funkcionišu u časopisima. To omogućava da se redovi relativno sitnog teksta skrate i time olakša čitanje. Međutim, na web stranicama se postiže suprotan efekat - korisnika zamara stalno skrolovanje gore-dole dok prelazi na početak sledećeg stupca. U suštini to bi bio ekvivalent stupcu u časopisu koji bi se protezao na nekoliko stranica, pa bi tada čitalac morao da se vraća kako bi nastavio sa čitanjam.

Stupci ipak imaju svoju svrhu. Ako imamo deo teksta koji je sam po sebi "uzan" a dosta dugačak (kao npr. dugačka lista termina), stranica bi najvećim delom bila nepopunjena, a korisnik bi morao dosta da skroluje dok čita - preglednost je smanjena. U ovom slučaju bi stupci mogli da predstavljaju spas. Isto tako, možemo ih koristiti na kratkim delovima teksta koji neće zahtevati vertikalno skrolovanje.

Stupci su veoma fleksibilni, ali ako malo razmislite, shvatićete da ih upravo zato nikada ne možete potpuno kontrolisati. Uglavnom će web čitač, da bi zadovoljio zahteve broja stubaca, razmaka i linije među njima, sam odrediti širinu stubaca.

Sada ćemo se pozabaviti CSS atributima koji su nam od značaja za kreiranje stubaca. Za svaki se mogu zadati poznate globalne vrednosti (rezervisane reči)

...pa ih u atributima nećemo posebno navoditi.

column-count

Atribut column-count služi da odredimo broj stubaca. Moguće vrednosti su:

Obično želimo da eksplicitno zadamo broj stubaca. Tada se vrednost zadaje kao numerik i to obavezno kao ceo pozitivan broj.

column-count: [broj stubaca];

column-width

Ovaj atribut definiše širinu stubaca. Zadata širina se odnosi na sve stupce, što znači da su uvek svi jednake širine. Nemoguće je zadati stupce različitih širina. Moguće vrednosti su:

Dakle, kada želimo da zadamo konkretnu širinu stubaca, zadajemo vrednost kao metriku (sa jedinicom mere). I ova vrednost mora biti pozitivna.

column-width: [širina];

Kada zadamo vrednost kao metriku, imajte u vidu da je to samo preporuka - prava širina stubaca će zavisiti od njihovog broja i raspoloživog prostora.

Eventualno bismo mogli da podesimo širinu stubaca baš po našoj želji, ali samo ako podesimo sve i ostale atribute vezane za stupce - column-gap (širina između stubaca), column-rule-width (širina linije između stubaca), kao i širinu samog elementa - width.

columns

Ovo je kompleksan atribut kojim se istovremeno mogu zadati broj i širina stubaca.

columns: [broj] [širina]; columns: auto [širina]; columns: [širina]; columns: [broj] auto; columns: [broj]; columns: auto auto;

Primer: Osnovno podešavanje stubaca

U primeru imamo tri div bloka kojima zadajemo stupce. Svi blokovi imaju poravnat tekst i marginu. Svaki od njih ima posebnu boju teksta, kako bismo ih lakđe razlikovali.


  <style>
    .plavo {
      color: blue;
      column-count: 3;
    }
    .zeleno {
      color: green;
      column-width: 150px;
    }
    .crveno {
      color: red;
      columns: 2 200px;
    }
  </style>

  <div class="plavo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
  <div class="zeleno">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
  <div class="crveno">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
p1

U plavom bloku smo samo podesili broj stubaca. Web čitač je sam odredio širinu i napravio razmak među njima.

U zelenom bloku smo samo podesili samo širinu stubaca a broj stubaca je automatski izračunat da se stupci uklope u širinu div bloka.

Konačno, u crvenom bloku smo iskoristili atribut columns kako bismo odredili broj i širinu stubaca. Vidimo kako ne uspevamo zaista da kontrolišemo stupce. Primarno za web čitač je da zadati broj stubaca smesti u ukupnu širinu bloka. Sami stupci možda neće dobiti širinu koju smo zadali.

column-gap

CSS atribut kojim se zadaje širina razmaka između stubaca. Moguće vrednosti su:

Ako zadamo širinu kao metriku, ona mora biti data kao pozitivna vrednost.

column-gap: [širina];

column-rule-width
column-rule-style
column-rule-color
column-rule

Atributi grupe column-rule služe za definisanje izgleda linije između stubaca. Najjednostavnije je koristiti kompleksan atribut column-rule, pomoću koga istovremeno možemo podesiti i debljinu i boju i vrstu linije.

column-rule: [debljina] [boja] [vrsta linije];

Ako mislite da ovo liči na podešavanje okvirne linije (border), u pravu ste. Čak postoje i posebni atributi za podešavanje svake vrednosti posebno. Tako imamo atribut column-rule-width za podešavanje debljine linije, zatim column-rule-color za podešavanje boje linije, i konačno column-rule-style za podešavanje vrste linije.

column-rule-width: [debljina]; (metrika) column-rule-color: [boja]; (kolorna vrednost) column-rule-style: [vrsta linije]; (rezervisana reč)

Isto kao kod podešavanja linije bordera, i za CSS atribut column-rule-style, je moguće navesti sledeće vrednosti:

Primer: Linija i razmak između stubaca

Ovaj primer prilično lići na prethodni, s tim što smo sada eksperimentisali i sa razmakom i linijom između stubaca.


  <style>
    .plavo {
      color: blue;
      column-count: 3;
      column-gap: 4em;   /* razmak među stupcima */
    }
    .zeleno {
      color: green;
      column-width: 150px;
      column-rule: 2pt solid black;  /* linija među stupcima */
    }
    .crveno {
      color: red;
      columns: 2 200px;
      column-gap: 5em;
      column-rule: 6pt double #936;
    }
  </style>

  <div class="plavo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
  <div class="zeleno">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
  <div class="crveno">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
p2

U plavom tekstu smo zadali tri stupca, ali smo podesili i razmak među njima od 4em.

U zelenom tekstu smo se malo poigrali sa dodavanjem linije između stubaca, i to da bude puna linija, crne boje, debljine 2pt.

U poslednjem, crvenom bloku smo čisto šarenolikosti radi, dodali i razmak i liniju među stupcima.

column-fill

Ovaj CSS atribut se koristi kako bi se podesio način popunjavanja stubaca. Suštinski, moguće su dve vrednosti:

column-fill: [popunjavanje];

column-span

Ovaj atribut nije direktno vezan za podešavanje stubaca, već za neki elemenat koji se nalazi unutar teksta koji je u formi stubaca. Konkretno, pomoću ovog atributa definišemo da li se elemenat širi preko stubaca. Moguće vrednosti su:

column-span: [mogućnost];

Primer: Popunjavanje i rasprostiranje preko stubaca

U poslednjem primeru ćemo isprobati kako se ponašaju atributi column-fill i column-span. Svakom div bloku smo zadali formatiranje teksta u 3 stupca sa razmakom od 2em i tačkastom linijom.


  <style>
    div {
      column-count: 3;
      column-gap: 2em;
      column-rule: 2pt dotted;
    }
    .plavo {
      height: 250px;
      color: blue;
      column-fill: auto;  /* nebalansirano popunjavanje */
    }
    h2 {
      column-span: all;   /* naslov H2 se širi preko stubaca */
    }
    .zeleno {
      color: green;
    }
  </style>

  <div class="plavo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
  <div class="zeleno">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus.
    <h2>Važan naslov</h2>
    Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. 
    <h3>Manje važan naslov</h3>
    In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
  </div>
p3

U plavom bloku smo zadali nebalansirano popunjavanje. Tačnije, web šitaš će prvo da popuni prvi stubac (do zadate visine bloka), zatim popunjava drugi stubac, itd. Da blok nije imao zadatu visinu, praktično bi sav tekst stao u prvi stubac.

U zelenom bloku smo dodali par naslova (H2 i H3), kako bismo isprobali mogućnost širenja elementa preko stubaca. Možete videti da smo za naslov h2 zadali da treba da se raširi preko stubaca. Proverite da li je vaš web čitač uspeo da se izbori sa ovim podešavanjem. Naslov h3 pripada samo jednom stupcu i on neće "prekinuti" stupce u prikazu.

  1. Mozilla Developer Network, Using CSS multi-column layouts
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.