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:

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;
        }
    }
}