Griglia-modello-colonne / griglia-modello-righe - Trucchi CSS

Le proprietà grid-template-rowse grid-template-columnssono le proprietà CSS primarie per stabilire un layout di griglia, una volta che l'elemento è un contesto di griglia ( display: grid;).

Ci sono anche -ms-grid-columnse -ms-grid-rows, che sono la vecchia versione di IE di questo. Potresti prendere in considerazione la correzione automatica per ottenere o meno la tua chiamata. C'è stato anche un periodo strano in cui erano grid-definition-columnse grid-definition-rows, ma non è più una cosa.

Ecco un esempio derivato dalla documentazione di Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Definisce il numero di righe / colonne nella griglia e la loro dimensione.

Queste due proprietà supportano un elenco di valori separati da spazi. Ogni valore definirà una nuova colonna / riga impostando una dimensione. Un elenco di 4 valori risulterà in 4 colonne / righe. Un singolo valore produrrà una singola colonna / riga.

Valori accettati includono lunghezza (come pxo em), percentuali, frazioni ( frsi veda sotto), auto(o fit-content), min-content, max-content, e minmax(), oppure la repeat()funzione.

Nell'esempio di codice sopra, ciò significa:

Colonna 1 ( parola chiave automatica ): la colonna viene adattata al contenuto della colonna.
Colonna 2 ("100 px"): la colonna è larga 100 pixel.
Colonna 3 ("1fr"): la colonna occupa una frazione dello spazio rimanente.
Colonna 4 ("2fr"): la colonna occupa due unità frazionarie dello spazio rimanente.

Riga 1 ("50 px"): la riga è alta 50 pixel.
Riga 2 ("5em"): la riga è alta 5 em.
Riga 3 ( parola chiave con contenuto minimo ): la riga è piccola quanto il contenuto lo consentirà.
Riga 4 ( parola chiave automatica ): la riga viene adattata al contenuto della riga.

ripetere()

La repeat()funzione è stata progettata specificamente per questo modulo. Ti permette di definire un pattern ripetuto X volte. Mi piace repeat(6, 1fr);. Supponiamo che tu voglia creare 12 colonne di uguale larghezza distanziate l'una dall'altra con un margine dell'1%; potresti definire 1fr repeat(11, 1% 1fr). È lo stesso di 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

L'Unità fr

L' frunità può essere utilizzata per grid-rowse grid-columnsvalori. Sta per "frazione di spazio disponibile". Consideralo come una percentuale di spazio disponibile quando hai tolto colonne / righe di dimensioni fisse e basate sul contenuto. Come dice la specifica:

La distribuzione dello spazio frazionario si verifica dopo che tutte le dimensioni di riga e colonna basate sul contenuto o sulla "lunghezza" hanno raggiunto il loro massimo.

Relazionato

La nostra migliore risorsa per tutto ciò che riguarda la griglia CSS è la nostra guida completa alla griglia CSS.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.