CSS3 - Izgledi u više kolona (Multi-Column Layouts)


Kreiranje izgleda sa više kolona

CSS3 je predstavio modul izgleda više kolona za kreiranje višestrukih rasporeda kolona na jednostavan i efikasan način. Sada možete kreirati izglede kakve vidite u časopisima i novinama bez upotrebe plutajućih okvira. Evo jednostavnog primjera razdvajanja teksta u tri kolone pomoću CSS3 funkcije višestrukog rasporeda kolona.

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 izgleda sa više kolona</title>
<style>
    p {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
           -moz-column-count: 3; /* Firefox */
                column-count: 3; /* Standardna sintaksa */
    }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
    bibendum nisi egestas suscipit gravida. Sed velit nisl, tristique sed 
    dui mollis, porta tempus ligula. Phasellus vel orci vel arcu 
    pellentesque fermentum. Duis bibendum metus arcu. Aliquam eget
    tortor vulputate, sollicitudin felis a, mollis libero. Aliquam vitae 
    consequat sapien, id blandit lectus. Integer ac nibh ac nulla 
    tincidunt accumsan sit amet sit amet risus. Integer id nisl urna. In a 
    enim elementum, auctor justo quis, tincidunt augue. Donec nibh
    dui, congue non neque quis, semper aliquam felis. Praesent 
    efficitur massa vel convallis euismod. Quisque metus lectus, 
    consectetur sit amet justo in, venenatis faucibus nunc. Aenean 
    faucibus, enim id egestas convallis, felis magna mattis est, in 
    ultricies est urna ac nisl.
    
    Cras placerat quis tortor quis molestie. Nullam imperdiet gravida
    velit eget sollicitudin. Nunc dictum pretium justo vel congue. 
    Praesent auctor leo maximus leo aliquam, eget vehicula tortor 
    tincidunt. Vestibulum finibus venenatis dui, nec lobortis mauris 
    convallis id. Maecenas porttitor erat tellus, at vulputate eros 
    euismod a. In aliquam, dolor et bibendum consequat, eros felis 
    ultricies lorem, ac fermentum arcu metus in magna. Integer auctor 
    sapien a massa porta, et suscipit sapien sollicitudin. Maecenas vel 
    hendrerit nibh. Curabitur convallis interdum ornare. Curabitur justo 
    nibh, pretium ac convallis vitae, consectetur sit amet orci. Nunc non
    enim non ligula efficitur venenatis et at metus. Duis turpis velit, 
    lacinia interdum purus ac, venenatis semper lacus. Aenean mattis 
    fermentum odio ut suscipit.
    
    Vestibulum vehicula lobortis diam et pretium. Duis in aliquet 
    tellus. Phasellus tincidunt odio id faucibus malesuada. Cum sociis 
    natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Integer euismod porta nibh sit amet efficitur. 
    Phasellus blandit porta vulputate. Proin placerat efficitur cursus. 
    Fusce blandit tristique urna quis mollis. Duis erat lectus, gravida nec 
    tellus eu, cursus laoreet augue. Maecenas in nisi mauris. In vitae 
    justo posuere, tincidunt neque a, ultrices dui. Sed id bibendum 
    metus. Vestibulum at tincidunt felis, in efficitur libero.
    
    Mauris bibendum risus non condimentum gravida. Praesent sed 
    dictum augue, sit amet sollicitudin massa. Curabitur sed hendrerit 
    nisi. Nulla eget lacinia tortor, id sollicitudin risus. In hac habitasse 
    platea dictumst. Mauris lorem dui, venenatis et massa eget, pretium
    auctor risus. Nulla congue bibendum hendrerit. Phasellus nec 
    lorem in ipsum facilisis scelerisque. Duis quis massa metus. 
    Pellentesque commodo metus non bibendum aliquet. Duis 
    pellentesque tempus posuere. Mauris interdum lobortis massa vel 
    sodales.
    
    Curabitur feugiat, magna quis ultricies dignissim, felis leo varius 
    nulla, ut blandit arcu libero quis urna. Morbi sollicitudin odio purus, 
    ut elementum mauris feugiat sit amet. Fusce placerat scelerisque 
    turpis. Aliquam erat volutpat. Vestibulum blandit vitae erat a 
    sodales. Integer semper tristique risus eget lobortis. Aliquam luctus
    sed justo vel auctor. Nunc sit amet nulla eu est fringilla euismod 
    sed ac orci. Sed massa lorem, blandit sed massa quis, 
    condimentum ornare purus.</p>
</body>
</html>


Postavljanje broja kolona ili širine

CSS svojstva count-count i width-column kontrolišu hoće li se i koliko kolona pojaviti. Svojstvo count-count postavlja broj kolona u elementu multicol, dok svojstvo width-column postavlja željenu širinu kolona.

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer uostavljanje broja kolona ili širine u CSS3</title>
<style>
    p {
        -webkit-column-width: 150px; /* Chrome, Safari, Opera */
           -moz-column-width: 150px; /* Firefox */
                column-width: 150px; /* Standardna sintaksa */
    }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
    bibendum nisi egestas suscipit gravida. Sed velit nisl, tristique sed
    dui mollis, porta tempus ligula. Phasellus vel orci vel arcu 
    pellentesque fermentum. Duis bibendum metus arcu. Aliquam eget 
    tortor vulputate, sollicitudin felis a, mollis libero. Aliquam vitae 
    consequat sapien, id blandit lectus. Integer ac nibh ac nulla 
    tincidunt accumsan sit amet sit amet risus. Integer id nisl urna. In a
    enim elementum, auctor justo quis, tincidunt augue. Donec nibh 
    dui, congue non neque quis, semper aliquam felis. Praesent efficitur
    massa vel convallis euismod. Quisque metus lectus, consectetur sit
    amet justo in, venenatis faucibus nunc. Aenean faucibus, enim id 
    egestas convallis, felis magna mattis est, in ultricies est urna ac nisl.

    
    Cras placerat quis tortor quis molestie. Nullam imperdiet gravida
    velit eget sollicitudin. Nunc dictum pretium justo vel congue. 
    Praesent auctor leo maximus leo aliquam, eget vehicula tortor 
    tincidunt. Vestibulum finibus venenatis dui, nec lobortis mauris 
    convallis id. Maecenas porttitor erat tellus, at vulputate eros 
    euismod a. In aliquam, dolor et bibendum consequat, eros felis 
    ultricies lorem, ac fermentum arcu metus in magna. Integer auctor 
    sapien a massa porta, et suscipit sapien sollicitudin. Maecenas vel 
    hendrerit nibh. Curabitur convallis interdum ornare. Curabitur justo 
    nibh, pretium ac convallis vitae, consectetur sit amet orci. Nunc non
    enim non ligula efficitur venenatis et at metus. Duis turpis velit, 
    lacinia interdum purus ac, venenatis semper lacus. Aenean mattis 
    fermentum odio ut suscipit.
    
    Vestibulum vehicula lobortis diam et pretium. Duis in aliquet 
    tellus. Phasellus tincidunt odio id faucibus malesuada. Cum sociis 
    natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Integer euismod porta nibh sit amet efficitur. 
    Phasellus blandit porta vulputate. Proin placerat efficitur cursus. 
    Fusce blandit tristique urna quis mollis. Duis erat lectus, gravida nec
    tellus eu, cursus laoreet augue. Maecenas in nisi mauris. In vitae 
    justo posuere, tincidunt neque a, ultrices dui. Sed id bibendum 
    metus. Vestibulum at tincidunt felis, in efficitur libero.
   
    Mauris bibendum risus non condimentum gravida. Praesent sed 
    dictum augue, sit amet sollicitudin massa. Curabitur sed hendrerit 
    nisi. Nulla eget lacinia tortor, id sollicitudin risus. In hac habitasse 
    platea dictumst. Mauris lorem dui, venenatis et massa eget, pretium
    auctor risus. Nulla congue bibendum hendrerit. Phasellus nec 
    lorem in ipsum facilisis scelerisque. Duis quis massa metus. 
    Pellentesque commodo metus non bibendum aliquet. Duis 
    pellentesque tempus posuere. Mauris interdum lobortis massa vel 
    sodales.
    
    Curabitur feugiat, magna quis ultricies dignissim, felis leo varius 
    nulla, ut blandit arcu libero quis urna. Morbi sollicitudin odio purus,
    ut elementum mauris feugiat sit amet. Fusce placerat scelerisque 
    turpis. Aliquam erat volutpat. Vestibulum blandit vitae erat a 
    sodales. Integer semper tristique risus eget lobortis. Aliquam luctus
    sed justo vel auctor. Nunc sit amet nulla eu est fringilla euismod 
    sed ac orci. Sed massa lorem, blandit sed massa quis, 
    condimentum ornare purus.</p>
</body>
</html>


Postavljanje praznine u koloni

Možete kontrolisati razmak između kolona pomoću svojstva razmak između kolona. Ista praznina primjenjuje se između svake kolone. Zadan je normalan prostor, što je ekvivalentno 1em.

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    /* Standardna sintaksa */
    column-count: 3;
    column-gap: 100px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja CSS3 kolone</title>
<style>
    p {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 100px;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 100px;
        /* Standardna sintaksa */
        column-count: 3;
        column-gap: 100px;
    }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
    bibendum nisi egestas suscipit gravida. Sed velit nisl, tristique sed
    dui mollis, porta tempus ligula. Phasellus vel orci vel arcu 
    pellentesque fermentum. Duis bibendum metus arcu. Aliquam eget
    tortor vulputate, sollicitudin felis a, mollis libero. Aliquam vitae 
    consequat sapien, id blandit lectus. Integer ac nibh ac nulla 
    tincidunt accumsan sit amet sit amet risus. Integer id nisl urna. In a 
    enim elementum, auctor justo quis, tincidunt augue. Donec nibh 
    dui, congue non neque quis, semper aliquam felis. Praesent efficitur
    massa vel convallis euismod. Quisque metus lectus, consectetur sit
    amet justo in, venenatis faucibus nunc. Aenean faucibus, enim id 
    egestas convallis, felis magna mattis est, in ultricies est urna ac nisl.
    
    Cras placerat quis tortor quis molestie. Nullam imperdiet gravida
    velit eget sollicitudin. Nunc dictum pretium justo vel congue. 
    Praesent auctor leo maximus leo aliquam, eget vehicula tortor 
    tincidunt. Vestibulum finibus venenatis dui, nec lobortis mauris 
    convallis id. Maecenas porttitor erat tellus, at vulputate eros 
    euismod a. In aliquam, dolor et bibendum consequat, eros felis 
    ultricies lorem, ac fermentum arcu metus in magna. Integer auctor
    sapien a massa porta, et suscipit sapien sollicitudin. Maecenas vel
    hendrerit nibh. Curabitur convallis interdum ornare. Curabitur justo 
    nibh, pretium ac convallis vitae, consectetur sit amet orci. Nunc non
    enim non ligula efficitur venenatis et at metus. Duis turpis velit, 
    lacinia interdum purus ac, venenatis semper lacus. Aenean mattis 
    fermentum odio ut suscipit.
    
    Vestibulum vehicula lobortis diam et pretium. Duis in aliquet 
    tellus. Phasellus tincidunt odio id faucibus malesuada. Cum sociis 
    natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Integer euismod porta nibh sit amet efficitur. 
    Phasellus blandit porta vulputate. Proin placerat efficitur cursus. 
    Fusce blandit tristique urna quis mollis. Duis erat lectus, gravida nec
    tellus eu, cursus laoreet augue. Maecenas in nisi mauris. In vitae 
    justo posuere, tincidunt neque a, ultrices dui. Sed id bibendum 
    metus. Vestibulum at tincidunt felis, in efficitur libero.
    
    Mauris bibendum risus non condimentum gravida. Praesent sed 
    dictum augue, sit amet sollicitudin massa. Curabitur sed hendrerit 
    nisi. Nulla eget lacinia tortor, id sollicitudin risus. In hac habitasse 
    platea dictumst. Mauris lorem dui, venenatis et massa eget, pretium
    auctor risus. Nulla congue bibendum hendrerit. Phasellus nec 
    lorem in ipsum facilisis scelerisque. Duis quis massa metus. 
    Pellentesque commodo metus non bibendum aliquet. Duis 
    pellentesque tempus posuere. Mauris interdum lobortis massa vel 
    sodales.
    
    Curabitur feugiat, magna quis ultricies dignissim, felis leo varius 
    nulla, ut blandit arcu libero quis urna. Morbi sollicitudin odio purus,
    ut elementum mauris feugiat sit amet. Fusce placerat scelerisque
    turpis. Aliquam erat volutpat. Vestibulum blandit vitae erat a 
    sodales. Integer semper tristique risus eget lobortis. Aliquam luctus
    sed justo vel auctor. Nunc sit amet nulla eu est fringilla euismod 
    sed ac orci. Sed massa lorem, blandit sed massa quis, 
    condimentum ornare purus.</p>
</body>
</html>


Postavljanje pravila kolona

Takođe možete dodati liniju između kolona, tj. pravilo koristeći svojstvo column-rule. Stenografsko je svojstvo za postavljanje širine, stila i boje pravila u jednoj deklaraciji. Svojstvo column-rule uzima iste vrijednosti kao border i outline.

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standardna sintaksa */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanja pravila za kolone u  CSS3</title>
<style>
    p {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 100px;
        -webkit-column-rule: 2px solid red;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 100px;
        -moz-column-rule: 2px solid red;
        /* Standardna sintaksa */
        column-count: 3;
        column-gap: 100px;
        column-rule: 2px solid red;
    }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
    bibendum nisi egestas suscipit gravida. Sed velit nisl, tristique sed
    dui mollis, porta tempus ligula. Phasellus vel orci vel arcu 
    pellentesque fermentum. Duis bibendum metus arcu. Aliquam eget
    tortor vulputate, sollicitudin felis a, mollis libero. Aliquam vitae 
    consequat sapien, id blandit lectus. Integer ac nibh ac nulla 
    tincidunt accumsan sit amet sit amet risus. Integer id nisl urna. In a 
    enim elementum, auctor justo quis, tincidunt augue. Donec nibh 
    dui, congue non neque quis, semper aliquam felis. Praesent efficitur
    massa vel convallis euismod. Quisque metus lectus, consectetur sit
    amet justo in, venenatis faucibus nunc. Aenean faucibus, enim id 
    egestas convallis, felis magna mattis est, in ultricies est urna ac nisl.
    
    Cras placerat quis tortor quis molestie. Nullam imperdiet gravida 
    velit eget sollicitudin. Nunc dictum pretium justo vel congue. 
    Praesent auctor leo maximus leo aliquam, eget vehicula tortor 
    tincidunt. Vestibulum finibus venenatis dui, nec lobortis mauris 
    convallis id. Maecenas porttitor erat tellus, at vulputate eros 
    euismod a. In aliquam, dolor et bibendum consequat, eros felis 
    ultricies lorem, ac fermentum arcu metus in magna. Integer auctor 
    sapien a massa porta, et suscipit sapien sollicitudin. Maecenas vel 
    hendrerit nibh. Curabitur convallis interdum ornare. Curabitur justo 
    nibh, pretium ac convallis vitae, consectetur sit amet orci. Nunc non
    enim non ligula efficitur venenatis et at metus. Duis turpis velit, 
    lacinia interdum purus ac, venenatis semper lacus. Aenean mattis 
    fermentum odio ut suscipit.
    
    Vestibulum vehicula lobortis diam et pretium. Duis in aliquet 
    tellus. Phasellus tincidunt odio id faucibus malesuada. Cum sociis 
    natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Integer euismod porta nibh sit amet efficitur. 
    Phasellus blandit porta vulputate. Proin placerat efficitur cursus.
    Fusce blandit tristique urna quis mollis. Duis erat lectus, gravida 
    nec tellus eu, cursus laoreet augue. Maecenas in nisi mauris. In vitae
    justo posuere, tincidunt neque a, ultrices dui. Sed id bibendum 
    metus. Vestibulum at tincidunt felis, in efficitur libero.
    
    Mauris bibendum risus non condimentum gravida. Praesent sed 
    dictum augue, sit amet sollicitudin massa. Curabitur sed hendrerit 
    nisi. Nulla eget lacinia tortor, id sollicitudin risus. In hac habitasse 
    platea dictumst. Mauris lorem dui, venenatis et massa eget, pretium
    auctor risus. Nulla congue bibendum hendrerit. Phasellus nec 
    lorem in ipsum facilisis scelerisque. Duis quis massa metus. 
    Pellentesque commodo metus non bibendum aliquet. Duis 
    pellentesque tempus posuere. Mauris interdum lobortis massa vel 
    sodales.
    
    Curabitur feugiat, magna quis ultricies dignissim, felis leo varius 
    nulla, ut blandit arcu libero quis urna. Morbi sollicitudin odio purus, 
    ut elementum mauris feugiat sit amet. Fusce placerat scelerisque 
    turpis. Aliquam erat volutpat. Vestibulum blandit vitae erat a 
    sodales. Integer semper tristique risus eget lobortis. Aliquam luctus
    sed justo vel auctor. Nunc sit amet nulla eu est fringilla euismod 
    sed ac orci. Sed massa lorem, blandit sed massa quis, 
    condimentum ornare purus.</p>
</body>
</html>


Svojstva višestrukih kolona CSS3

Sljedeća tabela daje kratak pregled svih svojstava višestrukih kolona:

Svojstvo Opis
column-count Navodi broj kolona unutar elementa s više kolona.
column-fill Određuje kako se sadržaj širi po kolonama.
column-gap Određuje razmak između kolona.
column-rule Određuje ravnu liniju ili pravilo koje će se povući između svake kolone.
column-rule-color Određuje boju pravila između kolona.
column-rule-style Određuje stil pravila između kolona.
column-rule-width Određuje širinu pravila između kolona.
column-span Određuje koliko se kolona element proteže.
column-width Određuje optimalnu širinu kolone.
columns Stenografsko svojstvo za istovremeno postavljanje column-width i column-count.