CSS Lastnost: column-width

Lastnost column-width določa širino stolpca. Število stolpcev bo najmanjše število, potrebnih za prikaz celotne vsebine v elementu. Ko brskalnik ne more namestiti vsaj dveh stolpcev na določeno širino, se stolpci ustavijo in spustijo v en sam stolpec.

PRIMER

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

    <style>
        * {
            box-sizing: border-box;
        }
        article {
            height: auto;
            border: 4px double blue;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 30px;
        }
        article.a {
            column-width: 200px;
        }
        article.b {
            column-width: 400px;
        }
    </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