Ce este o grilă flexibilă în aspect receptiv? De ce este CSS Grid mai bun decât cadrul Bootstrap? Zone de grilă denumite

De la autor: articol din conceptul de serie de layout Grilă CSS. În lecțiile anterioare, am învățat sintaxa grilei, am învățat mai multe moduri de a aranja elementele pe o pagină și ne-am luat la revedere de la unele obiceiuri vechi. În acest tutorial vom pune în practică toate cunoștințele noastre pentru a crea un aspect receptiv.

Interogări media

Să luăm demonstrația din lecția anterioară.

Pagina este formată din două grile: grila principală și una imbricată în interiorul unuia dintre elemente. Ne putem controla rețelele folosind interogări media. Aceasta înseamnă că putem reconstrui complet aspectul pentru a se potrivi cu o lățime diferită a ecranului.

Vom începe prin a copia declarația primei grile. Să împachetăm duplicatul într-o interogare media folosind tehnica mobile-first. Am luat în mod arbitrar 500px ca punct de tranziție.

Grid-1 ( /* stiluri de grilă */ ) ecran numai @media și (lățime minimă: 500 px) ( .grid-1 ( /* stiluri de grilă */ ) )

Acum ne vom schimba grila în primul anunț pentru a pune totul într-o coloană. Setăm o coloană folosind proprietatea grid-template-columns. Verificați dacă cele patru rânduri ale noastre sunt setate folosind proprietatea grid-template-rows și potriviți aspectul folosind proprietatea grid-template-areas:

Grid-1 ( afișare: grilă; lățime: 100%; marjă: 0 automat; grid-template-colons: 1fr; grid-template-rows: 80px automat auto 80px; grid-gap: 10px; grid-template-zone: " antet" "principal" "bara laterală" "subsol"; )

Grilă - 1 ( display:grilă; latime: 100%; marja: 0 auto; grilă - șablon - coloane : 1fr ; grilă - șablon - rânduri : 80px auto auto 80px ; grilă - decalaj: 10px; grilă - șablon - zone: "header" "principal" "bara laterala" "subsol" ;

Pentru a se potrivi pe ecrane mici, setăm grid-gap-ul la 10px în mod implicit. Asta este ceea ce avem. De asemenea, ar trebui să observați că ne schimbăm proprietăți de umpluturăși dimensiunea fontului în elementele div .grid-1 folosind interogări media.

Grila noastră imbricată

Codul de mai sus modifică aspectul nostru principal. Cu toate acestea, mai avem o grilă imbricată care refuză cu încăpățânare să scape de cele două coloane ale sale pe orice ecran. Pentru a remedia acest lucru, vom face exact același lucru, dar vom lua un alt punct de tranziție folosind metoda conținutului întâi:

Element-2 ( /* stiluri de grilă */ ) Ecran numai @media și (lățime minimă: 600 px) ( .item-2 ( /* stiluri de grilă */ ) )

Dacă ar fi să refacem demonstrația de completare automată și să schimbăm lățimea coloanei la minmax(9em, 1fr), grila ar încerca să se potrivească cu cât mai multe piese cu lățime de 9em și apoi le-ar extinde la 1fr până când întregul container este plin:

Dezavantaj: grila va recalcula traseele numai după o repornire, și nu atunci când lățimea ferestrei se schimbă. Încercați să restrângeți fereastra browserului și să reîmprospătați pagina. Pentru a modifica valorile, puteți conecta interogări media, dar acestea nu funcționează bine cu modificarea lățimii ferestrei browser.

Concluzie

Să rezumam toate cele de mai sus într-o listă:

Interogările media ne permit să reconstruim complet grila prin modificarea proprietății grid-template-zone (și altele) pentru diferite scenarii.

Proprietatea de tranziție nu are niciun efect asupra aspectului grilei.

Bun pentru umplerea unui recipient cu plasă cuvânt cheie auto-umplere

Funcția minmax() este un plus excelent pentru completarea automată, dar nu ne oferă o adaptabilitate reală.

Acum sunteți gata să lucrați cu ochiuri! Rămâneți la curent pentru mai multe articole CSS Grid, exerciții practice și soluții la problemele comune ale grilei.

Am observat tehnica Grids acum aproximativ un an. Apoi această tehnică, după un studiu foarte superficial, mi s-a părut inutilă și foarte experimentală; am fost respins de faptul că pentru implementări era necesar să se creeze un marcaj suplimentar. Dar acum devine dificil să nu observi numărul de site-uri web construite pe grilă, precum și numărul de articole și tutoriale despre acesta. Datorită acestora din urmă, a devenit mult mai ușor să studiezi și să înțelegi principiile și conceptele și să tragi concluzii mai mult sau mai puțin reale. Concluzia mea un an mai târziu este: „Este simplu și solutie utila care a fost creat vreodată pentru aspectul paginilor web, fiecare web designer care se respectă ar trebui să știe.”

Oricine a lucrat vreodată cu o grilă știe ce este o grilă. editori grafici (Photoshop, Fireworks, Gimp etc.)și, desigur, a apreciat necesitatea acestuia atunci când a creat orice design. Dar cum se implementează o Grilă pe web? De fapt Tabular aspectul a fost un design real de pagină web cu o Grilă, fără îndoială foarte convenabil. Dar nu și utilizarea intenționată a elementelor masa a fost îngrozitor.
Din fericire, popularitatea enormă a standardelor web a crescut și continuă să crească anul trecut, precum și suportul lor în browserele moderne, ne-au oferit posibilitatea de a crea pagini multifuncționale cu foarte puține markupuri logice. Acest aspect a fost numit bloc. Dar de asemenea bloc layout-ul s-a dovedit a fi partea slabă. Atunci când creați pagini cu un set imens de elemente de diferite dimensiuni și semnificații, marcarea unor astfel de pagini a devenit o sarcină foarte dificilă și, dacă mai multe persoane lucrează la marcaj, o astfel de muncă poate deveni un coșmar.
Și apoi tehnica folosind Grid a venit în ajutor. Această tehnică este un hibrid între blocȘi Tabular aspect. Folosind-o ne dă:

• viteză și ușurință de dezvoltare
• libertatea de poziționare
• proporționalitatea elementelor paginii și plasarea acestora

Prețul pentru toate acestea este doar un mic markup suplimentar. Cred că în zilele noastre, când costul ceasului unei persoane este mult mai scump decât hardware-ul și productivitatea, nu este greu de ghicit în ce direcție se înclină cântarul.

Ce este aspectul cu Grid? În primul rând, este un concept. Un concept care include multe aspecte de design și foarte puține reguli pentru implementarea lui. Acest lucru oferă libertate deplină și nicio standardizare în execuția sa. Voi spune și mai multe - aceeași Grid poate fi implementată de cei mai mulți căi diferite. Dacă ați citit deja despre Grilă, poate ați observat că fiecare autor pleacă dintr-un unghi nou, intrând adânc în detalii, aceasta este, ca să spunem ușor, confuz. Din fericire, au început să apară Sisteme Grid - biblioteci CSSși pentru lucrul cu Grid. Și folosind exemplul lor, poți stăpâni foarte repede principii de baza această tehnică.

Cred că nu are sens să scrieți despre toate aspectele Grid-ului; puteți găsi cu ușurință informații despre aceasta pe Internet. Vă sugerez să vă creați propriul simplu Sistem grilă.

Mai întâi trebuie să înțelegeți că grila constă din coloane și spații între ele. Există trei valori principale - lățimea grilei, lățimea coloanei și lățimea spațiului dintre coloane. Lățimea coloanelor depinde de numărul lor.

Să încercăm să facem o grilă de 950 de pixeli lățime cu 16 coloane cu spațiere de 10 pixeli, deci o coloană ar trebui să aibă o lățime de 50 de pixeli. După ce am înțeles toate valorile, deschidem orice editor grafic cunoscut de noi și creăm un layout. De asemenea, puteți adăuga padding la Grid din stânga și din dreapta, să zicem 20 de pixeli fiecare, iar acest lucru va avea ca rezultat un aspect cu o lățime de 990 de pixeli. Puteți vedea exemplul meu.

Acum putem începe să ne creăm biblioteca. La fel ca majoritatea bibliotecilor CSS, a noastră are nevoie de o resetare globală, sugerez Resetarea CSS a lui Eric Mayer, păstrând resetare.css hai sa cream grid.css la care putem adăuga imediat o metodă de curățare a containerelor care conțin blocuri plutitoare – Clear Fix. Primul lucru de care avem nevoie este o regulă pentru un container care va conține toate coloanele noastre. Lățimea fiecărui container este egală cu lățimea grilei noastre.

.container(
marja: 0 auto;
latime: 950px;
}

Acum putem adăuga o regulă pentru coloanele noastre, care conține lățimea și umplutura. Indentarea acționează ca un gol (jgheab)între coloane.

.coloană(
plutește la stânga;
margine-dreapta: 10px;
preaplin: ascuns;
latime: 50px;
}

Ultima coloană nu are nevoie de indentare; pentru a face acest lucru, să adăugăm și o regulă pentru ea:

Containerele noastre conțin coloane, coloanele sunt blocuri plutitoare, așa că trebuie curățate. Pentru a evita .clearfix inutil în markup, puteți aplica această regulă containerelor:

.clearfix:după, .container:dupa{
continut: ".";
afisare: bloc;
inaltime: 0;
clar: ambele;
vizibilitate: ascuns;
}

clearfix, .container(afisare: inline-block; )

/* Se ascunde din IE-mac \*/
*html.clearfix, *html.container(înălțime: 1%;)
.clearfix, .container(afisare: bloc;)
/* Încheiați ascunderea din IE-mac */

Acum putem începe cu coloanele noastre. Coloanele pot avea două sau trei lățime și așa mai departe. Pentru a face acest lucru, le putem aplica următoarele reguli:

.span-1 ( lățime: 50px; )
.span-2 (lățime: 110px; )
.span-3 (lățime: 170px; )
.span-4 (lățime: 230px; )
.span-5 (lățime: 290px; )
.span-6 (lățime: 350px; )
.span-7 (lățime: 410px; )
.span-8 (lățime: 470px; )
.span-9 (lățime: 530px; )
.span-10 (lățime: 590px; )
.span-11 (lățime: 650px; )
.span-12 (lățime: 710px; )
.span-13 (lățime: 770px; )
.span-14 (lățime: 830px; )
.span-15 (lățime: 890px; )
.span-16 ( lățime: 950 px; margine-dreapta: 0; )

În principiu, acesta este tot ceea ce este necesar pentru implementările Grid; puteți adăuga, de asemenea, un wrapper și o clasă pentru vizualizarea Grid-ului cu un aspect. Să creăm main.css si adauga la el:

.wrapper(
marja: 0 auto;
latime: 990px;
}
.acoperire(
fundal: url transparent(overlay.png) repetare-y derulare sus, stânga;
}

Iată cum ar putea arăta aspectul:

Cred că este suficient pentru început.
Puteți vedea exemplul meu

Am observat tehnica Grids acum aproximativ un an. Apoi această tehnică, după un studiu foarte superficial, mi s-a părut inutilă și foarte experimentală; am fost respins de faptul că pentru implementări era necesar să se creeze un marcaj suplimentar. Dar acum devine dificil să nu observi numărul de site-uri web construite pe grilă, precum și numărul de articole și tutoriale despre acesta. Datorită acestora din urmă, a devenit mult mai ușor să studiezi și să înțelegi principiile și conceptele și să tragi concluzii mai mult sau mai puțin reale. Concluzia mea un an mai târziu este următoarea: „Orice web designer care se respectă ar trebui să cunoască această soluție simplă și utilă care a fost creată vreodată pentru aspectul paginilor web.”

Oricine a lucrat vreodată cu editori grafici știe ce este o grilă. (Photoshop, Fireworks, Gimp etc.)și, desigur, a apreciat necesitatea acestuia atunci când a creat orice design. Dar cum se implementează o Grilă pe web? De fapt Tabular aspectul a fost un design real de pagină web cu o Grilă, fără îndoială foarte convenabil. Dar nu și utilizarea intenționată a elementelor masa a fost îngrozitor.
Din fericire, popularitatea enormă a standardelor web, care a crescut și continuă să crească în ultimii ani, precum și suportul acestora în browserele moderne, ne-a oferit oportunitatea de a crea pagini bogat funcționale, cu un marcaj logic foarte mic. Acest aspect a fost numit bloc. Dar de asemenea bloc layout-ul s-a dovedit a fi un punct slab. Atunci când creați pagini cu un set imens de elemente de diferite dimensiuni și semnificații, marcarea unor astfel de pagini a devenit o sarcină foarte dificilă și, dacă mai multe persoane lucrează la marcaj, o astfel de muncă poate deveni un coșmar.
Și apoi tehnica folosind Grid a venit în ajutor. Această tehnică este un hibrid între blocȘi Tabular aspect. Folosind-o ne dă:

• viteză și ușurință de dezvoltare
• libertatea de poziționare
• proporționalitatea elementelor paginii și plasarea acestora

Prețul pentru toate acestea este doar un mic markup suplimentar. Cred că în zilele noastre, când costul ceasului unei persoane este mult mai scump decât hardware-ul și productivitatea, nu este greu de ghicit în ce direcție se înclină cântarul.

Ce este aspectul cu Grid? În primul rând, este un concept. Un concept care include multe aspecte de design și foarte puține reguli pentru implementarea lui. Acest lucru oferă libertate deplină și nicio standardizare în execuția sa. Voi spune și mai multe - aceeași grilă poate fi implementată într-o varietate de moduri diferite. Dacă ați citit deja despre Grilă, poate ați observat că fiecare autor pleacă dintr-un unghi nou, intrând adânc în detalii, aceasta este, ca să spunem ușor, confuz. Din fericire, au început să apară Sisteme Grid- Biblioteci CSS pentru lucrul cu Grid. Și folosind exemplul lor, puteți stăpâni foarte rapid principiile de bază ale acestei tehnici.

Cred că nu are sens să scrieți despre toate aspectele Grid-ului; puteți găsi cu ușurință informații despre aceasta pe Internet. Vă sugerez să vă creați propriul simplu Sistem grilă.

Mai întâi trebuie să înțelegeți că grila constă din coloane și spații între ele. Există trei valori principale - lățimea grilei, lățimea coloanei și lățimea spațiului dintre coloane. Lățimea coloanelor depinde de numărul lor.

Să încercăm să facem o grilă de 950 de pixeli lățime cu 16 coloane cu spațiere de 10 pixeli, deci o coloană ar trebui să aibă o lățime de 50 de pixeli. După ce am înțeles toate valorile, deschidem orice editor grafic cunoscut de noi și creăm un layout. De asemenea, puteți adăuga padding la Grid din stânga și din dreapta, să zicem 20 de pixeli fiecare, iar acest lucru va avea ca rezultat un aspect cu o lățime de 990 de pixeli. Puteți vedea exemplul meu.

Acum putem începe să ne creăm biblioteca. La fel ca majoritatea bibliotecilor CSS, a noastră are nevoie de o resetare globală, sugerez Resetarea CSS a lui Eric Mayer, păstrând resetare.css hai sa cream grid.css la care putem adăuga imediat o metodă de curățare a containerelor care conțin blocuri plutitoare – Clear Fix. Primul lucru de care avem nevoie este o regulă pentru un container care va conține toate coloanele noastre. Lățimea fiecărui container este egală cu lățimea grilei noastre.

.container(
marja: 0 auto;
latime: 950px;
}

Acum putem adăuga o regulă pentru coloanele noastre, care conține lățimea și umplutura. Indentarea acționează ca un gol (jgheab)între coloane.

.coloană(
plutește la stânga;
margine-dreapta: 10px;
preaplin: ascuns;
latime: 50px;
}

Ultima coloană nu are nevoie de indentare; pentru a face acest lucru, să adăugăm și o regulă pentru ea:

Containerele noastre conțin coloane, coloanele sunt blocuri plutitoare, așa că trebuie curățate. Pentru a evita .clearfix inutil în markup, puteți aplica această regulă containerelor:

.clearfix:după, .container:dupa{
continut: ".";
afisare: bloc;
inaltime: 0;
clar: ambele;
vizibilitate: ascuns;
}

clearfix, .container(afisare: inline-block; )

/* Se ascunde din IE-mac \*/
*html.clearfix, *html.container(înălțime: 1%;)
.clearfix, .container(afisare: bloc;)
/* Încheiați ascunderea din IE-mac */

Acum putem începe cu coloanele noastre. Coloanele pot avea două sau trei lățime și așa mai departe. Pentru a face acest lucru, le putem aplica următoarele reguli:

.span-1 ( lățime: 50px; )
.span-2 (lățime: 110px; )
.span-3 (lățime: 170px; )
.span-4 (lățime: 230px; )
.span-5 (lățime: 290px; )
.span-6 (lățime: 350px; )
.span-7 (lățime: 410px; )
.span-8 (lățime: 470px; )
.span-9 (lățime: 530px; )
.span-10 (lățime: 590px; )
.span-11 (lățime: 650px; )
.span-12 (lățime: 710px; )
.span-13 (lățime: 770px; )
.span-14 (lățime: 830px; )
.span-15 (lățime: 890px; )
.span-16 ( lățime: 950 px; margine-dreapta: 0; )

În principiu, acesta este tot ceea ce este necesar pentru implementările Grid; puteți adăuga, de asemenea, un wrapper și o clasă pentru vizualizarea Grid-ului cu un aspect. Să creăm main.css si adauga la el:

.wrapper(
marja: 0 auto;
latime: 990px;
}
.acoperire(
fundal: url transparent(overlay.png) repetare-y derulare sus, stânga;
}

Iată cum ar putea arăta aspectul:

Cred că este suficient pentru început.
Puteți vedea exemplul meu

În special pentru utilizatorii site-ului, oferim o lecție practică despre utilizarea sistemului 960 Grid. Imaginați-vă că ni s-a dat un design pentru aspect. În primul rând, trebuie să schițăm un plan pentru implementarea structurii site-ului și abia apoi să trecem direct la cod. După ce ați studiat acest articol, veți putea gestiona orice aspect clasic în cel mai scurt timp posibil și culoarea naturală a părului timp de mulți ani (fără păr gri). Deci, iată designul nostru:

1. Creați o plasă

După cum știți deja, sistemul 960 Grid utilizează o gamă întreagă de clase și este disponibil în mai multe variante (versiuni cu 12 coloane și 16 coloane). Containerul principal, indiferent de numărul de coloane, va avea întotdeauna o lățime de 960 px. Pentru acest design vom alege un sistem cu 12 coloane. Fiecare bloc din sistemul 960 Grid are marginea(marja) 0 10px. Acest lucru ne garantează o umplutură uniformă, proporțională de 20px. Pentru cei care sunt confuzi de dimensiunea de 960px, vă sfătuiesc să aruncați o privire la această diagramă. Această dimensiune este optim pentru marea majoritate a rezoluțiilor monitorului. Deci, avem capacitatea de a crea blocuri de această lățime:

• 140px
• 220px
• 300px
• 380px
• 460px
• 540px
• 620px
• 700px
• 780px
• 860px
• 940px

Fiecare dimensiune are propria sa clasă, al cărei nume se bazează pe schema grid_X, unde X este numărul de coloane. Dacă aveți nevoie de un bloc de 960 px, atunci ar trebui să selectați clasa grid_12. Pentru a activa sistemul 960 Grid, trebuie container părinte setați clasa container_12 sau container 16. Mai jos este mic exemplu pagina formata din 3 blocuri. Lățimea primului este egală cu lățimea de 960 px, restul de 2 sunt la jumătate mai mari:

Amintiți-vă că atunci când umpleți un rând cu blocuri cu clasa grid_X, asigurați-vă că în total acestea însumează nu mai mult de 12. De exemplu, așa cum avem - două blocuri grid_6 + grid_6 = 12. Mai puțin este posibil: 6, 4 , 2 etc. d. Acum că am trecut peste principiile de bază, putem începe exercițiul practic:

2. Creați o machetă

Să încercăm să construim o diagramă cu ceea ce trebuie să inventăm. În primul rând, avem nevoie de 2 blocuri de 960px. Unul pentru logo, celălalt pentru navigare. Urmează 2 blocuri (pe o linie), pentru o prezentare de poster și site, un bloc separator (pe toată lățimea), 4 coloane (pe o linie), din nou un bloc separator și un subsol. Ceva de genul:

Cred că după ce ai văzut imaginea știi deja de ce curs avem nevoie. Încercați-le singur, apoi aruncați o privire la codul de mai jos pentru a vedea dacă gândiți corect:

Amintiți-vă că la sfârșitul fiecărei linii trebuie să introducem

pentru afișare normală în toate browserele. Nu uitați să includeți și 960 Grid CSS pe pagina dvs. în secțiunea de cap.

Deci, scheletul este gata, așa că este timpul să începem decorarea. Setați înălțimea și culoare de fundal separatoare de blocuri. Înălțimea blocului de meniu va depinde de meniul în sine. De asemenea, nu uitați să adăugați sigla dvs.:

Div.spacer (culoare fundal: #8FC73E; înălțime: 1em; ) div#navbar (culoare fundal: #8FC73E; umplutură: 10px 0; )

Iată ce ar trebui să obținem:

Nu ne interesează deloc informații în acest moment, așa că puteți introduce conținut de aici în coloanele centrale această pagină. Înainte de a începe top parte, hai să avem grijă de cel de jos. În designul nostru, fundalul subsolului este colorat culoare gri. Pe acest moment nu putem implementa acest lucru deoarece, dacă vă amintiți, există o indentație între blocuri care nu ne va permite să pictăm complet peste această zonă. Pentru a rezolva această problemă, să mutăm 3 blocuri legate de subsol în blocuri separate cu id = footer. Încă un detaliu: atunci când folosim clase în cadrul claselor, ar fi bine să setăm valorile alfa (pentru a indica care bloc va fi primul și omega - pentru ultimul):

Div#footer (culoare de fundal: #e5e5e6; )

Perfect! Subsolul nostru are acum o culoare de fundal. Adăugați ceva text și să trecem la blocul de navigare. Conform tuturor legilor principii moderne layout, navigarea este o listă nenumerotată. Adăugați următorul cod și stil:

• Articole
• Subiecte
• Despre
• Editori
• a lua legatura