Share
De-a lungul acestei serii, ne-am familiarizat cu sintaxa Grid, am învățat despre modalități eficiente de a pune elemente pe o pagină și le-am luat la revedere unor obiceiuri vechi. În acest tutorial vom aplica toate acestea la un design web practic receptiv.
Să folosim demo-ul de unde am rămas ultima oară.
Acesta cuprinde două rețele declarate; grila noastră principală și grila imbricată în cadrul unuia dintre articolele noastre. Putem controla când aceste grile intră în vigoare folosind interogări media, ceea ce înseamnă că putem redefini complet aspectul nostru la diferite lățimi de vizualizare.
Începeți prin duplicarea primei declarații de rețea și împachetând duplicatul într-o interogare media mobilă (folosesc 500px ca punct de întrerupere, dar este complet arbitrar):
.grid-1 / * stiluri de declarare a rețelei * / numai în ecranul @media și (min-width: 500px) .grid-1 / * stiluri de declarații de rețea * /
Acum, în cadrul primei declarații, vom schimba modul în care este definită grila noastră, plasând totul într-o singură coloană. Vom lista o singură coloană în lista noastră grilă matriță coloane , asigurați-vă că cele patru rânduri pe care le avem acum sunt definite cu grid-șablon rânduri, și aranja aspectul cu grid-șablon-zone:
.grilă-1 display: grilă; lățime: 100%; marja: 0 auto; grilă-șablon-coloane: 1fr; grilă-șablon-rânduri: 80px auto auto 80px; grilă-decalaj: 10 pixeli; grilă-șablon-zone: "header" "main" "sidebar" "subsol";
Ne-am făcut și noi grid-gap doar 10px în mod implicit, pentru a gestiona ecrane mai mici.
Iată ce ne dă asta. Veți observa că, de asemenea, folosim interogarea noastră media pentru a o schimba umplutură și marimea fontului pe noi .grilă-1 div articole.
Asta are grijă de structura principală, dar avem totuși grila imbricată care rămâne în încăpățânare în structura celor două coloane, în toate circumstanțele. Pentru a repara că vom face exact același lucru ca înainte, dar folosind un punct de întrerupere diferit pentru a sugera o abordare bazată pe conținut:
.element-2 / * stiluri de declarare a rețelei * / numai în ecranul @media și (min-width: 600px) .item-2 / * stiluri de declarații de rețea * /
Verificați rezultatul final pe CodePen.
Câteva lucruri pe care trebuie să le menționăm aici:
O altă abordare (adaptată) la Grid este potrivită pentru structurile de zidărie; blochează dimensiunea și fluxul automat, în funcție de portul de vizualizare.
Abordarea noastră până acum a fost aceea de a dicta câte piste există și de a urmări elementele să se potrivească în mod corespunzător. Asta se întâmplă în acest demo; noi avem grilă-șablon-coloane: repeat (4, 1fr); care spune "creați patru coloane și faceți fiecare o singură unitate fracționată".
Cu auto-umplere cuvântul cheie putem dicta cum larg piesele noastre sunt și lăsăm Grid să descopere cât de mulți se vor potrivi în spațiul disponibil. În acest demo am folosit grilă-șablon-coloane: repetați (auto-umplere, 9em); care spune: "Faceți coloanele de câte 9 m fiecare și potriviți cât puteți de mult în containerul de rețea".
Notă: acest lucru ia, de asemenea, jgheaburi noastre, grid-gap, în considerare.
Containerul din aceste demo-uri are un fundal întunecat pentru a arăta clar cât spațiu este disponibil și veți vedea că acesta nu a fost completat complet în ultimul exemplu. Deci, cum facem asta??
minim maxim() ne permite să setăm o dimensiune minimă și maximă pentru o pistă, permițând rețelei să funcționeze în cadrul acestora. De exemplu, am putea configura trei coloane, primele două fiind 1fr, ultima fiind de maxim 1fr, dar în scădere nu mai mică de 160px:
grilă-șablon-coloane: 1fr 1fr minmax (160px, 1fr);
Toate coloanele se vor micșora pe măsură ce spargeți fereastra, dar ultima coloană va fi împinsă numai până acum. Aruncă o privire.
Înapoi la noi auto-umplere demo, dacă ar fi să schimbăm lățimea coloanei pentru minmax (9e, 1fr) Grilă ar plasa cât mai multe piste de 9 mm posibil, dar apoi le extinde până la maxim 1fr până când containerul este umplut:
Avertisment: Gridul va recalcula pistele după reîncărcarea paginii (încercați să ștergeți fereastra browserului și să apăsați reîmprospătarea), dar nu va face acest lucru la redimensionarea ferestrei. Interogările media pot fi folosite pentru a modifica valorile, dar ele nu vor mai juca frumos cu redimensionarea ferestrelor.
Să încheiem cu câteva gloanțe:
Accentsconagua
grid-șablon-zone (și alte lucruri) pentru diferite scenarii.auto-umplere cuvântul cheie este util pentru umplerea containerelor de rețea.minim maxim() completează funcția auto-umplere frumos, asigurându-ne că recipientele sunt umplute corespunzător, dar nu ne dau "reacție" în adevăratul sens al cuvântului.Cu lecțiile învățate în această serie, sunteți înarmați să ieșiți și să începeți să jucați cu Grid! Rămâi acordat pentru mai multe tutoriale de la Grid, exerciții practice, soluții la probleme comune de aspect și actualizări.
