Introducere în CSS Grid Layout. Ce este o grilă flexibilă în aspect receptiv? Poziționarea elementelor într-o grilă

Acest articol arată cum acest comparativ tehnologie nouă, funcționează, și nu doar o descriere a proprietăților cu exemple superficiale.

Articolul în sine este o traducere augmentată receptivă a tutorialului CSS Grid

Modulul CSS Grid a fost dezvoltat de Grupul de lucru CSS pentru a oferi cea mai bună modalitate de a crea șabloane în CSS. A fost inclus în Recomandarea Candidaților în februarie 2017, iar browserele majore au început să o susțină în martie 2017.

Grilă CSS va deveni în curând o parte integrantă a setului de instrumente al oricărui dezvoltator front-end. Și dacă ești unul dintre ei, atunci va trebui să înveți CSS Grid — care aproape sigur va fi o abilitate nenegociabilă pentru orice poziție de dezvoltare front-end.

Cu această funcționalitate puternică și sintaxă intuitivă, șabloanele de grilă vor schimba, fără îndoială, modul în care este construit web-ul.

Introducere

Grila CSS este model noușablon, optimizat pentru șabloane bidimensionale. Acesta este un model ideal pentru șabloane de site-uri web, formulare, galerii și orice necesită o poziționare precisă și receptivă.

Odată cu dezvoltarea web-ului în anul trecut, dezvoltarea șabloanelor de site-uri web a devenit din ce în ce mai dificilă. ÎN primii ani web, Tabelele HTML adesea folosit pentru șabloane cu mai multe coloane, formulare etc. Dar această metodă are dezavantajele ei. Aceasta înseamnă că prezentarea trebuia făcută la nivel de marcare, deci nu a existat nicio distincție între prezentare și conținut. De fapt, tabelele au fost create pentru a conține date tabulare, nu pentru a crea șabloane. Și fără atingere probleme semantice, șabloanele de tabel nu sunt create pentru design adaptabil.

Floats a înlocuit în cele din urmă șabloanele de tabel ca metodă universal acceptată și recomandată pentru crearea de șabloane, deoarece ne permite să poziționăm elementele independent de aspect. Cu toate acestea, până acum această metodă a fost considerată o îmbunătățire semnificativă a fundalului aspect tabelar, avea și limitările sale. Float-urile au fost concepute în principal pentru șabloane de documente și nu erau potrivite pentru șabloanele de aplicații complexe care sunt acum comune pe web. Elementele plutitoare sunt greu de controlat, mai ales pe dispozitive și ferestre marimi diferite. Acest lucru a dus la diferite hack-uri asemănătoare grilei care au devenit norma, majoritatea necesitând un marcaj suplimentar care a diminuat întregul concept de separare a conținutului. Deci, grupul de lucru CSS căuta o soluție mai bună.

Modelul CSS Grid abordează aceste probleme și multe altele. Vă permite să creați șabloane avansate într-o fracțiune din timpul pe care l-ați petrece cu ele cu flote și cu mai puțină codare.

Dar, desigur, ar putea folosi sensuri diferite, cum ar fi 100px , 7em , 30% și așa mai departe. De asemenea, puteți atribui nume șirurilor de caractere împreună cu dimensiunile acestora.

grid-template-coloane: 1fr 1fr 1fr

La fel ca mai sus, definește doar coloanele în grile.

Expune un gol. Adică spații dintre elementele grilei. Aici folosim o unitate de lungime vw, care este relativă la lățimea ferestrei de vizualizare, dar putem folosi și 10px, 1em, etc. Proprietatea grid-gap este prescurtare pentru grid-row-gap și grid-column-gap proprietăți.

Ei bine, cealaltă parte a codului pur și simplu atribuie stiluri diferite elemente de grilă.

#grilă >

funcția repeat().

Puteți folosi funcția repeat() pentru a face declarații repetate ale mărimii unui element. De exemplu, în loc să faci asta:

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

Noi putem sa facem asta:

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

Ceea ce va reduce semnificativ cantitatea de cod pe care trebuie să o scrieți, mai ales dacă lucrați cu grile mari și repetate.

Crearea unui șablon de site web cu grilă CSS

Grilele includ o sintaxă intuitivă „grafică ASCII” în care puteți „vedea” virtual șablonul în cod, ceea ce face foarte ușor să creați și să modificați șablonul. Chiar și modificări semnificative pot fi făcute în câteva secunde. Această sintaxă intuitivă ajută și la design web responsive. Creare diferite șabloane Pentru diferite dispozitive devine destul de simplă atunci când folosiți grile.

Să creăm acum un șablon de site web care arată astfel:

Și iată codul pentru acest șablon:

Exemplu

Antet

Articol

Reclame

Să aruncăm o privire mai atentă la codul nostru. Marcajul HTML arată astfel:

Antet

Articol

Reclame

Și așa vom face container grilă, astfel încât toate celelalte elemente devin elemente grilă.

Acum să ne uităm la grafica ASCII despre care am vorbit înainte.

Grid-template-zone: „header header header” „nav article ads” „footer footer footer”;

Această piesă definește șablonul nostru. Doar privind codul, putem vedea că este o grilă 3x3 (trei rânduri și trei coloane). Acest lucru ne oferă cinci zone de grilă pe nouă celule de grilă, deoarece unele zone de grilă se întind pe mai multe celule.

De asemenea, vedem că antetul ocupă întreg primul rând de trei celule, iar subsolul ocupă întregul rând de jos, ocupând tot trei celule. Secțiunile de navigare, conținut și publicitate împart spațiu în al doilea rând, unde fiecare dintre aceste elemente primește o celulă.

Acum putem aloca fiecare dintre aceste zone de grilă fiecărui element:

#pageHeader ( grid-area: header; ) #pageFooter ( grid-area: footer; ) #mainArticle ( grid-area: articol; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: reclame; )

Proprietatea grid-area este o proprietate scurtă care vă permite să plasați elemente de grilă pe o grilă. În cazul nostru, ne referim pur și simplu la numele pe care le-am specificat anterior în zonele-șablon-grilă.

Cea mai mare parte a șablonului este deja completată. Restul codului se va ocupa pur și simplu de dimensiuni, spații și înălțimi, în general mai mult de o zonă decorativă.

Următorul cod oferă dimensiunile rândurilor și coloanelor:

Grid-template-rows: 60px 1fr 60px; grid-template-coloane: 20% 1fr 15%;

Prima și a treia linie au ambele 60 de pixeli înălțime, iar a doua linie ocupă tot spațiul rămas.

Prima coloană este de 20%, iar a treia este de 15%. Al doilea ocupă tot spațiul rămas.

Schimbarea șablonului

Puteți schimba șablonul pur și simplu rearanjand zonele grilei în zonele-șablon-grilă .

Deci, dacă trecem la asta:

Grid-template-zone: „nav header header” „nav article ads” „nav footer ads”;

Ca rezultat, obținem următorul șablon:

Cu toate acestea, poate fi necesar să ajustați dimensiunile dacă mutați o grilă mai mică într-o locație mai mare.

De exemplu, pentru a face acest lucru:

Navigarea ocupă acum spațiul în care se afla conținutul, prin urmare dimensiunile au fost ajustate. Altfel, am avea un conținut restrâns și o navigare largă. Deci codul arată acum așa.

Grid-template-zone: „header header header” „articol nav ads” /* Înainte de aceasta a existat „nav article ads” */ „footer footer footer”; grid-template-rows: 60px 1fr 60px; grid-template-coloane: 1fr 20% 15%; /* Înainte de asta era „20% 1fr 15%” */

Crearea unei grile adaptative

Șablonul de grilă are valori precum completarea automată și potrivirea automată care vă permit să creați o grilă cu multe piste de o anumită dimensiune care se vor potrivi într-un container. Acest lucru ar putea însemna că grila este receptivă, ceea ce înseamnă că elementele își schimbă poziția pe măsură ce redimensionați fereastra browserului.

Exemplu de utilizare a completarii automate:

Exemplu

Iată rezultatul:

Codul responsabil pentru aceasta:

Grid-șablon-coloane: repetare(completare automată, minmax(150px, 1fr));

În ea, coloanele au o dimensiune minimă de 150px și un maxim din spațiul rămas. Astfel de piese vor fi repetate de câte ori este necesar pentru a se potrivi în container.

Funcția Repeat() repetă definiția pistei de numărul de ori specificat de primul parametru. Utilizarea umplerii automate va face ca pistele să se repete de cât mai multe ori posibil până când umple containerul.

Mărimea acestor piste este specificată în al doilea parametru. În cazul nostru, folosim minmax(150px, 1fr) pentru a indica faptul că dimensiunea minimă a coloanei este de 150px, iar cea maximă este de 1fr.

Potrivire automată

potrivirea automată funcționează la fel ca umplerea automată. Singura diferență aici este că potrivirea automată reunește toate pistele goale la sfârșitul plasării, în timp ce completarea automată nu o face. Cel mai bun mod aici este o demonstrație cu comparație.

Exemplu

Folosirea a două elemente mici de grilă aici va ajuta la arătarea întregului concept de muncă. Umplerea automată lasă piste goale la sfârșit la dimensiunile specificate, iar potrivirea automată întinde piesa goală, ceea ce duce la umplerea pistelor cu elemente întinse pentru a umple spațiul.

Grile cu interogări media

Unul dintre punctele forte ale grilelor este că puteți crea un șablon complet diferit în câteva secunde.

Acest lucru face grilele ideale pentru interogări media. Putem pur și simplu reatribui valorile în grafica ASCII și include rezultatul într-o interogare media.

Exemplu

Antet

Articol

Reclame

Acesta este un șablon cu trei coloane pe o fereastră de vizualizare mare și se comprimă într-o singură coloană pe dispozitive mici. Deci, acest exemplu va arăta diferit în funcție de dimensiunea ecranului. În orice caz, aici este codul relevant pentru un șablon cu trei coloane pentru ferestre largi.

Grid-template-zone: „header header header” „nav article ads” „footer footer footer”;

Și iată codul corespunzător pentru versiunea mobilă:

Grid-template-zone: „header” „articol” „reclame” „nav” „footer”;

Deci, scopul este să reatribuiți valorile în proprietatea grid-template-zone.

În cazul nostru, am împachetat versiunea mobilă într-o interogare media, astfel:

@media all și (max-width: 575px) ( body ( grid-template-zone: „header” „articol” „ads” „nav” „footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid- coloane-șablon: 1fr; ) )

Vă rugăm să rețineți că am ajustat și valorile din rândurile-șablon-grilă și coloanele-șablon-grilă pentru a se potrivi cu noul șablon. În special, ar trebui să existe o singură coloană și ar trebui să ocupe tot spațiul liber. Și, deoarece toate elementele grilei vor fi într-o singură grămadă, vom aloca 5 rânduri și vom determina înălțimile acestora.

Combinarea grilă cu bloc

În funcție de cerințele șablonului dvs., nimic nu vă împiedică să schimbați versiunea mobilă pentru a afișa: bloc . Ca aici:

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

Acest lucru va funcționa la fel ca în exemplul de mai sus, dar implicit, elementele vor apărea în ordinea lor inițială. În exemplul de mai sus, versiunea mobilă are un nav sub reclame, dar dacă am folosit display: block, atunci nav-ul ar fi deasupra reclamelor.

De asemenea, folosind această metodă, s-ar putea să fie necesar să adăugați niște căptușeală pentru a compensa lipsa golurilor care au fost incluse în versiunea grilă.

Grile explicite și implicite

CSS Grid folosește conceptul de grilă explicită și grilă implicită. Acesta este un concept cheie la care trebuie să fiți atenți când creați grile, altfel veți ajunge cu o grămadă de rânduri și coloane la care nu vă așteptați niciodată să fie acolo.

O grilă explicită este o grilă pe care o definiți în rânduri-șabloane-grilă, coloane-șabloane-grilă și zonele-șablon-grilă.

Cu toate acestea, este posibil să aveți încă elemente care nu se încadrează în grila definită „explicit”. De exemplu, ați definit o grilă care poate conține doar șase elemente, dar containerul în sine este de fapt format din nouă elemente. Doar șase elemente se vor încadra în grila explicită și trei vor rămâne. Și aici intervin grilele implicite.

Grilele implicite sunt generate automat de containerul grilă ori de câte ori elementele grilei sunt situate în afara grilei explicite. Containerul generează trasee de grilă implicite prin adăugarea de rânduri implicite la grilă. Aceste linii, împreună cu grilele explicite, formează cele implicite. Iată un exemplu:

Exemplu

În acest exemplu, definim în mod explicit două rânduri și două coloane, care vor găzdui patru elemente de grilă. Cu toate acestea, există șase elemente de grilă, așa că a fost creată o grilă implicită pentru a găzdui cele două elemente suplimentare.

Și asta e foarte bine.Dacă nu ar fi fost creată grila implicită, atunci două element suplimentar ar crea o mizerie completă în grilă.

Setarea dimensiunii pistei pentru grile implicite

Poate ați observat că rândul suplimentar nu este la fel de înalt ca precedentele două. Acest lucru se datorează faptului că setăm înălțimea rândului în proprietatea grid-template-rows, dar se aplică numai grilelor explicite. Înălțimea rândurilor pe grilele implicite trebuie setată folosind proprietatea grid-auto-rows. Dar din moment ce nu am făcut acest lucru, se dovedește că rândul implicit folosește dimensiunea auto track, care se bazează pe conținut. Iată cum se află proprietățile pentru setarea dimensiunii pistei:

În general, merge așa:

Grila explicită utilizează rânduri-șablon-grilă și coloane-șablon-grilă

Grila implicită utilizează rânduri automate grilă și coloane automate grilă

Exemplu

În acest caz nu trebuie să precizăm valorile finale pe primul element deoarece acoperă doar o singură pistă. Același lucru se poate spune despre al doilea element de grilă. Implicit dacă nu specificați capăt de linie, atunci elementul se va întinde pe o singură pistă.

De fapt, nu a fost nevoie să specificăm nicio poziționare pentru primul element de grilă, deoarece acesta se află într-o anumită poziție, ar fi fost acolo oricum. Dar dacă nu am fi specificat poziționarea pentru al doilea element, atunci acesta ar fi fost localizat imediat după primul element, ocupând doar 1 pistă.

Denumirea liniilor de grilă

De asemenea, puteți numi linii de grilă pentru a le face mai ușor de referit. Acest lucru se poate face prin setarea proprietăților grid-template-rows și grid-template-columns, de exemplu ca aici:

#grid ( afișare: grilă; /* Setați traseele și denumiți liniile */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; înălțime: 90vh; ) . .. /* Acum referiți-vă la acele linii numite */ #item2 ( grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end : col3 -end; )

Liniile numite pot fi fie explicite, fie implicite. Liniile denumite implicite sunt create ori de câte ori creați zone de grilă denumite folosind grid-template-areas .

Numele este preluat din zona grilei cu -start și -end adăugate la sfârșit, în funcție de faptul că este începutul sau sfârșitul liniei.

Astfel, pentru fiecare zonă de grilă numită antet, vor fi create patru linii implicite. Două sunt denumite header-start și coloana-start în zona de grilă numită și două sunt denumite header-end, respectiv.

Zone de grilă denumite

Zonele grilei pot fi denumite în proprietatea grid-template-areas a containerului grilă însuși. Aceasta este ceea ce am făcut înainte când am creat șablonul de site. Pentru a restabili acest lucru în memorie, arată astfel:

#grid ( afișare: grilă; /* Denumiți zona grilei */ grid-template-areas: „a a” „b c”; ... ) ... /* Acum aplicați fiecare element de grilă în zona de grilă numită */ # a ( zonă grilă: a; ) #b ( zonă grilă: b; ) #c ( zonă grilă: c; )

Puteți indica o celulă goală folosind un punct (.) sau o serie de puncte fără spații. De exemplu:

Zone-șablon-grilă: „a a” „. b"; Sau grid-template-zone: „antet antet” „... conținut”;

Proprietăți de plasare în grilă

Există trei proprietăți scurte care pot fi utilizate în locul proprietăților lungi de aspect al grilei menționate în exemplele de mai sus. Aici se potrivesc toate.

grid-area - Această proprietate este prescurtarea pentru:

grid-coloană - Această proprietate este prescurtarea pentru:

grid-column-start — indică ce linie de coloană a elementului grilă începe și la câte piste se extinde.

grid-column-end — indică pe ce linii de coloană se termină elementul grilă și la câte piste se extinde.

grid-row — această proprietate este prescurtarea pentru:

grid-row-start — indică de la ce linie de rând începe elementul grilă și la câte piste se extinde.

grid-row-end - indică ce linie de rând va fi ultima pentru element și câte piste se va întinde.

De asemenea, puteți utiliza proprietatea grid-auto-flow, care a fost menționată în capitolul înainte de acesta. Specifică modul în care elementele de grilă plasate automat ar trebui să fie plasate în grilă. Elementele plasate automat sunt acelea care nu sunt plasate în mod explicit folosind niciuna dintre proprietățile de mai sus.

Creați o grilă imbricată

Elementele grilei pot deveni ele însele grile în CSS Grid. Adică, puteți imbrica un element de grilă într-un alt element de grilă, creând astfel o grilă imbricată.

Pentru a crea o astfel de grilă imbricată, tot ce trebuie să faceți este să aplicați display: grid (sau afișare: inline-grid) elementului grilă și acesta devine o grilă în sine. De asemenea, puteți utiliza display: subgrid pentru a crea o subgrid. , Cum se întâmplă asta.

Exemplu

Moştenire

Majoritatea proprietăților grilei nu sunt moștenite, ceea ce înseamnă că grila dvs. imbricată nu va moșteni valorile grilei părinte. Acest lucru vă permite să faceți modificări în grila părinte fără a afecta neintentionat grila copil.

De exemplu, ați setat coloana grid-auto-flow: pe grila părinte, dar nu ați setat proprietatea pe grila imbricată. În acest caz, grila imbricată va fi setată la rând, deoarece aceasta este valoarea inițială pentru această proprietate.

Exemplu

Rețineți că pe grila părinte, numerele merg pe verticală în jos pe coloane, nu pe orizontală de-a lungul rândului, dar grila imbricată merge în continuare orizontal de-a lungul rândului.

Subgrile

Modulul CSS Grid setează valoarea subgrid pentru proprietăți de afișare. Cu toate acestea, nu toate browserele îl acceptă încă. Această valoare ar trebui să se dovedească destul de utilă.

Subgrid este o grilă imbricată, dar cu afișare: subgrid . Acest lucru îl face un tip special de container grilă care participă la setarea dimensiunii grilei containerului grilă părinte. Cu alte cuvinte, conținutul subgrilei influențează dimensiunea grilei părinte, permițând conținutului să fie răspândit în două grile. Mai jos este un exemplu unde această proprietate ar putea fi utilă.

Iată lista elementelor:

Nume:
Abordare:
Telefon:

Și aici este CSS, unde lista este o grilă, iar elementele listei sunt subgrile.

Ul ( afișare: grilă; grilă: flux automat / auto 1fr; ) li ( afișare: subgrilă; coloană grilă: span 2; margine: 0,5 em; chenar: solid; umplutură: 0,5 em; ) etichetă ( coloană grilă: 1; ) intrare (grilă-coloană: 2; )

Acest exemplu ar arăta eticheta și intrarea într-un rând, cu un chenar în jurul fiecărui element din listă. A da fiecărui element de listă o subgrilă înseamnă că nu ar trebui să existe probleme cu alinierea formularelor de intrare, deoarece fiecare element de listă va participa la modelarea dimensiunii grilei părinte.

Formulare de plasare automată

Puteți folosi grile explicite ca avantaj atunci când creați formulare sau orice altă colecție de elemente care necesită alinierea grilei. De exemplu, puteți utiliza grile explicite pentru a crea un formular ca acesta:

Și pe măsură ce adăugați elemente de formular la marcaj, grila explicită va adăuga rânduri pentru a le găzdui. Deci, pentru a crea forma deasupra, avem nevoie de acest marcaj.

Nu este nevoie de marcaje suplimentare pentru a aranja totul corect. Și, de asemenea, nu este nevoie să adăugați clase suplimentare pentru elementele de formular. Adăugăm o singură clasă pentru

Puteți adăuga automat noi elemente de formular și acestea se vor adapta automat la altele, deoarece vor fi plasate într-o grilă explicită.

Acest lucru este posibil deoarece am făcut din formularul în sine o grilă (afișare: grilă aplicată la .myForm). Și apoi au indicat că etichetele merg într-o coloană, iar controalele în alta.

Iată un alt exemplu, de data aceasta cu mai multe o cantitate mare elemente:

Exemplu

Odată ce subgrilele devin răspândite printre browsere, va fi posibilă alinierea elementelor de formular care nu sunt descendenți direcți ai

. De exemplu, cum ar fi listele de elemente de formular.

Alinierea grilei CSS

În general, majoritatea proprietăților de aliniere funcționează la fel pe elementele grilei ca și pe alte elemente. Dar există și unele proprietăți de aliniere care se aplică numai grilelor și flexurilor.

Proprietatea align-items specifică valoarea standard align-self pentru toate elementele grilei care participă la containerul grid în contextul formatării acestuia.

alinierea elementelor: centru;

În exemplul de mai sus, folosim align-items: centru pentru containerul grilă, prin urmare toate elementele grilei vor fi aliniate la centrul axei blocului.

Dar, deoarece acesta este implicit, oricare dintre elementele grilei îl poate suprascrie folosind proprietatea align-self.

Aliniați-vă proprietatea

Această proprietate aliniază un element dintr-un bloc container de-a lungul axelor bloc/coloană/cruce.

Roșu ( fundal: portocaliu roșu; înălțime: 40%; align-self: linia de bază; ) .verde ( fundal: galbenverde; înălțime: 60%; ) .albastru ( fundal: steelblue; înălțime: automat; align-self: stretch; )

proprietatea obiectelor-loc

Această proprietate este o prescurtare pentru elementele justificative și elementele de aliniere .

Cred că știți deja că Grid este superioară Flexbox pentru crearea machetelor. Dar cum rămâne cu aspectul receptiv? Care este mai bine să utilizați Flexbox sau Grid? Ambele pot funcționa cu machete receptive. S-ar putea să credeți că Flexbox se potrivește mai bine, până la urmă - articolele Flex se pot întinde, micșora, schimba direcția etc. Dar Grid are de fapt câteva trucuri noi care vă vor economisi mult timp și probleme pentru layout-uri receptive.

Funcția Minmax

Primul instrument nou și strălucitor Grid este funcția minmax, care ne permite să definim intervale pentru coloanele și rândurile din aspectul nostru. În acest exemplu, avem o bară laterală portocalie și dorim ca lățimea să fie de cel puțin 100 de pixeli, dar nu mai mult de 30% din lățimea containerului. Lățimea containerului este de 500 de pixeli, așa că bara noastră laterală ocupă cu bucurie 30% (150 de pixeli).

Iată exact același cod, dar lățimea containerului este mai mică de 150 px. Acum, valoarea noastră minimă începe și se asigură că bara laterală portocalie nu este mai mică de 100 de pixeli.

Modul în care funcționează funcția minmax este uimitor, în majoritatea cazurilor nici nu va trebui să utilizați interogări media.

Putem obține un efect similar folosind Flexbox, dar necesită puțin mai multă muncă și cod. Trebuie să folosim o combinație de flex-grow, min-width, max-width:

Metoda Grid este mai flexibilă și mai ușor de adaptat. Codul este de aproape două ori mai mic.

O singură regulă pentru toate elementele

Dacă aveți nevoie de interogări media, cu aspectul Grid este ușor de făcut. Să presupunem că vrem să schimbăm acest aspect pe mobil într-o singură coloană. Cu Flexbox, va trebui să schimbăm fiecare element din aspect pentru a suprascrie lățimea minimă. Nu este nevoie să depășiți lățimea maximă, deoarece lățimea minimă are prioritate.

Dacă aveți un aspect simplu, această abordare funcționează destul de bine. Dar cu cât aspectul este mai complex, cu atât va trebui să redefiniți mai multe elemente prin interogări media. Cu ajutorul Grid, această problemă este mult mai ușor de rezolvat.

De la autor: articol din conceptul de serie de aspect CSS Grid. Î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ă modificăm proprietățile de umplutură și dimensiunea fontului ale elementelor 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, 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.

Cuvântul cheie de completare automată funcționează bine pentru a umple un container grilă.

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 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 oferă:

viteza și ușurința dezvoltării
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 mult - aceeași Grid 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

Am scris odată despre un serviciu neobișnuit, care este un AI pentru crearea unui site web. Judecând după rezultatele actuale, s-au dovedit „așa așa”, mai ales având în vedere prețul declarat. în acest sens vor fi mai eficiente.

Astăzi vreau să vorbesc despre o „tehnologie” care este similară ca nume, dar complet diferită în esență - CSS Grid! Postul este format din mai multe părți:

Această abordare a construirii machetelor facilitează crearea de grile de site-uri web destul de flexibile folosind CSS. În viitor, probabil va fi folosit peste tot. Dacă am înțeles bine, este perfect pentru aceleași sarcini ca Flexbox, dar spre deosebire de acesta, poate funcționa simultan în dimensiuni bidimensionale (coloane și rânduri). Mai jos ofer o traducere a articolului, care este un fel de introducere in subiect si contine exemple educative simple. Atenţie! Autorul notei desfășoară un curs gratuit(!) pe CSS Grid în decembrie, dacă doriți, trimiteți o solicitare pe e-mailul său.

Am găsit și un videoclip util pe această temă pe internet. Poate că este mai ușor pentru cineva să perceapă informații ca aceasta:

Introducere în CSS Grid

Anul acesta, această tehnologie a primit suport încorporat în Chrome, FF, Safari, așa că este probabil să devină un instrument popular în viitorul apropiat. Dar pentru moment, trebuie să vă amintiți să aveți grijă de browserele web învechite și întârziate.

Cea mai simplă plasă

Există 2 obiecte principale aici:

parent / wrapper (înfășurarea tuturor blocurilor interne care îl alcătuiesc);
copii/articole (elementele în sine).

Iată cel mai simplu design:

Wrapper (afișare: grilă; )

Cu toate acestea, imediat după aceasta, nu se va schimba mare lucru, deoarece formatul de afișare nu este definit. Veți vedea 6 DIV-uri urmându-se.

Coloane și rânduri

Pentru a vă face grila bidimensională, trebuie să specificați parametrii rândurilor și coloanelor - utilizați opțiunile grilă-șablon-rândȘi grilă-șablon-coloană respectiv:

.wrapper ( afișare : grilă; grid-template-columns : 100px 100px 100px ; grid-template-rows : 50px 50px ; )

Wrapper (afișare: grilă; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; )

Deoarece există trei valori pentru coloane, se va genera același număr dintre ele, prin urmare, există doar 2 rânduri.Numerele în pixeli stabilesc lățimea elementelor în primul caz (100px fiecare) și înălțimea (50px) în al doilea.

Iată un alt exemplu pentru a vă ajuta să înțelegeți mai bine cum funcționează:

.wrapper ( afișare : grilă; grid-template-columns : 200px 50px 100px ; grid-template-rows : 100px 30px ; )

Wrapper ( afișare: grilă; grid-template-coloane: 200px 50px 100px; grid-template-rows: 100px 30px; )

Va fi afișată următoarea imagine:

Locație și dimensiuni

Cu această caracteristică veți obține capabilități foarte puternice pentru a crea grile de site. Să presupunem că avem o dimensiune de 3x3:

.wrapper ( afișare: grilă; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px ; )

Wrapper (afișare: grilă; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; )

Dacă codul HTML, ca în exemplul nostru, are 6 elemente DIV (vezi chiar la început), atunci în acest caz vor fi afișate doar 2 rânduri pe site, al treilea nu va fi temporar completat. Totuși, când începem să aplicăm diferiți parametri pentru poziția și dimensiunile blocurilor − grilă-coloană grilă-rând, situația se va schimba.

Atribuim stiluri unuia dintre obiecte:

.item1 (grid-coloană-start: 1; grid-coloană-sfârșit: 4; )

Item1 ( grid-coloană-start: 1; grid-coloană-sfârșit: 4; )

Aceasta înseamnă că DIV cu clasa item1 începe de la prima linie a coloanei din grilă și se termină pe a 4-a, adică umple întregul rând.

De fapt, acum unele obiecte s-au mutat pe ultima linie, pe care o scrisesem în avans (3x3). Există o opțiune mai simplă:

.item1 ( coloană-grilă : 1 / 4 ; )

Item1 (grilă-coloană: 1 / 4; )

.item1 ( grid-coloană-start : 1 ; grid-coloană-sfârșit: 3 ; ) .item3 ( grid-row-start : 2 ; grid-row-end : 4 ; ) .item4 ( grid-coloană-start : 2 ; grilă-coloană-sfârșit : 4 ; )

Item1 ( grid-coloană-start: 1; grid-column-end: 3; ) .item3 ( grid-row-start: 2; grid-row-end: 4; ) .item4 ( grid-coloană-start: 2; grid-coloană-sfârșit: 4; )

Ne oferă următoarea imagine:

Ai reușit să-ți dai seama? În principiu, nu este dificil, dar trebuie să înțelegeți că aceasta este doar partea de bază a nuanțelor CSS Grid.

Prototiparea și amenajarea zonelor cu grilă CSS

Codul de marcare este după cum urmează (HTML):

Container ( afișare: grilă; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; )

Dacă totul este clar în principiu cu privire la rânduri, atunci coloanele trebuie clarificate. Aici în sensul grilă-șablon-coloane se creează o grilă care constă din 12 coloane identice (lățimea fiecăreia = 1/12 din total) + margini de 5px între ele (grid-gap).

Adăugați zone de șablon de grilă

Această opțiune vă oferă și mai multă flexibilitate și caracteristici uimitoare. Poate sintaxa și formatarea parametrului zone-șablon-grilă pare puțin neobișnuit, dar mai departe vei înțelege de ce totul este exact așa:

.container ( display: grid; grid-gap: 5px ; grid-template-columns : repetare (12 , 1fr) ; grid-template-rows : 50px 350px 50px ; grid-template-zone : "h h h h h h h h h h h h" "m m c f c f c f c f c f c f " ; )

Container ( display: grid; grid-gap: 5px; grid-template-colons: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-zone: "h h h h h h h h h h h h" "m m c c c c c f" f f f c f c f f f" ;)

Aceasta este un fel de reprezentare vizuală a grilei site-ului dvs. în CSS. Toate caracterele din acest parametru formează 3 rânduri și 12 coloane, definite de linia de mai sus. Fiecare literă corespunde unei celule. Numele din exemplu corespund blocurilor de cod HTML: antet (h), meniu (m), conținut (c) și subsol (f), dar puteți utiliza orice alte opțiuni.

Atribuirea de șabloane și experimente de zone

În pasul următor, „legați în mod logic” simbolurile containerului și elementele DIV:

.header ( grid-area : h; ) .meniu ( grid-area : m; ) .conținut ( grid-area : c; ) .footer ( grid-area : f; )

Antet ( grid-area: h; ) .meniu ( grid-area: m; ) .content ( grid-area: c; ) .footer ( grid-area: f; )

Site-ul va afișa un aspect ca acesta:

Și acum începe magia. Să schimbăm câteva litere din parametru zone-șablon-grilă, de exemplu, „c” și „m” în locuri:

grid-template-zone : „h h h 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 f f” ;

zone-șablon-grilă: „h h h h 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 f f”;

Grila va arăta diferit:

Adăugarea de adaptabilitate la acest design arată în general uimitor. Nu ai putea face asta numai cu HTML, dar în CSS totul este posibil: „. 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 ." ;

grid-template-zone: ". 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 .";

Site-ul web arată astfel:

Fără scripturi sau HTML - doar magia CSS Grid!

Exemple suplimentare de grilă și flexibilitate

Ulterior pe CSS Tricks am găsit un alt articol pe această temă, unele opțiuni din acesta vă pot fi utile. Urmați linkurile către (logo în blocul de cod din dreapta sus) pentru a vedea exemplul în acțiune pe ecranul mare.

Aspect clasic de site

Avem un antet și un subsol întins pe toată lățimea, iar între ele există un bloc de conținut cu două bare laterale. În primul caz, când ecranul este redus, toate obiectele vor rămâne în aceleași poziții ca înainte.

Dacă aveți nevoie ca blocurile să fie amplasate unul sub celălalt, atunci:

Grilă de blog cu 2 coloane

Să presupunem că avem un bloc mare de conținut și o bară laterală în centru. Codul de mai jos menține toate obiectele pe loc atunci când dimensiunea paginii este redusă.

A doua tehnică este să le aranjezi una după alta.

Distribuția pe lățime a elementelor

Din punct de vedere vizual, exemplul seamănă cu o galerie, când toate imaginile sunt una lângă alta în mai multe coloane. Pe măsură ce micșorați dimensiunea, pe fiecare linie vor apărea din ce în ce mai puține.

Poza din interiorul articolului

Aici conținutul este împărțit în 2 părți, iar între ele există un bloc pe ecran complet.

Total.În general, am descoperit conceptul de CSS Grid, care, sincer să fiu, m-a impresionat plăcut – mai ales cadrele în care erau luate în considerare zone de layout cu diferite litere. Desigur, toate acestea sunt doar elementele de bază ale „tehnologiei”, plus că nu am descris fiecare parametru de cod în detaliu. Exemplele din ultima secțiune a articolului sunt mai complexe și ar trebui revizuite cu atenție. Combină atât Flex, cât și Grid. Dacă acest subiect este interesant, abonați-vă la cursurile primului autor - Trimiteți prin e-mail în prima sau a doua notă originală.

Aveți ceva de adăugat în legătură cu Grila CSS? — scrieți gânduri, sfaturi sau trimiteți link-uri interesante.