CSS Lastnost: columns

Lastnost columns je skrajšana lastnost za širino in štetje stolpcev. Del s širino stolpca bo določil najmanjšo širino za vsak stolpec, medtem ko bo del s štetjem stolpcev določil največje število stolpcev. Z uporabo te lastnosti se bo postavitev z več stolpci samodejno razdelila v en sam stolpec pri ozkih širinah brskalnika, brez potrebe po medijskih poizvedbah ali drugih pravilih.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>columns</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        article {
            border: 4px double blue;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 30px;
        }
        article.a {
            columns: 100px 2;
        }
        article.b {
            columns: 200px 3;
        }
    </style>
</head>
<body>
<article class="a">
    <h1>Lorem Ipsum</h1>
    <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v
        uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku
        16. stoletja. To besedilo pa ni zgolj preživelo pet stoletij, temveč se je z malenkostnimi spremembami uspešno
        uveljavilo tudi v elektronskem namiznem založništvu. Na priljubljenosti je Lorem Ipsum pridobil v sedemdesetih
        letih prejšnjega stoletja, ko so na trg lansirali Letraset folije z Lorem Ipsum odstavki. V zadnjem času se
        Lorem Ipsum pojavlja tudi v priljubljenih programih za namizno založništvo kot je na primer Aldus PageMaker.</p>
    <h3>Standardni Lorem Ipsum odstavek, ki je v uporabi od 16. stoletja</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.</p>
</article>

<article class="b">
    <h1>Lorem Ipsum</h1>
    <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v
        uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku
        16. stoletja. To besedilo pa ni zgolj preživelo pet stoletij, temveč se je z malenkostnimi spremembami uspešno
        uveljavilo tudi v elektronskem namiznem založništvu. Na priljubljenosti je Lorem Ipsum pridobil v sedemdesetih
        letih prejšnjega stoletja, ko so na trg lansirali Letraset folije z Lorem Ipsum odstavki. V zadnjem času se
        Lorem Ipsum pojavlja tudi v priljubljenih programih za namizno založništvo kot je na primer Aldus PageMaker.</p>
    <h3>Standardni Lorem Ipsum odstavek, ki je v uporabi od 16. stoletja</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.</p>
</article>
</body>
</html>

REZULTAT