Share
În tutorialele anterioare am învățat cum să configurați o rețea, definind proprietățile sale explicite (cum ar fi grilă matriță coloane și grid-șablon-zone) și chiar unele dintre proprietățile implicite (cum ar fi grid-auto-coloane). În acest tutorial vom examina proprietatea stenografică grilă care se ocupă rapid cu toate cele de mai sus într-o singură declarație.
Ca de obicei, începeți prin a declara afișare: grilă; pe container. Apoi, utilizați grilă proprietăți pentru a vă stabili rândurile, apoi coloanele:
.grilă-1 display: grilă; grilă: 100px auto 300px / repetare (2, 1fr) 100px;
Instrucțiunea de mai sus spune că vrem trei rânduri explicite de 100px, auto și 300px. Și (folosind repeta() funcția) două coloane de 1fr, apoi unul de 100px. Este exact la fel ca această versiune mai lungă:
.grilă-1 display: grilă; grilă-șablon-rânduri: 100px auto 300px; grilă-șablon-coloane: repetați (2, 1fr) 100px;
Ambele declarații ne dau următoarele:
Valorile implicite sunt ceea ce cerem ca Grid să utilizeze dincolo de valorile explicite pe care le definim. În grilă nu putem combina cele două astfel încât trebuie să facem o alegere. Uitați-vă la acest lucru, de exemplu:
.grilă-1 display: grilă; grila: auto-flux 100px / 1fr 100px;
În acest caz, ne-am blocat cu coloane explicite (unul de la 1fr, altul de 100px), dar rândurile noastre utilizează o formă abreviată grid-auto-flow și grid-auto-rânduri. Se spune "Când trebuie să adăugați mai multe piste în rețea, adăugați-le ca rânduri. Și faceți fiecare fiecare 100px înălțime. " Este același lucru cu acesta:
.grilă-1 display: grilă; grilă-șablon-coloane: 1fr 100px; grilă-curgere automată: rând; grilă-auto-rânduri: 100px;
Acesta este un comportament destul de implicit, dar vom vedea o schimbare mai mare dacă vom cere în schimb grila noastră implicită să folosească coloane suplimentare:
.grilă-1 display: grilă; grilă: 100px 300px / auto-flux 100px;
Acest lucru ne oferă două rânduri de 100px și 300px, apoi setări eficiente grilă-flux automat: coloană;. Este la fel ca:
.grilă-1 display: grilă; grilă-șablon-rânduri: 100px 300px; grilă-flux automat: coloană; grilă-coloane automate: 100 pixeli;
Acum, algoritmul de plasare automată plasează elemente de sus în jos, adăugând coloane la dreapta atunci când se scurge spațiu:
Notă: nu putem declara auto-flux pe ambele rânduri și coloane, care nu vor funcționa.
Dacă vă gândiți înapoi la tutorialul nostru Înțelegerea grila CSS "Algoritmul de plasare automată" vă veți aminti că am discutat rar și dens; cuvintele cheie care descriu modul în care elementele sunt ambalate într-o rețea. Acestea pot fi de asemenea folosite împreună auto-flux, asa:
.grilă-1 display: grilă; grilă: 100px 300px / auto-flux dense 100px;
Șabloanele de șablon sunt o modalitate de a numi zonele rețelei noastre, în ceea ce este aproape o modalitate vizuală reprezentativă. În cea mai simplă formă, am folosi doar grilă pentru a descrie zonele șablonului nostru și nimic altceva:
.grilă-1 display: grilă; grilă: "antetul antetului antetului" "bara principală principală" "footer footer subsol";
Apoi, vom preciza care zonă se umple fiecare element de rețea, după cum urmează:
.element-1 zona grilă: antet;
Dacă vă reamintiți tutorialul nostru cu șabloane originale, am avut mai multe detalii pentru a ne oferi dimensiuni pentru coloane și rând:
.grilă-1 display: grilă; grilă-șablon-coloane: repeat (3, 1fr); grilă-șablon-rânduri: 80px 180px 80px; grilă-șablon-zone: "antet header antet" "principală bara principală" "footer footer subsol";
Putem face și asta, după cum urmează:
.grilă-1 display: grilă; grilă: "header header header" 80px "bara principală principală" 180px "footer footer footer" 80px / 1fr 1fr 1fr;
Adăugăm lățimea coloanelor după slash-ul înainte ( repeta() funcția nu va funcționa în acest caz, dar nu știu de ce). Și adăugăm înălțimea rândului în linie după declarațiile de zonă. Cu asta ajungem:
Acest tutorial ar fi trebuit să vă ofere o înțelegere a modului în care grilă lucrări de scurtă durată. Redați-vă cu el, vedeți ce alte aspecte ale modulului Grid CSS puteți utiliza împreună cu el și spuneți-ne cât timp vă economisește!
Accentsconagua