Prečo je CSS Grid lepší ako rámec Bootstrap? Rozdiel medzi zastaranými prístupmi a modernými štandardmi. Používanie displeja: trik so stolom

Div # navbar ul (štýl zoznamu: žiadny; zobrazenie: blok; okraj: 0 10px;) div # navbar ul li (plávajúci: vľavo; okraj: 0 1,5 em; písmo: tučné 1 em Arial;)

Super! U nás ide všetko dobre. Ostal už len blok s plagátom a prezentáciou stránky, no skôr ako sa pustíme do ich implementácie, rád by som povedal pár slov o CSS frameworkoch všeobecne.

3. CSS frameworky nevyriešia všetky vaše problémy

Predtým, ako začnete s návrhom rozloženia v rámci CSS, mali by ste zvážiť niektoré z nevýhod týchto systémov. Pri čítaní tohto článku ste si nemohli nevšimnúť, že pravidlá pre tvorbu stránky sú veľmi prísne. Všetko má svoju pevnú veľkosť. Keď zmeníte šírku jedného bloku, musíte zmeniť ďalšie. V každom prípade musíte niečo obetovať. Čo by ste napríklad robili, keby ste mali dizajn 1000px a mriežka 960 vám umožňuje vytvoriť maximálnu šírku 960px... Chcete 1000px! Bez masívnej zmeny v kóde to nie je možné implementovať. Napríklad klient chce širšiu stránku alebo dizajnér nesúhlasí s vašou implementáciou. Ďalší problém je s výškami reproduktorov. Ak majú tri stĺpce rovnakú farbu pozadia (ako máme v päte), tieto stĺpce musia mať rovnakú výšku. Ďalšia významná nevýhoda: použitie ďalších zarážok a vytváranie rámov vedie k zničeniu celého rozloženia. Aby ste pridali, čo je potrebné a nič nezničili, musíte kompenzovať pridané rozmery. Teraz vám ukážem ako. Začneme dokončovať hornú časť.

4. Horná časť

Najprv vyriešme problém s výškou stĺpca - opravme ho. Ďalej vytvorme prázdne divy v jednom a druhom bloku. Budú obsahovať obrázkové alebo textové informácie. Odvtedy nebudeme stanovovať interné marže môžete zlomiť pomer šírky mriežky. Pridajme do p tagov výplň, aby text vyzeral pekne.

V tomto prípade je lepšie vytvoriť triedu pre štýl, nie ID musíme ho aplikovať na viacero blokov. V prípade potreby nám to umožní aj zmenu výšky v 2 krokoch. Takto vyzerajú naše hodiny:

Div.topSection div (okraj: plné 10px # e5e5e6; výška: 280px;) div.topSection div p (okraj: 10px;)

Super! Pozrime sa, čo máme:

Ste pripravení vyplniť? Potom pustite nejaký text do ľavého bloku, ale nepreháňajte to, aby ste neprekročili výšku. V skutočnosti v reálnych projektoch musí dizajnér toto všetko vypočítať (počet znakov, ktoré veľkosť bloku uspokojí); Pred vložením obrázka do správneho bloku sa musíte rozhodnúť o jeho veľkosti, ak ste tak ešte neurobili. Dá sa to urobiť na začiatku procesu návrhu alebo pomocou FireBug. Kliknite na položku Skontrolovať. Kliknite na div, ktorý potrebujeme. Vyberte kartu Rozloženie. Potom sa vám zobrazia všetky potrebné informácie. Pomôže vám nasledujúci obrázok:

Na snímke má plagát rozmery 360x280. Nájdite obrázok a upravte ho:

Img # plagát (šírka: 360px; výška: 280px;)

To je všetko! Šablóna je pripravená. Teraz už len zostáva naplniť ho skutočným obsahom a umiestniť ho online:

5. Poznajte svoje možnosti

Teraz, keď je všetko pripravené, poďme si to zhrnúť. 960 Grid nám umožnil nitovať šablónu za 15 minút. v pohode? Áno! Testovali sme to v IE6, IE7? Nie! Musieť? nie Toto je len začiatok! Takže čo je teraz? Teraz to musíte ukázať zákazníkovi a pozrieť sa na reakciu. Ak mu to vyhovuje, tak mozes zacat testovat, ale ak nie a zakaznik chce nieco komplikovanejsie, tak si musis vsetko napisat od nuly sam. ešte raz to zopakujem. CSS frameworky nevyriešia všetky problémy. Napriek tomu ich tisíce vývojárov používajú ako bežný nástroj na vývoj webu, pretože ako každý nástroj, aj CSS frameworky majú svoje vlastné pole pre široké použitie. V každom prípade, ak požiadavky na dizajn nie sú úplne špecifické (80% času), potom vám použitie 960 Grid môže ušetriť veľa času – a čas sú peniaze!

Kedysi dávno som písal o nezvyčajnej službe, ktorou je AI na tvorbu webu. Súdiac podľa aktuálnych výsledkov dopadli „tak-tak“, najmä vzhľadom na uvedenú cenu. v tomto smere budú efektívnejšie.

Dnes chcem hovoriť o podobnej, ale v podstate úplne inej „technológii“ - CSS Grid! Príspevok pozostáva z niekoľkých častí:

Tento prístup k rozloženiam budov uľahčuje vytváranie dostatočne flexibilných mriežok lokality pomocou CSS. V budúcnosti sa bude s najväčšou pravdepodobnosťou používať všade. Ak tomu dobre rozumiem, je perfektný na rovnaké úlohy ako Flexbox, no na rozdiel od neho dokáže súčasne pracovať v dvojrozmerných rozmeroch (stĺpce a riadky). Nižšie ponúkam preklad článku, ktorý je akýmsi úvodom do témy a obsahuje jednoduché informatívne príklady. Pozor! Autor poznámky vedie bezplatný (!) Kurz na CSS Grid v decembri, ak chcete, pošlite žiadosť na jeho Email.

Aj na internete som našiel užitočné video na túto tému. Možno je pre niekoho jednoduchšie vnímať informácie takto:

Úvod do CSS Grid

Tento rok táto technológia dostala vstavanú podporu v prehliadačoch Chrome, FF, Safari, takže je pravdepodobné, že sa v blízkej budúcnosti stane populárnym nástrojom. Zatiaľ sa však nezabudnite postarať o zastarané a zaostávajúce webové prehliadače.

Najjednoduchšia sieťovina

Sú tu 2 hlavné objekty:

• rodič / obal (obalenie všetkých vnútorných blokov, ktoré ho tvoria);
• deti / položky (samotné položky).

Tu je najjednoduchšia konštrukcia:

Obálka (zobrazenie: mriežka;)

Bezprostredne potom sa však v skutočnosti nič nezmení, keďže formát zobrazenia nie je definovaný. Uvidíte 6 DIV za sebou.

Stĺpce a riadky

Aby bola vaša mriežka dvojrozmerná, musíte zadať parametre riadkov a stĺpcov - použite možnosti grid-template-row a grid-template-colum v tomto poradí:

Wrapper (zobrazenie: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px;)

Keďže existujú tri hodnoty pre stĺpce, vygeneruje sa rovnaký počet, preto sú riadky iba 2. Čísla v pixeloch nastavujú v prvom prípade šírku prvkov (každý 100 pixelov), v druhom prípade výška (50px).

Tu je ďalší príklad, ktorý vám pomôže lepšie pochopiť, ako to funguje:

Wrapper (zobrazenie: mriežka; mriežka-šablóna-stĺpce: 200px 50px 100px; mriežka-šablóna-riadky: 100px 30px;)

Zobrazí sa nasledujúci obrázok:

Umiestnenie a rozmery

Vďaka tejto funkcii získate skutočne veľmi výkonné siete stránok. Povedzme, že máme veľkosť 3x3:

Wrapper (zobrazenie: mriežka; mriežka-šablóna-stĺpce: 100px 100px 100px; grid-template-rows: 100px 100px 100px;)

Ak je v kóde HTML, ako v našom príklade, 6 prvkov DIV (pozri úplne na začiatku), v tomto prípade sa na stránke zobrazia iba 2 riadky, tretí sa dočasne nevyplní. Keď však začneme aplikovať rôzne parametre pre polohu a veľkosti blokov - mriežka-stĺpec grid-row, situácia sa zmení.

Nastavíme štýly jednému z objektov:

Položka 1 (začiatok-stĺpca mriežky: 1; koniec-stĺpca mriežky: 4;)

To znamená, že DIV s triedou item1 začína na prvom riadku stĺpca v mriežke a končí na 4., to znamená, že vypĺňa celý riadok.

V skutočnosti sa teraz niektoré objekty presunuli na posledný riadok, ktorý sme predtým zaregistrovali (3x3). Existuje jednoduchšia možnosť:

Položka 1 (stĺpec mriežky: 1/4;)

Položka1 (začiatok-stĺpca-mriežky: 1; koniec-stĺpca-mriežky: 3;) .položka3 (začiatok-riadka-mriežky: 2; koniec-riadka-mriežky: 4;) .položka4 (začiatok-stĺpca-mriežky: 2; mriežka-koniec stĺpca: 4 ;)

Dáva nám nasledujúci obrázok:

Podarilo sa vám na to prísť? V zásade to nie je ťažké, ale musíte pochopiť, že toto je len základná časť nuancií CSS Grid.

Prototypovanie a rozloženie oblastí s CSS mriežkou

Značkovací kód je nasledujúci (HTML):

Kontajner (display: grid; grid-template-columns: repeat (12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px;)

Ak je v zásade všetko jasné pomocou riadkov, potom so stĺpcami je potrebné objasniť. Tu vo význame mriežka-šablóna-stĺpce vytvorí sa mriežka, ktorá pozostáva z 12 rovnakých stĺpcov (šírka každého = 1/12 z celku) + 5px medzera medzi nimi (mriežka-medzera).

Pridajte oblasti šablóny mriežky

Táto možnosť vám poskytuje ešte väčšiu flexibilitu a úžasné funkcie. Prípadne syntax a formátovanie parametra grid-template-oblasti vyzerá trochu nezvyčajne, ale potom pochopíte, prečo je všetko takto:

Kontajner (zobrazenie: mriežka; mriežka-medzera: 5px; mriežka-šablóna-stĺpce: repeat (12, 1fr); riadky-šablóny mriežky: 50px 350px 50px; oblasti šablóny mriežky: "hhhhhhhhhhhchhh" "mmccccccccccff" "fffff ;)

Je to druh vizuálnej reprezentácie mriežky vášho webu v CSS. Všetky znaky v tomto parametri tvoria 3 riadky a 12 stĺpcov, ako je definované v riadku vyššie. Každé písmeno je zodpovedné za jednu bunku. Názvy v príklade zodpovedajú blokom kódu HTML: hlavička (h), ponuka (m), obsah (c) a päta (f), ale môžete použiť akékoľvek iné variácie.

Priradenie oblastí k šablónam a experimentom

V ďalšom kroku „logicky prepojíte“ symboly kontajnera a prvky DIV:

Hlavička (oblasť mriežky: h;) .menu (oblasť mriežky: m;) .obsah (oblasť mriežky: c;) .päta (oblasť mriežky: f;)

Stránka zobrazí rozloženie formulára:

A teraz začína kúzlo. Poďme si vymeniť nejaké písmená v parametri grid-template-oblasti, napríklad "c" a "m" na miestach:

oblasti mriežky-šablóny: "h h h h h h h h h h" "c c c c c c c c c m m" "f f f f f f f f f f f f f";

Mriežka bude vyzerať inak:

Pridanie citlivosti k tomuto dizajnu vyzerá vo všeobecnosti úžasne. So samotným HTML by ste to neurobili, ale v CSS je možné všetko: ". H h h h h h h h." "c c c c c c c c c c m m" ". f f f f f f f f f f." ;

grid-template-areas: ". h h h h h h h h h." "c c c c c c c c c c m m" ". f f f f f f f f f f.";

Stránka vyzerá takto:

Žiadne skripty alebo HTML - len mágia CSS Grid!

Viac príkladov mriežky a ohybu

Neskôr som v CSS trikoch našiel ďalší článok na túto tému, niektoré z jeho variácií sa vám môžu hodiť. Postupujte podľa odkazov na (logo v bloku kódu vpravo hore), aby ste videli príklad práce na veľkej obrazovke.

Klasické rozloženie webu

Máme hlavičku a pätu v plnej šírke s blokom obsahu medzi nimi a dvoma bočnými panelmi. V prvom prípade, keď sa obrazovka zmenší, všetky objekty zostanú v rovnakých polohách ako predtým.

Ak chcete, aby boli bloky umiestnené pod sebou, potom:

2-stĺpcová mriežka blogu

Povedzme, že máme veľký blok obsahu a bočný panel v strede. Nižšie uvedený kód udrží všetky objekty na mieste pri zmenšení veľkosti stránky.

Druhou technikou je dať im ich umiestnenie jeden po druhom.

Rozloženie prvkov na šírku

Vizuálne príklad pripomína galériu, keď všetky obrázky idú vedľa seba v niekoľkých stĺpcoch. Ako zmenšujete veľkosť, na každom riadku sa ich objaví čoraz menej.

Obrázok vo vnútri článku

Tu je obsah rozdelený na 2 časti, medzi ktorými je blok na celú obrazovku.

Celkom. Vo všeobecnosti som objavil koncept CSS Grid, ktorý, ak mám byť úprimný, bol príjemne ohromený - najmä rámy, kde sa zvažovali oblasti rozloženia s rôznymi písmenami. Samozrejme, toto všetko sú len základy „technológie“, navyše som podrobne nepopisoval každý parameter kódu. V poslednej časti článku sú príklady zložitejšie a mali by byť dôkladne preskúmané. Kombinuje Flex aj Grid. Ak je táto téma zaujímavá, prihláste sa na odber kurzov prvého autora - E-mailové záznamy v pôvodnej prvej alebo druhej poznámke.

Chcete niečo pridať do mriežky CSS? - píšte myšlienky, rady alebo posielajte zaujímavé odkazy.

Tento článok ukazuje, ako táto relatívne nová technológia funguje, funguje, a nielen popis vlastností s príkladmi povrchu.

Samotný článok je responzívnym rozšíreným prekladom CSS Grid Tutorial

Modul CSS Grid bol vyvinutý pracovnou skupinou CSS s cieľom poskytnúť najlepší spôsob vytvárania šablón v CSS. Vo februári 2017 bol uvedený v odporúčaní pre kandidátov a hlavné prehliadače ho začali podporovať v marci 2017.

CSS Grid sa čoskoro stane nevyhnutnou súčasťou nástrojov každého front-endového vývojára. A ak ste jedným z nich, potom sa musíte naučiť CSS Grid – čo sa takmer určite stane nepopierateľnou zručnosťou pre akúkoľvek pozíciu vo vývoji front-endov.

S touto výkonnou funkcionalitou a intuitívnou syntaxou šablóny mriežky nepochybne zmenia spôsob, akým je web vytvorený.

Úvod

CSS Grid je nový model šablóny optimalizovaný pre 2D šablóny. Je to dokonalý model pre šablóny webových stránok, formuláre, galérie a čokoľvek iné, čo si vyžaduje presné a citlivé umiestnenie.

S rozvojom webu v posledných rokoch je navrhovanie šablón webových stránok čoraz náročnejšie. V začiatkoch webu sa HTML tabuľky často používali pre šablóny s viacerými stĺpcami, formuláre a ďalšie. Ale táto metóda má svoje nevýhody. To znamená, že prezentácia musela byť vykonaná na úrovni značiek, takže sa nerozlišovalo medzi prezentáciou a obsahom. V skutočnosti boli tabuľky vytvorené na to, aby obsahovali tabuľkové údaje, nie na vytváranie šablón. A okrem sémantických problémov, šablóny tabuliek nie sú vytvorené pre responzívny dizajn.

Floats nakoniec nahradili šablóny tabuliek ako všeobecne akceptovaný a odporúčaný spôsob vytvárania šablón, pretože nám umožňujú umiestniť prvky bez ohľadu na označenie. Hoci sa táto metóda považovala za výrazné zlepšenie oproti rozloženiu tabuľky, mala aj svoje obmedzenia. Floaty boli primárne navrhnuté pre šablóny dokumentov a neboli vhodné pre zložité šablóny aplikácií, ktoré sú teraz bežné na webe. Plávajúce prvky sa ťažko ovládajú, najmä na zariadeniach a výrezoch rôznych veľkostí. To viedlo k rôznym mriežkovým hackom, ktoré sa stali normou, pričom väčšina z nich vyžadovala dodatočné označenie, ktoré odvádzalo pozornosť od celého konceptu zdieľania obsahu. Pracovná skupina CSS teda hľadala lepšie riešenie.

CSS Grid Model rieši tieto a ďalšie problémy. Umožňuje vám vytvárať pokročilé šablóny za zlomok času, ktorý by ste strávili s flotilami as menším množstvom kódovania.

Ale samozrejme, na to by sa dali použiť rôzne hodnoty, ako napríklad 100px, 7em, 30% atď. Reťazcom môžete tiež priradiť názvy spolu s ich veľkosťou.

mriežka-šablóna-stĺpce: 1fr 1fr 1fr

Rovnako ako vyššie, definuje iba stĺpce v mriežkach.

Vystavuje prestávku. Teda medzery medzi položkami mriežky. Tu používame jednotku dĺžky vw, ktorá je relatívna k šírke výrezu, ale môžeme použiť aj 10px, 1em atď. Vlastnosť Grid-gap je skratka pre grid-row-gap a grid-column-gap vlastnosti.

Druhá časť kódu len priraďuje prvky mriežky rôzne štýly.

#mriežka>

Funkcia Repeat ().

Na opakovanie deklarácií hodnôt veľkosti prvku môžete použiť funkciu repeat (). Napríklad namiesto toho:

Grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

Dáme to:

Grid-template-rows: repeat (5, 1fr);

To výrazne zníži množstvo kódu, ktorý musíte napísať, najmä ak pracujete s veľkými a opakujúcimi sa mriežkami.

Ako vytvoriť šablónu webových stránok pomocou mriežky CSS

Mriežky obsahujú intuitívnu „ASCII grafickú“ syntax, v ktorej môžete virtuálne „vidieť“ šablónu v kóde, vďaka čomu je vytváranie a úprava vašej šablóny veľmi jednoduchá. Dokonca aj veľké zmeny je možné vykonať v priebehu niekoľkých sekúnd. Táto intuitívna syntax tiež pomáha s responzívnym webovým dizajnom. Vytváranie rôznych šablón pre rôzne zariadenia sa pri používaní mriežok stáva celkom triviálnym.

Teraz vytvoríme šablónu webovej stránky, ktorá vyzerá takto:

A tu je kód pre túto šablónu:

Pozrime sa bližšie na náš kód. Označenie HTML vyzerá takto:

A tak to urobíme mriežkový kontajner, takže všetky ostatné položky sa stanú položkami mriežky.

Teraz sa pozrime na grafiku ASCII, o ktorej sme hovorili skôr.

Oblasti šablóny mriežky: „hlavička hlavičky“ „reklamy na navigačný článok“ „päta päta päta“;

Tento kúsok definuje našu šablónu. Len pri pohľade na kód vidíme, že ide o mriežku 3x3 (tri riadky a tri stĺpce). To nám dáva päť oblastí mriežky na deviatich bunkách mriežky, pretože niektoré oblasti mriežky zahŕňajú viacero buniek.

Tiež vidíme, že hlavička zaberá celý prvý riadok troch buniek a suterén zaberá celý spodný riadok, pričom tiež zaberá tri bunky. Navigačná, obsahová a reklamná sekcia spolu zdieľajú priestor v druhom rade, kde každý z týchto prvkov dostane jednu bunku.

Teraz môžeme priradiť každú z týchto oblastí mriežky ku každej položke:

#pageHeader (oblasť mriežky: hlavička;) #pageFooter (oblasť mriežky: päta;) #mainArticle (oblasť mriežky: článok;) #mainNav (oblasť mriežky: navigácia;) #siteAds (oblasť mriežky: reklamy;)

Vlastnosť grid-area je skratka pre vlastnosť, ktorá vám umožňuje umiestniť položky mriežky na mriežku. V našom prípade sa jednoducho odvolávame na názvy, ktoré sme predtým špecifikovali v oblastiach mriežky-šablóny.

Väčšina šablóny už bola dokončená. Zvyšok kódu bude jednoducho odkazovať na rozmery, rozostupy a výšky, všeobecnejšie na dekoratívnu oblasť.

Nasledujúci kód udáva rozmery riadkov a stĺpcov:

Grid-template-rows: 60px 1fr 60px; mriežka-stĺpce-šablóny: 20% 1fr 15%;

Prvý a tretí riadok majú výšku 60 pixelov a druhý riadok zaberá zostávajúce miesto.

Prvý stĺpec je 20 % a tretí je 15 %. Druhý zaberá všetok zostávajúci priestor.

Zmena šablóny

Šablónu môžete zmeniť jednoducho preusporiadaním oblastí mriežky v oblastiach šablóny mriežky.

Takže ak sa zmeníme na toto:

Grid-template-areas: “nav header header” “nav article ads” “nav footer ads”;

V dôsledku toho dostaneme nasledujúcu šablónu:

Možno však budete musieť upraviť veľkosť, ak presuniete menšiu mriežku do väčšej.

Ak chcete napríklad urobiť toto:

Navigácia teraz preberá miesto, kde sa nachádzal obsah, a preto boli rozmery upravené. V opačnom prípade by sme mali úzky obsah a širokú navigáciu. Takže kód teraz vyzerá takto.

Grid-template-areas: “header header header” “article nav ads” / * Predtým existovali “nav article ads” * / “footer footer footer”; grid-template-rows: 60px 1fr 60px; mriežka-stĺpce-šablóny: 1fr 20% 15%; / * Predtým to bolo „20 % 1fr 15 %“* /

Budovanie responzívnej siete

Šablóna mriežky má hodnoty ako auto-fill a auto-fit, ktoré vám umožňujú vytvoriť mriežku s mnohými stopami špecifickej veľkosti, ktoré sa zmestia do kontajnera. To môže znamenať, že mriežka reaguje, čo znamená, že prvky menia svoje pozície pri zmene veľkosti okna prehliadača.

Príklad použitia automatického dopĺňania:

Tu je výsledok:

Kód zodpovedný za to:

Grid-template-columns: repeat (automatické dopĺňanie, minmax (150px, 1fr));

To dáva stĺpcom minimálnu veľkosť 150 pixelov a maximálnu veľkosť zostávajúceho priestoru. Takéto stopy sa budú opakovať toľkokrát, koľkokrát bude potrebné, aby sa zmestili do kontajnera.

Funkcia Repeat () zopakuje definíciu stopy toľkokrát, koľkokrát je zadané prvým parametrom. Použitím automatického dopĺňania sa stopy budú opakovať toľkokrát, kým nenaplnia nádobu.

Veľkosť týchto stôp je špecifikovaná v druhom parametri. V našom prípade používame minmax (150px, 1fr) na označenie, že minimálna veľkosť stĺpca je 150px a maximálna je 1fr.

Automatické prispôsobenie

automatické prispôsobenie funguje takmer rovnako ako automatické dopĺňanie. Jediný rozdiel je v tom, že automatické prispôsobenie zbalí všetky prázdne stopy na konci umiestnenia, zatiaľ čo automatické vyplnenie nie. Najlepším spôsobom je tu demo s porovnaním.

Použitie dvoch malých prvkov mriežky tu pomôže ukázať celý koncept práce. Automatické vypĺňanie ponecháva prázdne stopy na konci v špecifikovaných rozmeroch a automatické prispôsobenie roztiahne prázdnu stopu, čo vedie k vyplneniu koľají natiahnutými prvkami, aby sa vyplnil priestor.

Mriežky s mediálnymi dopytmi

Jednou zo silných stránok mriežok je, že môžete vytvoriť úplne inú šablónu v priebehu niekoľkých sekúnd.

Vďaka tomu sú mriežky ideálne pre mediálne dopyty. Môžeme jednoducho zmeniť priradenie hodnôt v grafike ASCII a výsledok zabaliť do mediálneho dotazu.

Toto je rozloženie troch stĺpcov vo veľkom výreze a na malých zariadeniach sa zmenší na rozloženie s jedným stĺpcom. Tento príklad bude teda vyzerať odlišne v závislosti od veľkosti obrazovky. Každopádne, tu je príslušný kód pre 3-stĺpcový vzor pre široké výrezy.

Oblasti šablóny mriežky: „hlavička hlavičky“ „reklamy na navigačný článok“ „päta päta päta“;

A tu je zodpovedajúci kód pre mobilnú verziu:

Oblasti šablóny mriežky: „hlavička“ „článok“ „reklamy“ „nav“ „päta“;

Takže je to všetko o preradení hodnôt vo vlastnosti grid-template-areas.

V našom prípade sme mobilnú verziu zabalili do mediálneho dopytu, napríklad tu:

@media all and (max-width: 575px) (body (grid-template-areas: “header” “article” “ads” “nav” “footer”); grid-template-rows: 80px 1fr 70px 1fr 70px; grid- šablóna-stĺpce: 1fr ;))

Všimnite si, že sme upravili aj hodnoty v riadkoch mriežky-šablóna-v stĺpcoch mriežky, aby sa zmestili do novej šablóny. Najmä by mal byť iba jeden stĺpec a mal by zaberať všetok voľný priestor. A keďže všetky položky mriežky budú na jednej kôpke, priradíme 5 riadkov a určíme ich výšky.

Kombinácia mriežky s blokom

V závislosti od požiadaviek vašej šablóny vám už nič nebráni zmeniť mobilnú verziu na display: block. Ako tu:

@media all and (max-width: 575px) (body (displej: block;))

Bude to fungovať rovnako ako vo vyššie uvedenom príklade, ale predvolene sa prvky zobrazia v pôvodnom poradí. Vo vyššie uvedenom príklade má mobilná verzia navigáciu pod reklamami, ale ak by sme použili zobrazenie: blokovanie, navigácia by bola vyššia ako reklamy.

Tiež pri použití tejto metódy možno budete musieť pridať nejaké ďalšie vypchávky na kompenzáciu chýbajúcich medzier, ktoré boli zahrnuté vo verzii s mriežkou.

Explicitné a implicitné mriežky

CSS Grid používa koncept explicitnej mriežky a implicitnej mriežky. Toto je kľúčový koncept, na ktorý si musíte dávať pozor pri vytváraní mriežok, inak skončíte s kopou riadkov a stĺpcov, o ktorých ste nikdy nečakali, že budú existovať.

Explicitná mriežka je mriežka, ktorú definujete v riadkoch mriežky-šablóna-, stĺpcoch mriežky-šablóny a oblasti mriežky-šablóny.

Stále však môžete mať položky, ktoré nezapadajú do vašej „explicitne“ definovanej mriežky. Napríklad ste definovali mriežku, do ktorej sa zmestí iba šesť položiek, ale samotný kontajner má v skutočnosti deväť položiek. Do explicitnej mriežky sa zmestí iba šesť položiek a tri zostanú. A tu začínajú implicitné mriežky.

Implicitné mriežky sú automaticky generované kontajnerom mriežky vždy, keď sú položky mriežky umiestnené mimo explicitnej mriežky. Kontajner generuje implicitné mriežkové stopy pridaním implicitných čiar do mriežky. Tieto čiary spolu s explicitnými mriežkami tvoria implicitné. Tu je príklad:

V tomto príklade explicitne definujeme dva riadky a dva stĺpce, aby sa zmestili štyri položky mriežky. Existuje však šesť položiek mriežky, takže bola vytvorená implicitná mriežka na umiestnenie dvoch ďalších položiek.

A to je veľmi dobre, ak by nevznikla implicitná mriežka, dva extra prvky by vytvorili úplný neporiadok mriežky.

Nastavenie veľkosti stopy pre implicitné mriežky

Možno ste si všimli, že rad navyše nie je taký vysoký ako predchádzajúce dva. Je to preto, že sme nastavili výšku riadku vo vlastnosti grid-template-rows, ale vzťahuje sa len na explicitné mriežky. Výška riadkov na implicitných mriežkach musí byť nastavená pomocou vlastnosti grid-auto-rows. Ale keďže sme to neurobili, ukázalo sa, že implicitný riadok používa veľkosť automatickej stopy, ktorá je založená na obsahu. Takto sa nachádzajú vlastnosti veľkosti stopy:

Vo všeobecnosti to vyzerá takto:

Explicitná mriežka používa riadky mriežky-šablóny a stĺpce mriežky

Implicitná mriežka využíva automatické riadky mriežky a automatické stĺpce mriežky

V tomto prípade nemusíme špecifikovať koncové hodnoty na prvom prvku, pretože pokrýva iba jednu stopu. To isté možno povedať o druhej položke mriežky. V predvolenom nastavení, ak nezadáte koncový riadok, prvok bude pokrývať iba jednu stopu.

V skutočnosti sme nepotrebovali špecifikovať žiadne umiestnenie pre prvý prvok mriežky, pretože je v určitej polohe, potom by to tak bolo. Ak by sme však nešpecifikovali umiestnenie pre druhý prvok, potom by sa nachádzal hneď za prvým prvkom a zaberal by iba 1 stopu.

Pomenovanie čiar mriežky

Pre ľahšiu orientáciu môžete tiež pomenovať čiary mriežky. Môžete to urobiť nastavením vlastností grid-template-rows a grid-template-columns, napríklad takto:

#grid (zobrazenie: grid; / * Nastavte stopy a pomenujte riadky * / grid-template-rows: 50px 1fr 80px; grid-template-columns: 120px 1fr 80px; grid-gap: 5px; height: 90vh;) . .. / * Teraz sa pozrite na tieto pomenované riadky * / # položka2 (začiatok-riadka-mriežky: začiatok-riadok3; začiatok-stĺpca-mriežky: začiatok-stĺpec2; koniec-riadku-mriežky: koniec-radu3; koniec-stĺpca-mriežky : col3 -koniec ;)

Pomenované riadky môžu byť explicitné alebo implicitné. Implicitné pomenované čiary sa vytvoria vždy, keď vytvoríte pomenované oblasti mriežky pomocou oblastí šablóny mriežky.

Názov je prevzatý z oblasti mriežky s pridaním -start a -end v závislosti od toho, či ide o začiatok alebo koniec riadku.

Tým sa vytvoria štyri implicitné riadky pre každú pomenovanú oblasť hlavičky mriežky. Dve sú pomenované header-start a column-start v pomenovanej oblasti mriežky a dve sú pomenované ako header-end.

Pomenované oblasti mriežky

Oblasti mriežky môžu byť pomenované vo vlastnosti grid-template-areas samotného kontajnera mriežky. Toto sme robili predtým, keď sme vytvorili šablónu lokality. Ak ho chcete obnoviť do pamäte, vyzerá to takto:

#grid (zobrazenie: mriežka; / * Premenovanie oblasti mriežky * / oblasti šablóny mriežky: „aa“ „bc“;…)… / * Teraz použite každú položku mriežky na pomenovanú oblasť mriežky * / #a (mriežka- oblasť: a;) #b (oblasť mriežky: b;) #c (oblasť mriežky: c;)

Môžete zadať prázdnu bunku pomocou bodky (.) alebo série bodiek bez medzier. Napríklad:

Oblasti šablóny mriežky: „a a“ „. b"; Alebo oblasti šablóny mriežky: „hlavička hlavičky“ „... obsah“;

Vlastnosti umiestnenia mriežky

Existujú tri krátke vlastnosti, ktoré môžete použiť namiesto dlhých vlastností na umiestnenie mriežok uvedených v príkladoch vyššie. Tam sa všetky hodia.

grid-area – táto vlastnosť je skratka pre:

grid-column – Táto vlastnosť je skratka pre:

grid-column-start - označuje, ktorá čiara stĺpca položky mriežky je štartovacou čiarou a koľko stôp sa tiahne.

grid-column-end - označuje, na ktorých riadkoch stĺpca položka mriežky končí a na koľko stôp sa tiahne.

grid-row – táto vlastnosť je skratka pre:

grid-row-start – označuje, ktorou riadkovou líniou prvok mriežky začína a na koľko stôp sa tiahne.

grid-row-end - označuje, ktorá riadková čiara bude pre prvok posledná a o koľko stôp sa roztiahne.

Môžete tiež použiť vlastnosť grid-auto-flow, ktorá bola spomenutá v predchádzajúcej kapitole. Špecifikuje, ako sa majú automaticky rozvrhnuté položky mriežky zmestiť do mriežky. Automaticky umiestnené položky sú položky, ktoré nie sú explicitne umiestnené pomocou žiadnej z vyššie uvedených vlastností.

Vytvorte vnorenú mriežku

Prvky mriežky sa môžu samy stať mriežkami v mriežke CSS. To znamená, že položku mriežky môžete vnoriť do inej položky mriežky, čím vytvoríte vnorenú mriežku.

Na vytvorenie takejto vnorenej mriežky stačí použiť display: grid (alebo display: inline-grid) na položku mriežky a stane sa z nej mriežka sama. Na vytvorenie podmriežky môžete použiť aj display: subgrid. , Ako sa to stane.

Dedičnosť

Väčšina vlastností mriežky sa nededí, čo znamená, že vaša vnorená mriežka nezdedí hodnoty svojej nadradenej mriežky. To vám umožňuje vykonávať zmeny v rodičovskej mriežke bez neúmyselného ovplyvnenia vnorenej mriežky.

Napríklad ste odhalili stĺpec grid-auto-flow: v nadradenej mriežke, ale nevystavili ste vlastnosť vo vnorenej mriežke. V tomto prípade bude vnorená mriežka nastavená na riadok, pretože to je pôvodná hodnota tejto vlastnosti.

Všimnite si, že v nadradenej mriežke čísla idú v stĺpcoch zvislo nadol namiesto vodorovne pozdĺž riadku, ale vnorená mriežka ide stále vodorovne pozdĺž riadku.

Podmriežky

Modul CSS Grid nastavuje hodnotu podmriežky pre vlastnosť display. Zatiaľ ho však nepodporujú všetky prehliadače. Táto hodnota by mala byť celkom užitočná.

Subgrid je vnorená mriežka, ale so zobrazením: subgrid. To z neho robí špeciálny typ mriežkového kontajnera, ktorý sa podieľa na dimenzovaní mriežky nadradeného mriežkového kontajnera. Inými slovami, obsah podmriežky ovplyvňuje veľkosť nadradenej mriežky, čo umožňuje usporiadanie obsahu cez dve mriežky. Nižšie je uvedený príklad, kde môže byť táto vlastnosť užitočná.

Tu je zoznam položiek:

• Názov:
• adresa:
• Telefón:

Tu je CSS, kde zoznam je mriežka a položky zoznamu sú podmriežky.

Ul (zobrazenie: mriežka; mriežka: automatický tok / automatický 1fr;) li (zobrazenie: vedľajšia mriežka; stĺpec mriežky: rozpätie 2; okraj: 0,5 em; okraj: plný; výplň: 0,5 em;) štítok (stĺpec mriežky: 1;) vstup (stĺpec mriežky: 2;)

Tento príklad by zobrazil označenie a vstup v riadku s okrajom okolo každej položky zoznamu. Vystavenie každého prvku zoznamu do podmriežky znamená, že by nemali nastať žiadne problémy so zarovnávaním vstupných formulárov, pretože každý prvok zoznamu sa bude podieľať na vytváraní veľkosti nadradenej siete.

Formuláre s automatickým umiestnením

Explicitné mriežky môžete použiť ako výhodu pri vytváraní tvarov alebo iných zhlukov položiek, ktoré vyžadujú zarovnanie mriežky. Môžete napríklad použiť explicitné mriežky na vytvorenie tvaru, ako je tento:

A keď do označenia pridáte prvky formulára, explicitná mriežka pridá čiary, aby sa zmestili. Na vytvorenie tvaru navrchu teda potrebujeme toto označenie.

Na správne usporiadanie všetkého nie je potrebné ďalšie označenie. A tiež nie je potrebné pridávať ďalšie triedy pre prvky formulára. Pridávame iba jednu triedu pre

Môžete automaticky pridať nové prvky formulára a automaticky sa prispôsobia ostatným, keď budú umiestnené v explicitnej mriežke.

Je to možné, keďže sme zo samotného formulára urobili mriežku (keďže myForm sa aplikuje s display: grid). Potom sme určili, že štítky idú do jedného stĺpca a ovládacie prvky do iného.

Tu je ďalší príklad, tentoraz s ešte viacerými prvkami:

Keď sa podsiete v prehliadačoch rozšíria, bude možné zarovnať prvky formulára, ktoré nie sú priamymi potomkami.