Multiple Columns (sloupce) - Český CSS3 manuál

Určitě znáte členění textu do sloupců například z novin nebo z Wordu. Pomocí CSS3 a vlastnosti column toho lze hravě dosáhnout v HTML.

Vytvoření sloupců

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Stačí nám nastavit column-count na požadovaný počet sloupců:

div
{
        -moz-column-count:3; /* Firefox */
        -webkit-column-count:3; /* Safari and Chrome */
        column-count:3;
}

Pak do divu stačí napsat nějaký text a on se automaticky rozčlení.

Rozestup mezi sloupci

Za pomocí column-gap lze nastavit rozestup mezi sloupci:

div
{
        -moz-column-gap:40px; /* Firefox */
        -webkit-column-gap:40px; /* Safari and Chrome */
        column-gap:40px;
}

Pomocí column-rule můžeme určit jak bude vypadat místo mezi sloupci:

div
{
        -moz-column-rule:3px outset #ff00ff; /* Firefox */
        -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
        column-rule:3px outset #ff00ff;
}