Ce este proprietatea Grid?

Proprietatea grilă este o proprietate scurtă pentru grilele-șablon-rânduri, grila-șablon-coloane, grilă-șabloane-zone, grilă-rânduri auto, grilă-auto-coloane, grilă-auto-flux, grilă-coloană-spațiu , și proprietățile de spațiu rând rând grilă.

Structura grilelor

Proprietatea grilă face ca elementele să fie afișate ca matrice ⊞

 
 
 
 
 
 
 
 

În css

#container {
 afișare: grilă;
 }

În exemplu, #container este afișat ca o grilă, iar elementul copil va fi afișat ca celule sau elemente de grilă

Compatibilitatea browserului

Este o entuziasm imensă, că IE, Edge, Firefox acceptă proprietatea grilei CSS . În mare parte, browserul dispune de interfață de vizualizare grilă frumoasă în instrumentele pentru dezvoltatori.

Grid Line

Liniile de grilă sunt linii orizontale și verticale, sunt utilizate pentru poziționare. Indicele de poziționare poate fi un număr întreg (atât numere întregi negative, cât și pozitive).

Proprietăți → grilă-coloană-început, grilă-coloană finală, grilă-rând-capăt, grilă-rând-capăt.

Cod simplu :

#grid> div: nth-child (2) {
 grid-column-start: 2;
 capăt-grilă-coloană: 3;
 grilă-rând-start: 2;
 capăt-rând-grilă: 3;
}

Elementul 2 va începe la a doua linie verticală în 2 linii orizontale, iar elementul se va încheia la 3 linii verticale și 3 linii verticale.

Grid Line

Celulă grilă

O celulă de grilă este un spațiu între două linii de grilă verticale adiacente și cele două linii de grilă orizontale adiacente.

Celulă de grilă

Piste de grilă

O cale grilă este un spațiu între două linii de grilă adiacente. adică rând, coloane.

Track Grid

Grid Area & Grid Gap

O zonă grilă este grupul uneia sau mai multor celule.

Grid Gap este spațiul dintre rânduri și coloane. Este proprietatea shorthand a grid-row-gap și grid-column-gap.

Coloana Grilă și coloana Grilă

grid-row este proprietatea shorthand pentru grid-row-start și grid-row-end.

grid-column este proprietatea shorthand pentru grid-column-start și grid-column-end

Rândul de grilă

grid-row-start → specifică poziția de pornire a unui element de grilă în rând

ex: grid-row-start: 2 → Elementul va începe la a doua linie verticală

grid-row-end → specifică poziția finală a unui element de grilă în rând

de ex. capătul rând-rând: 3 → Elementul se va încheia la a doua linie verticală

Grid-auto-flux

Acesta controlează modul în care funcționează algoritmul de plasare automată. În mod implicit, valoarea este rând (Articolele sunt plasate pe rând)

grid-auto-flux: rând;
grid-auto-flux: coloană;
Coloana fluxului auto grilă și rândul fluxului automat de grilă

grid-auto-flow: rând dens → Utilizează algoritmul de „ambalaj” dens. Umpleți spațiul liber din grilă pe bază de rând.

grid-auto-flow: coloană densă → Utilizează algoritmul de „ambalaj” dens. Completați spațiul liber din grilă pe baza coloanei

Grila explicită și grila implicită

Grila explicită sunt grile create de utilizator folosind grilă-șablon-rând, grilă-șablon-coloane

grid-template-column-uri: repetare (3, 100px);
grid-template-lines: 100px 100px;

Grila implicită este creată de browser. Mărimea grilei implicite poate fi modificată folosind proprietatea grid-auto-column și proprietatea grid-auto-lines.

grid-template-column-uri: repetare (3, 100px);
grid-auto-lines: 100px;

Comandă grilă:

Putem comanda elementul după proprietatea zonei șablonului.

putem schimba zona șablonului în interogarea media și afișa noua structură a grilei.

verificați codepenul pentru mai multe.

Pentru grilă, mai ales cu toții folosim sistemul grilelor bootstrap. Bootstrap-ul poate schimba un nume de clasă în fiecare versiune (dar nu ca unghiular ), deci trebuie să ne amintim ce versiune are numele clasei .

Prin utilizarea proprietății grilei CSS, Putem (chiar și în IE ) afișa cu ușurință elementele în vizualizarea grilei.

Multumesc mult pentru citit! Dacă v-a plăcut, vă rugăm să susțineți aplazând și partajând postarea. Simțiți-vă liber să lăsați un comentariu mai jos.