Vícesloupcový text a column

V novinách nebo časopisech je běžné, že je text rozdělen do více sloupečků. Pro docílení tohoto efektu na webové stránce existují CSS vlastnosti column-*.

Podpora

Tvorba sloupců s využít CSS vlastností column-* funguje od Internet Exploreru 9. V Chrome/Opeře je nutno použít CSS prefix -webkit-, ve Firefoxu zase -moz-. Ve staré Opeře 12 funguje samotné column-* jako v IE 9 a novějších.

Ukázka rozdělení seznamu <ul>:

Vlastnost column-*

Pro nastavení sloupců existují následující vlastnosti:

Značka	Význam
column-count	počet sloupců
column-gap	šíře mezery mezi sloupci
column-rule	styl oddělovače sloupců, funguje podobně jako border (analogicky lze rozdělit na 3 vlastnosti column-rule-color, column-rule-style a column-rule-width).
column-width	šířka jednoho sloupce
columns	zkratka; sdružení column-count a column-width do jedné vlastnosti

Změna počtu sloupců

Užitečné chování CSS column spočívá v tom, že se počet sloupců dokáže sám průběžně měnit podle dostupného prostoru. V případě, že se zadá šířka (column-width), se tento rozměr chápe jako minimální, kdy se při zúžení sloupeček odebere.

Používat sloupce?

Stručně řečeno: Ne.

Web funguje jinak než časopis nebo noviny – není rozdělen na jednotlivé stránky, ale text plyne nerozděleně shora dolů.

Použití více sloupců bude tedy pro návštěvníky většinou nezvyklé a nepřehledné.

Možná existují výjimky, kdy je použití více sloupců užitečné, ale moc mě jich nenapadá (budu rád, když mi dáte tip do komentářů).

Více sloupců ve starších prohlížečích

Ve starších prohlížečích existují dvě možnost řešení:

1. Přesypávání obsahu JavaScriptem.
2. Hackování v CSS.

Následující ukázka je funkční od Internet Exploreru 7. Používá se primitivní metoda selektoru sourozence ve stylu li+li+li+li+li+li a relativní posicování.

Od páté položky v seznamu se začne tvořit nový sloupec.

Responsivní tabulka ve sloupcích

V SCSS:

.table-column {
    display: block;
    width: 100%;

    &__body {
        display: block;
        width: 100%;

        @include respond(880, 1039) {
            column-count: 2;
        }

        @include respondMin(1140) {
            column-count: 2;
        }

        @include respondMin(1440) {
            column-count: 3;
        }
    }

    &__row {
        display: table;
        width: 100%;
        break-inside: avoid;
    }

    &__cell {
        display: table-cell;
        border-top: 1px solid silver;

        &--join {
            padding: 0;
        }
    }
}