Po mnoho let jsou plátky CSS pro vytváření rozvržení stránek webových stránek zajímavé a přesto nezbytné. Pokud váš návrh volal pro více sloupců, otočil jste se na plováky . Problém s touto metodou spočívá v tom, že navzdory neuvěřitelné vynalézavosti, kterou weboví návrháři / vývojáři prokázali při vytváření komplexních rozvržení stránek, nebyly CSS floaty nikdy skutečně používány tímto způsobem.
Zatímco plavidla a umístění CSS mají jistě místo v designu webových stránek již mnoho let, novější rozložení technik včetně CSS Grid a Flexbox nyní dává webovým návrhářům nové způsoby, jak vytvořit jejich layout. Další novou technikou rozvržení, která ukazuje spoustu potenciálu, je CSS Multiple Columns.
CSS sloupce jsou již několik let, ale nedostatečná podpora ve starších prohlížečích (především starších verzích aplikace Internet Explorer) vedla mnoho profesionálů z webových stránek, aby používali tyto styly ve své produkční práci.
S koncem podpory starších verzí IE někteří weboví designéři nyní experimentují s novými možnostmi rozložení CSS, včetně sloupců CSS a zjišťují, že mají s těmito novými přístupy mnohem větší kontrolu, než s plaveckými plátnami.
Základy sloupců CSS
Jak naznačuje jeho název, vícenásobné sloupce CSS (známé také jako rozložení více sloupců CSS3) umožňují rozdělit obsah na nastavený počet sloupců. Nejzákladnější vlastnosti CSS, které byste použili, jsou:
- počet sloupců
- mezera mezi sloupci
Pro počet sloupců určíte počet sloupců, které chcete. Rozteč sloupů by byl okapy nebo mezery mezi těmito sloupci. Prohlížeč vezme tyto hodnoty a rovnoměrně rozdělí obsah na počet zadaných sloupců.
Společným příkladem více sloupců CSS v praxi by bylo rozdělení bloku textového obsahu na více sloupců, podobně jako v článku z novin. Řekněme, že máte následující značku HTML (uvědomte si, že například uvádím pouze začátek jednoho odstavce, zatímco v praxi by se v této značce pravděpodobně nacházel více odstavců obsahu):
Nadpis vašeho článku
Představte si zde spousty odstavců textu ...
Pokud jste pak napsali tyto styly CSS:
.content {-moz-sloupec-počet: 3; -webkit-počet sloupců: 3; počet sloupců: 3; -moz-sloupec-mezera: 30px; -webkit-sloupec-mezera: 30px; sloupec-mezera: 30px; }}Toto pravidlo CSS rozdělí rozdělení obsahu na 3 stejné sloupce s mezerou 30 pixelů mezi nimi. Pokud byste chtěli dva sloupce namísto 3, jednoduše byste tuto hodnotu změnili a prohlížeč by vypočítal nové šířky těchto sloupců pro rovnoměrné rozdělení obsahu. Všimněte si, že nejdříve používáme vlastnosti předpony dodavatele a následují deklarace bez předpony.
Je to tak snadné, že jeho použití tímto způsobem je sporné pro použití na webových stránkách. Ano, můžete rozdělit spoustu obsahu do několika sloupců, ale nemusí to být nejlepší zkušenost s čtením na webu, zejména pokud výška těchto sloupců klesne pod "záhyb" obrazovky.
Čtenáři by pak museli posunout nahoru a dolů, aby si přečetli celý obsah. Zásad CSS sloupců je však stejně snadné, jak vidíte zde, a může být použito mnohem víc, než jen rozdělit obsah některých odstavců - to může být skutečně použito pro rozvržení.
Rozložení pomocí sloupců CSS
Řekněme, že máte webovou stránku s obsahovou oblastí, která má 3 sloupce obsahu. Jedná se o velmi typické uspořádání webových stránek a pro dosažení těchto 3 sloupců byste normálně plavali divizemi, které jsou v ní. S více sloupci CSS je to mnohem jednodušší.
Zde je ukázka HTML:
Nejnovější zprávy
Obsah by šel sem ...
Z našeho blogu
Obsah by šel sem ...
p> Funkce CSS pro vytvoření těchto více sloupců začíná tím, co jste viděli dříve:
.content {-moz-sloupec-počet: 3; -webkit-počet sloupců: 3; počet sloupců: 3; -moz-sloupec-mezera: 30px; -webkit-sloupec-mezera: 30px; sloupec-mezera: 30px; }} Nyní je tu výzva, protože prohlížeč chce tento obsah rovnoměrně rozdělit, takže jestliže délka obsahu těchto divizí je odlišná, bude tento prohlížeč skutečně rozdělit obsah jednotlivých divizí, přidáním začátku do jednoho sloupce a pak pokračujte do dalšího (můžete to vidět pomocí tohoto kódu pro spuštění experimentu a přidání různých délek obsahu uvnitř každé divize)!
To není to, co chcete. Chcete, aby každé z těchto divizí vytvořilo zřetelný sloupec a bez ohledu na to, jak velký nebo malý může být obsah jednotlivých divizí, nikdy nechcete, aby se rozdělil. To můžete dosáhnout přidáním této další řady CSS:
.content div {zobrazení: inline-block; }} To přiměje tyto divize, které jsou uvnitř "obsahu", aby zůstaly neporušené, i když prohlížeč rozdělí to do několika sloupců. Ještě lepší, protože jsme zde nedali žádnou pevnou šířku, tyto sloupce budou automaticky měnit velikost prohlížeče, což je ideální aplikace pro citlivé webové stránky . S tímto "inline-block" stylu na místě, každý z vašich 3 divizí bude zřetelný sloupec obsahu.
Použití šířky sloupců
K dispozici je další vlastnost kromě "sloupců", které můžete použít, a v závislosti na vašem rozložení potřeby, to může být ve skutečnosti lepší volbou pro vaše stránky. Toto je "šířka sloupce". Použitím stejné značky HTML, jak bylo uvedeno výše, bylo by to možné udělat s naší CSS:
.content {-moz-sloupec-šířka: 500px; -webkit-šířka sloupce: 500px; šířka sloupce: 500px; -moz-sloupec-mezera: 30px; -webkit-sloupec-mezera: 30px; sloupec-mezera: 30px; } .content div {zobrazení: inline-block; }} Způsob, jakým to funguje, je, že prohlížeč používá tuto "šířku sloupce" jako maximální hodnotu daného sloupce. Takže pokud je okno prohlížeče menší než 500 pixelů, tyto 3 oddíly se objeví v jediném sloupci, jeden z vrcholů jiného. Jedná se o typické uspořádání, které se používá pro rozložení mobilní / malá obrazovka.
Vzhledem k tomu, že šířka prohlížeče se zvyšuje tak, aby byla dostatečně velká, aby se vešly se dvěma sloupci spolu s určenými mezery mezi sloupci, prohlížeč automaticky přechází z rozvržení jednoho sloupce na dva sloupce. Pokračujte ve zvyšování šířky obrazovky a nakonec získáte 3 sloupcový vzhled, přičemž každý z našich tří divizí se zobrazí ve vlastním sloupci. Opět je to skvělý způsob, jak získat nějaké citlivé rozvržení přátelské pro více zařízení a ani nemusíte používat mediální dotazy ke změně stylu rozvržení!
Další vlastnosti sloupce
Kromě zde uvedených vlastností existují také vlastnosti pro "pravidlo sloupce", včetně barevných, stylových a šířkových hodnot, které vám umožňují vytvářet pravidla mezi sloupci. Ty by byly použity namísto hranic, chcete-li mít některé řádky oddělující sloupce.
Čas experimentovat
V současné době je velmi dobře podporováno uspořádání více sloupců CSS. S předponami by tyto styly mohly vidět více než 94% uživatelů internetu a tato nepodporovaná skupina by opravdu byla mnohem staršími verzemi aplikace Internet Explorer, která již nemusí být podporována.
S touto podporovanou úrovní podpory není důvod začít experimentovat se sloupci CSS a nasazovat tyto styly na produkčních webových stránkách. Experimenty můžete spustit pomocí HTML a CSS, které jsou uvedeny v tomto článku, a přehrávat si s různými hodnotami, abyste zjistili, co by nejlépe vyhovovalo potřebám rozložení vašeho webu.
Funkce CSS pro vytvoření těchto více sloupců začíná tím, co jste viděli dříve:
.content {-moz-sloupec-počet: 3; -webkit-počet sloupců: 3; počet sloupců: 3; -moz-sloupec-mezera: 30px; -webkit-sloupec-mezera: 30px; sloupec-mezera: 30px; }}Nyní je tu výzva, protože prohlížeč chce tento obsah rovnoměrně rozdělit, takže jestliže délka obsahu těchto divizí je odlišná, bude tento prohlížeč skutečně rozdělit obsah jednotlivých divizí, přidáním začátku do jednoho sloupce a pak pokračujte do dalšího (můžete to vidět pomocí tohoto kódu pro spuštění experimentu a přidání různých délek obsahu uvnitř každé divize)!
To není to, co chcete. Chcete, aby každé z těchto divizí vytvořilo zřetelný sloupec a bez ohledu na to, jak velký nebo malý může být obsah jednotlivých divizí, nikdy nechcete, aby se rozdělil. To můžete dosáhnout přidáním této další řady CSS:
.content div {zobrazení: inline-block; }}To přiměje tyto divize, které jsou uvnitř "obsahu", aby zůstaly neporušené, i když prohlížeč rozdělí to do několika sloupců. Ještě lepší, protože jsme zde nedali žádnou pevnou šířku, tyto sloupce budou automaticky měnit velikost prohlížeče, což je ideální aplikace pro citlivé webové stránky . S tímto "inline-block" stylu na místě, každý z vašich 3 divizí bude zřetelný sloupec obsahu.
Použití šířky sloupců
K dispozici je další vlastnost kromě "sloupců", které můžete použít, a v závislosti na vašem rozložení potřeby, to může být ve skutečnosti lepší volbou pro vaše stránky. Toto je "šířka sloupce". Použitím stejné značky HTML, jak bylo uvedeno výše, bylo by to možné udělat s naší CSS:
.content {-moz-sloupec-šířka: 500px; -webkit-šířka sloupce: 500px; šířka sloupce: 500px; -moz-sloupec-mezera: 30px; -webkit-sloupec-mezera: 30px; sloupec-mezera: 30px; } .content div {zobrazení: inline-block; }}Způsob, jakým to funguje, je, že prohlížeč používá tuto "šířku sloupce" jako maximální hodnotu daného sloupce. Takže pokud je okno prohlížeče menší než 500 pixelů, tyto 3 oddíly se objeví v jediném sloupci, jeden z vrcholů jiného. Jedná se o typické uspořádání, které se používá pro rozložení mobilní / malá obrazovka.
Vzhledem k tomu, že šířka prohlížeče se zvyšuje tak, aby byla dostatečně velká, aby se vešly se dvěma sloupci spolu s určenými mezery mezi sloupci, prohlížeč automaticky přechází z rozvržení jednoho sloupce na dva sloupce. Pokračujte ve zvyšování šířky obrazovky a nakonec získáte 3 sloupcový vzhled, přičemž každý z našich tří divizí se zobrazí ve vlastním sloupci. Opět je to skvělý způsob, jak získat nějaké citlivé rozvržení přátelské pro více zařízení a ani nemusíte používat mediální dotazy ke změně stylu rozvržení!
Další vlastnosti sloupce
Kromě zde uvedených vlastností existují také vlastnosti pro "pravidlo sloupce", včetně barevných, stylových a šířkových hodnot, které vám umožňují vytvářet pravidla mezi sloupci. Ty by byly použity namísto hranic, chcete-li mít některé řádky oddělující sloupce.
Čas experimentovat
V současné době je velmi dobře podporováno uspořádání více sloupců CSS. S předponami by tyto styly mohly vidět více než 94% uživatelů internetu a tato nepodporovaná skupina by opravdu byla mnohem staršími verzemi aplikace Internet Explorer, která již nemusí být podporována.
S touto podporovanou úrovní podpory není důvod začít experimentovat se sloupci CSS a nasazovat tyto styly na produkčních webových stránkách. Experimenty můžete spustit pomocí HTML a CSS, které jsou uvedeny v tomto článku, a přehrávat si s různými hodnotami, abyste zjistili, co by nejlépe vyhovovalo potřebám rozložení vašeho webu.