Ako používať stĺpce CSS pre rozloženie webových stránok s viacerými stĺpcami

ObsahRozbaliť

• Základy stĺpcov CSS
• Rozloženie so stĺpcami CSS
• Použitie Column-Width
• Ďalšie vlastnosti stĺpca
• Čas experimentovať

Veľa rokov, CSS pláva boli vyberavý, ale nevyhnutný komponent pri vytváraní rozložení webových stránok. Ak váš návrh vyžadoval viac stĺpcov, obrátili ste sa na plaváky. Problém s touto metódou je, že napriek neuveriteľnej vynaliezavosti, ktorú weboví dizajnéri/vývojári preukázali pri vytváraní komplexných stránok rozloženia , CSS floats neboli nikdy v skutočnosti určené na použitie týmto spôsobom.

Zatiaľ čo floats a CSS positioning budú mať vo webovom dizajne svoje miesto na mnoho ďalších rokov, novšie techniky rozloženia vrátane CSS Grid a Flexbox teraz poskytujú webovým dizajnérom nové spôsoby, ako vytvoriť rozloženie svojich stránok. Ďalšou novou technikou rozloženia, ktorá ukazuje veľký potenciál, sú CSS Multiple Columns.

Stĺpce CSS existujú už niekoľko rokov, ale nedostatok podpory v starších prehliadačoch (hlavne starších verziách Internet Explorera) zabránil mnohým webovým profesionálom používať tieto štýly vo svojej produkčnej práci.

S ukončením podpory pre tieto staršie verzie IE teraz niektorí weboví dizajnéri experimentujú s novými možnosťami rozloženia CSS vrátane stĺpcov CSS a zisťujú, že s týmito novými prístupmi majú oveľa väčšiu kontrolu ako s plávajúcimi.

Základy stĺpcov CSS

Ako už názov napovedá, CSS Multiple Columns (známe aj ako CSS3 viacstĺpcové rozloženie) vám umožňuje rozdeliť obsah do určitého počtu stĺpcov. Najzákladnejšie vlastnosti CSS, ktoré by ste použili, sú:

• počet stĺpcov
• stĺpec-medzera

Pre počet stĺpcov zadáte požadovaný počet stĺpcov. Medzera stĺpov by boli žľaby alebo medzery medzi týmito stĺpmi. Prehliadač prevezme tieto hodnoty a rozdelí obsah rovnomerne do počtu stĺpcov, ktoré určíte.

Bežným príkladom viacerých stĺpcov CSS v praxi by bolo rozdelenie bloku textového obsahu do viacerých stĺpcov, podobne ako v novinovom článku. Povedzme, že máte nasledujúce označenie HTML (všimnite si, že napríklad na účely sme vložili iba začiatok jedného odseku, zatiaľ čo v praxi by toto označenie pravdepodobne obsahovalo viacero odsekov obsahu):

|_+_|
Nadpis tvojho clanku

Predstavte si tu veľa odsekov textu...

Ak ste potom napísali tieto štýly CSS:

|_+_|

Toto pravidlo CSS by rozdelilo rozdelenie obsahu na 3 rovnaké stĺpce s medzerou 30 pixelov medzi nimi. Ak by ste chceli dva stĺpce namiesto 3, jednoducho by ste túto hodnotu zmenili a prehliadač by vypočítal nové šírky týchto stĺpcov, aby rovnomerne rozdelil obsah. Všimnite si, že najprv používame vlastnosti s predponou od dodávateľa a potom deklarácie bez predpony.

Akokoľvek je to jednoduché, jeho použitie týmto spôsobom je pri používaní webových stránok otázne. Áno, množstvo obsahu môžete rozdeliť do viacerých stĺpcov, ale pre web to nemusí byť najlepší zážitok z čítania, najmä ak výška týchto stĺpcov klesne pod záhyb obrazovky.

Čitatelia by potom museli posúvať nahor a nadol, aby si prečítali celý obsah. Princíp stĺpcov CSS je však taký jednoduchý, ako tu vidíte, a dá sa použiť na oveľa viac, než len rozdeliť obsah niektorých odsekov – možno ho skutočne použiť na rozloženie.

Rozloženie so stĺpcami CSS

Povedzme, že máte webovú stránku s oblasťou obsahu, ktorá má 3 stĺpce obsahu. Toto je veľmi bežné rozloženie webových stránok a na dosiahnutie týchto 3 stĺpcov by ste za normálnych okolností mali plávať rozdelenia, ktoré sú v nich. S viacerými stĺpcami CSS je to oveľa jednoduchšie.

Tu je ukážka HTML:

|_+_|

Z nášho blogu

Obsah by patril sem…

Pripravované akcie

Obsah by patril sem…

CSS na vytvorenie týchto viacerých stĺpcov začína tým, čo ste videli predtým:

|_+_|

Teraz je tu problém, že prehliadač chce tento obsah rozdeliť rovnomerne, takže ak je dĺžka obsahu týchto rozdelení odlišná, prehliadač v skutočnosti rozdelí obsah jednotlivej divízie, pričom jej začiatok pridá do jedného stĺpca a potom bude pokračovať do iného (môžete to vidieť pomocou tohto kódu na spustenie experimentu a pridanie rôznych dĺžok obsahu do každej divízie).

To nie je to, čo chcete. Chcete, aby každé z týchto oddielov vytvorilo samostatný stĺpec, a bez ohľadu na to, aký veľký alebo malý môže byť obsah jednotlivých oddielov, nikdy ho nechcete rozdeliť. Môžete to dosiahnuť pridaním tohto ďalšieho riadku CSS:

|_+_|

To prinúti tie časti, ktoré sú vo vnútri obsahu, zostať nedotknuté, aj keď ich prehliadač rozdelí do viacerých stĺpcov. Ešte lepšie je, že keďže sme tu nič nedávali pevnú šírku, veľkosť týchto stĺpcov sa automaticky zmení podľa veľkosti prehliadača, čo z nich robí ideálnu aplikáciu pre responzívne webové stránky . S týmto štýlom inline-block bude každé z vašich 3 oddelení samostatným stĺpcom obsahu.

Použitie Column-Width

Okrem počtu stĺpcov môžete použiť aj inú vlastnosť, ktorá v závislosti od vašich potrieb rozloženia môže byť pre váš web v skutočnosti lepšou voľbou. Toto je šírka stĺpca. Použitím rovnakého označenia HTML, ako bolo uvedené vyššie, by sme to mohli urobiť pomocou nášho CSS:

|_+_|

Funguje to tak, že prehliadač používa túto šírku stĺpca ako maximálnu hodnotu tohto stĺpca. Ak je teda okno prehliadača široké menej ako 500 pixelov, tieto 3 časti sa zobrazia v jednom stĺpci, jeden nad druhým. Toto je typické rozloženie používané pre rozloženia pre mobilné zariadenia/malé obrazovky.

Keď sa šírka prehliadača zväčší tak, aby bola dostatočne veľká na to, aby sa do nej zmestili 2 stĺpce spolu so špecifikovanými medzerami medzi stĺpcami, prehliadač automaticky prejde z rozloženia s jedným stĺpcom na dva stĺpce. Pokračujte v zväčšovaní šírky obrazovky a nakoniec získate 3 stĺpcový dizajn, pričom každé z našich 3 oddielov sa zobrazuje vo vlastnom stĺpci. Opäť je to skvelý spôsob, ako získať určitú odozvu, priateľské k viacerým zariadeniam rozloženia a ani ich nemusíte používať mediálne otázky zmeniť štýly rozloženia!

Ďalšie vlastnosti stĺpca

Okrem tu uvedených vlastností existujú aj vlastnosti pre stĺpcové pravidlo vrátane hodnôt farby, štýlu a šírky, ktoré vám umožňujú vytvárať pravidlá medzi stĺpcami. Tie by sa použili namiesto okrajov, ak chcete mať nejaké čiary oddeľujúce vaše stĺpce.

Čas experimentovať

V súčasnosti je veľmi dobre podporované rozloženie CSS Multiple Column Layout. S predponami by viac ako 94 % používateľov webu mohlo vidieť tieto štýly a táto nepodporovaná skupina by v skutočnosti boli len oveľa staršie verzie programu Internet Explorer, ktoré už aj tak nie sú podporované.

S touto úrovňou podpory, ktorá je teraz k dispozícii, nie je dôvod nezačať experimentovať so stĺpcami CSS a nasadzovať tieto štýly na webových stránkach pripravených na produkciu. Svoje experimenty môžete začať pomocou HTML a CSS uvedených v tomto článku a pohrať sa s rôznymi hodnotami, aby ste zistili, čo by najlepšie vyhovovalo potrebám rozloženia vášho webu.