Column – obsah ve sloupcích

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>:

  • První
  • Druhá
  • Třetí
  • Čtvrtá
  • Pátá
  • Šestá
  • Sedmá
  • Osmá
  • Devátá

Vlastnost column-*

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

ZnačkaVýznam
column-countpočet sloupců
column-gapšíře mezery mezi sloupci
column-rulestyl 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
columnszkratka; 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.

  • Živá ukázka – při změně dostupné velikosti se mění počet sloupců

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.

  • První
  • Druhá
  • Třetí
  • Čtvrtá
  • Pátá
  • Šestá
  • Sedmá
  • Osmá
  • Devátá

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Rotace

Rotace obsahu

Napříč prohlížeči funkční řešení vytvoření svislého textu (otočeného o 90 stupňů).

Kulaté rohy

Kulaté okraje v CSS

Jak vytvořit v CSS zaoblené okraje.

CSS průhlednost (opacity)

Průhledný obsah v CSS

Pro zprůhlednění obsahu existují různé možnosti. Nejen CSS vlastnost opacity.

Filtr blur

Rozmazání obsahu

Rozmazávání obsahu v různých prohlížečích.

CSS zoom

Zvětšení a zmenšení v CSS

Jak v CSS zoomovat (zvětšovat a zmenšovat) elementy.

Komentáře