Che cos'è la proprietà griglia?

La proprietà grid è una proprietà abbreviata per grid-template-righe, grid-template-colonne, grid-template-aree, grid-auto-righe, grid-auto-colonne, grid-auto-flow, grid-column-gap e proprietà gap riga griglia.

Struttura a griglia

La proprietà Grid rende gli elementi da visualizzare come matrice ⊞

 
 
 
 
 
 
 
 

Nel css

#container {
 display: griglia;
 }

Nell'esempio #, #container viene visualizzato come una griglia e i relativi elementi figlio verranno visualizzati come celle o elementi della griglia

Compatibilità del browser

È un grande entusiasmo che IE, Edge, Firefox supportino la proprietà della griglia CSS . Per lo più tutto il browser ha una bella interfaccia utente di visualizzazione griglia negli strumenti di sviluppo.

Linee della griglia

Le linee della griglia sono linee orizzontali e verticali, vengono utilizzate per il posizionamento. L'indice di posizionamento può essere un numero intero (numeri interi sia negativi che positivi).

Proprietà → griglia-colonna-inizio, griglia-colonna-fine, griglia-riga-fine, griglia-riga-fine.

Codice di esempio :

#grid> div: nth-child (2) {
 griglia-colonna-inizio: 2;
 griglia-colonna-fine: 3;
 grid-row-start: 2;
 fine riga griglia: 3;
}

L'elemento 2 inizierà alla seconda linea verticale in 2 linee orizzontali e l'elemento terminerà con 3 linee verticali e 3 linee verticali.

Linea della griglia

Cella di griglia

Una cella della griglia è uno spazio tra due linee della griglia verticale adiacenti e le due linee della griglia orizzontale adiacenti.

Grid Cell

Grid Tracks

Una traccia della griglia è uno spazio tra due linee della griglia adiacenti. cioè riga, colonne.

Grid Track

Grid Area & Grid Gap

Un'area della griglia è il gruppo di una o più celle.

Spazio griglia è lo spazio tra le righe e le colonne. È la proprietà abbreviata del gap griglia-riga e griglia-colonna.

Riga griglia e colonna Griglia

grid-row è una proprietà abbreviata per grid-row-start e grid-row-end.

grid-column è una proprietà abbreviata di grid-column-start e grid-column-end

Riga di griglia

grid-row-start → specifica la posizione iniziale di un elemento della griglia nella riga

es .grid-row-start: 2 → L'elemento inizierà alla seconda linea verticale

grid-row-end → specifica la posizione finale di un elemento della griglia nella riga

es. griglia-fine riga: 3 → L'elemento termina alla seconda linea verticale

Griglia-auto-flow

Controlla il funzionamento dell'algoritmo di posizionamento automatico. Per impostazione predefinita, il valore è riga (gli articoli vengono posizionati in base alla riga)

grid-auto-flusso: fila;
grid-auto-flusso: Colonna;
Colonna flusso automatico griglia e riga flusso automatico griglia

grid-auto-flow: denso di riga → Utilizza un algoritmo di imballaggio “denso”. Riempi lo spazio libero nella griglia su base riga.

grid-auto-flow: denso di colonna → Utilizza un algoritmo di imballaggio “denso”. Riempi lo spazio libero nella griglia su base colonna

Griglia esplicita e griglia implicita

La griglia esplicita è la griglia creata dall'utente usando grid-template-row, grid-template-colonne

grid-template-colonne: ripeti (3, 100px);
grid-template-file: 100px 100px;

La griglia implicita viene creata dal browser. Le dimensioni della griglia implicita possono essere modificate utilizzando la proprietà grid-auto-colonne e grid-auto-file.

grid-template-colonne: ripeti (3, 100px);
grid-auto-righe: 100px;

Ordine griglia:

Possiamo ordinare l'elemento in base alla proprietà dell'area del modello.

possiamo cambiare l'area del modello nella media query e visualizzare la nuova struttura della griglia.

controlla il codice per ulteriori informazioni.

Per la griglia, per lo più usiamo tutti il ​​sistema a griglia bootstrap. Bootstrap può cambiare il nome di una classe in ogni versione (But Not Like Angular ), quindi dobbiamo ricordare quale versione ha quale nome di classe .

Usando la proprietà della griglia CSS, POSSIAMO (anche in IE ) visualizzare facilmente gli elementi nella vista griglia.

Grazie mille per la lettura! Se ti è piaciuto, ti preghiamo di sostenere applaudendo e condividendo il post. Sentiti libero di lasciare un commento di seguito.