Rozloženie mriežky CSS: množte sa a dobyvajte - alebo ako skutočne navrhnúť pomocou mriežky.

Môžete ma sledovať na Twitteri a získať návody, tipy na JavaScript atď.

V tomto tutoriále navrhneme responzívne rozloženie pomocou mriežky CSS. A tu je pohľad z vtáčej perspektívy na to, čo možno od tohto procesu očakávať:

Ak chcete získať dobrú predstavu o tom, ako funguje flex, vyskúšajte editor rozloženia flex na tejto stránke.

Celá enchilada. Páči sa mi uverejnenie obsahu obrázkového pohľadu z vtáčej perspektívy vopred, aby som ušetril čas pri posúvaní.

S vreckovými zariadeniami nezávislými na rozlíšení sa všetko skomplikovalo. Spôsobujú zmenu dokonca aj klasických responzívnych pravidiel dizajnu, IM.

Tak som sa pustil do hľadania štandardizácie responzívneho dizajnu prehlbovaním všetkých možností mriežky CSS, ako by to bol test IQ ... alebo tak niečo ... A toto je môj prvý tutoriál zo série o skutočných rozloženiach pomocou mriežky CSS.

To, čo som objavil, nasleduje.

Základné nápady za delením stĺpcov

Snažil som sa prísť na to, čo v skutočnosti máme z každej divízie stĺpcov.

Jednostĺpcové návrhy nám pomáhajú zaradiť všetok náš obsah do dlhého vertikálneho zoznamu.

Dizajn s dvoma stĺpcami je vhodný pre miniatúrne (tabletové) obrázkové galérie / portfóliá.

Dizajn stĺpcov stromov je prvý svojho druhu, ktorý ponúka hranice (okraje).

Dizajn so štyrmi stĺpcami funguje dobre aj ako galérie obrázkov na celej obrazovke.

Všimol som si, že rozloženia stĺpcov s nepárnymi číslami (≥ 1) fungujú pre rozloženie na hraniciach.

Hmm. a čo dizajn s 5 stĺpcami? Pamätajte, že stĺpce s nepárnymi číslami sa často používajú na vytváranie hraníc. Pretože vždy skončia na 2 ďalších stranách.

Päťstĺpcové dizajny môžu vytvoriť celkom slušný formát článkov @ stredného formátu.

A po zvyšok tohto tutoriálu preskúmame jeho vytvorenie!

Použite fr jednotky, aby sa rozšírili tak, ako by ste chceli okraj: automaticky na bežné prvky. Nezáleží na tom, či je to 1fr alebo 2fr alebo n-fr pre okraje, pokiaľ je primárny obsah špecifikovaný pomocou pixelov alebo veľkou hodnotou (r) fr (10fr, 20fr atď.):

Jediným rozdielom je, že médium používa 1 000 pixelov pre široký obsah a 700 pixlov pre hlavné stĺpce článkov. Myšlienka je však rovnaká.

Citlivá mriežka + mobilný telefón

Zatiaľ sme vytvorili primárne lešenie. Ale čo responzívny dizajn?

CSS Grid uľahčuje prácu, ako si myslíte!

pamätať:

responzívny obsah! = responzívne okraje.

Tieto dve techniky by sa mali riešiť osobitne. Ale…

Ako v tomto prípade, často je možné vyriešiť problém s responzívnym obsahom vyriešením problému s responzívnym okrajom.

Ak dokážete využiť svoju kreativitu na vyriešenie viacerých problémov pomocou jednej techniky ... o to lepšie.

V tomto prípade to však môžeme vyriešiť jednoducho prepnutím vonkajších jazdných pruhov vašej šablóny na 0,5fr (fialové a modré). A ... tiež prepínaním rozpätia alebo oblastí šablón na rozšírenie do viacerých stĺpcov, čím sa vytvorí široký obsahový priestor , (Ružová oblasť nad.)

Môžete to urobiť prostredníctvom mediálnych dopytov alebo skriptu JavaScript.

Nakoniec… zmeňte hlavný pruh (zelený) na 10fr. (Môžete použiť podobnú hodnotu, ale ≥ 10 zvyčajne bude fungovať dobre.) Tým sa automaticky zmení váš hlavný (zelený) pruh na aktuálne rozlíšenie obrazovky. Pretože obe hranice sú teraz 0,5fr, všetko vrátane hraníc a obsahu sa bude správne upravovať.

Ak potrebujete úplne odstrániť okraje 0,5fr, môžete ich nastaviť na 0fr. Ja osobne by som však chcel mať malú hranicu pre mobilné zobrazenia. Podľa môjho názoru iba vylepšuje vzhľad jazdného pruhu.

Chystáte sa na mobil

Akonáhle sú splnené všetky vyššie uvedené kroky ... Keď stlačíte do menšieho priestoru, mali by ste prísť na niečo také (vyššie).

Poučenie z tejto témy?

Vždy sa snažte nájsť najpůvabnejšie riešenie. To znamená, že je to čisté, nekomplikované a ak je to možné, rieši viac problémov použitím jednej zmeny (alebo dvoch). Nie je to také ťažké, ako to môže znieť.

  • Je to jediné riešenie? Nie.
  • Je to perfektné riešenie? Nie.
  • Vyrieši to však problém a funguje to - dosť dosť.

A na to je dobré sa zamerať. V tomto návode je uvedený prístup:

1. Viac odmeňovania a zábavy
 2. Je to slušné.
 3. Vyzýva vás, aby ste skutočne pochopili, ako a prečo niečo funguje.
 4. Je to jednoduché. Preto vytvára ľahko udržiavateľný kód.
 5. Vytvára čistý kód.
 6. Udržuje vaše svedomie čisté.

Keď už hovoríme o tom, že ... inak ... môžete začať „hackovať“ kód. (Pokúsiť sa vyriešiť problémy pokusom a omylom, často bez pochopenia toho, ako to vlastne funguje.) Stále budete robiť veci týmto spôsobom. A pravdepodobne dokonca cítia splnenie niektorých druhov. Ale ... nebude to žiadna sranda.

Dynamický editor článkov ako médium?

V dynamicky generovanom editore článkov budete samozrejme musieť kódovať stĺpce so širokým obsahom, aby fungovali algoritmom. Nikdy neviete, akú kombináciu textu a širokého obsahu bude autor chcieť použiť.

Môžu byť usporiadané akýmkoľvek spôsobom. Myslím si však, že pomocou JavaScriptu a niekoľkých hodín času je možné vytvoriť dynamicky generovaný editor článkov (rovnako ako stredné) výmenou oblastí šablón mriežky, ako je opísané vyššie.

Toto rozloženie môžete samozrejme použiť na jednoduché statické články, ak ich sami navrhujete ručne a vopred viete, aký typ obsahu nasleduje.

Nie je to alternatíva mriežky pre CSS na navrhovanie článkov podobných stredným skupinám?

Alternatíva bez mriežky CSS? No ... nie veľký rozdiel. Možno zložitejšie. Je to stále algoritmus, ale nakoniec použijete bežné prvky DIV.

Veľa šťastia s týmto .

Myslím si, že mriežka CSS zjednodušuje proces bez obetovania čistého kódu.

Pozrel som sa na pre svoju stránku s tutoriálom pre médium. Je to neporiadok.

Záverečné slová

Predovšetkým ako programátor jazyka JavaScript som nikdy nebol dobrý v rozložení webových stránok alebo aplikácií. Najmä potom, čo prišla responzívna éra. Mriežka CSS ma však inšpiruje k prehodnoteniu tejto nepolapiteľnej úlohy.

Potreboval som iba ukázať postupné pokyny a príklady rozloženia skutočného sveta vytvoreného pomocou mriežky CSS, aby som mohol začať vyrábať vlastné.

Ale ... nemohol som nájsť jediný online tutoriál, ktorý by to dokázal. Tak som sa rozhodol napísať svoj vlastný a zdieľať ho s vami!

Je to všetko o snahe porozumieť veciam na základe ich zamýšľaného účelu.

Ak trávite čas spoznávaním siete CSS dobre, je to ako podvádzanie.

Je to skoro pre mňa pocit, že som lepší v návrhu rozloženia, než som v skutočnosti.

V tejto chvíli musím povedať, že som závislý na mriežke CSS a odteraz ju budem používať na vytváranie všetkých budúcich rozložení.

Dúfam, že vám tieto jednoduché nápady pomohli zoznámiť sa s CSS Grid.

Pre týždenné freemium…

Môžete ma sledovať na Twitteri pre víkendové darčeky PDF.

Nasledujte ma na Instagrame pre rýchly zásah JavaScriptu.

Môžete ma sledovať na Facebooku, aby ste mohli bezplatne kódovať.

Časovo limitovaná ponuka

Schémy v tomto návode boli priamo ovplyvnené rukopisom!

Vizuálny slovník CSS s 28% zľavou pre stredne čitateľov.

28% ZĽAVA

Iba stredne čitatelia:

Vizuálny slovník CSS

chytiť kópiu

Obsahuje všetky vlastnosti CSS.