GRID GAP CSS
In questo tutorial, utilizzeremo questa proprietà "GRID-GAP" in CSS e ti spiegheremo in dettaglio il concetto di "gap griglia" insieme a diversi esempi.
Esempio 1:
Inizieremo con il nostro primo esempio creando un nuovo file nel software, Visual Studio Code. Quando creiamo un nuovo file nel codice Visual Studio, possiamo scegliere la lingua e selezioniamo HTML. Il codice HTML deve quindi essere creato. Il codice Visual Studio ci consente di acquisire istantaneamente i tag fondamentali inserendo "!"E quindi facendo clic su" Inserisci."Quindi, trarremo beneficio da questa capacità e raccoglieremo tutti questi tag fondamentali. Nel tag HTML Head, forniamo un collegamento al file CSS. Creeremo un'intestazione e poi mettiamo un paragrafo al di sotto di questa intestazione. Quindi, creiamo una classe Div principale con il nome "Grid-Container" e mettiamo altre sette classi DIV all'interno di questo Div principale. Stiamo dando nomi diversi a tutti i div come "Item1" per Div Classe 1, "Item2" per Div Classe 2 e così via.
Stiamo utilizzando la proprietà "allineate al testo" per il "corpo" e allineandola al "centro". Quindi, scegliamo "Green" come "colore" dell'intestazione e mettiamo anche la "sottolineatura" per la proprietà "decorazione del testo". La famiglia del carattere è "algerina". La "famiglia di font" del paragrafo è "Times New Roman". Il "font-peso" è "audace" e "marrone" il "colore". La "dimensione del carattere" che stiamo impostando qui è "20px" per il paragrafo e anche "corsivo" il carattere del paragrafo.
Ora, imposteremo il Div principale chiamato "contenuto di griglia". Per questo, il "display" che utilizziamo è la "griglia". Quindi, abbiamo la proprietà "Grid-Template-Column" che viene utilizzata per specificare il numero di colonne all'interno di una griglia. Mettiamo "Auto Auto Auto" come valore di questa proprietà, il che significa che la dimensione della colonna è impostata in base alla dimensione del contenitore. Qui, abbiamo tre colonne in questo layout della griglia.
Ora stiamo impostando separatamente il "Gap della griglia-colonna" e "Gap della griglia". Il "Gap della griglia-colonna" che stiamo impostando è "40px" e il "Gap della rete a griglia" è "20px". Il "colore di sfondo" del contenitore di div principale è "arancione" e l'imbottitura che usiamo qui è "10px". Questa proprietà di imbottitura viene utilizzata per generare lo spazio attorno al contenuto.
Ora, imposteremo il "div" della "griglia. contenitore "che rappresenta tutti i div presenti all'interno del div principale. Stiamo impostando il "colore di sfondo" dei div su "bianco" e il testo scritto all'interno di questi è allineato nel "centro". Dopo tutto questi, abbiamo la proprietà "imbottitura" in cui impostiamo l'imbottitura superiore e inferiore su "20px" e l'imbottitura destra sinistra è "0". La dimensione del carattere che è scritto all'interno di questi div è impostata su "30px". Ora, guarda lo screenshot di output sotto questo codice.
Qui, lo spazio o lo spazio tra le righe è "20px" e lo spazio tra le colonne è "40px" nello screenshot dato.
Esempio n. 2:
In questo esempio, abbiamo otto Div all'interno del Div principale "contenuto di griglia". Applicheremo la proprietà "GRID-GAP" a questo codice che è la proprietà shorthand su "Grid-Column-Gap" e "Grid-Row Gap". Imposteremo sia il gap della colonna che il gap di riga all'interno di questa proprietà "GRID-GAP".
Usiamo il "colore" dell'intestazione come "arancione" e "decorazione del testo" è impostato qui per "sottolineare". Inoltre, la "famiglia di carattere" è "algerina". Quindi, impostiamo la "griglia" per la proprietà "display" e nella "colonna a griglia-templata", stiamo usando quattro "auto" in modo da ottenere quattro colonne nell'output.
Successivamente, abbiamo la proprietà "GRID-GAP" in cui impostiamo le dimensioni dello spazio in "%" per le colonne e le file della griglia. Lo impostiamo su "5%", quindi creerà spazio del "5%" tra le colonne e "5%" tra le righe. Utilizziamo il "colore di sfondo" per "light-slate-grey" e la "imbottitura" è "10px" per questa "griglia. Ontainer ". Applichiamo il "colore di fondo" agli altri div in "RGBA (122, 240, 122, 0.8), che è "verde chiaro" e anche abbiamo un "0.Valore alfa da 8 ", quindi mostra una certa trasparenza.
Allineiamo il testo in "Centro" e la "imbottitura" per la "parte superiore" e "in basso" è "20px" e "0" è per l'imbottitura "sinistra" e "destra". La "dimensione del carattere" è "30px" in questo codice.
Nello screenshot indicato, ci sono quattro colonne e lo spazio tra le righe e le colonne è "5%", poiché abbiamo impostato questo nella proprietà "GAP GRID".
Esempio # 3:
Qui abbiamo dodici div in questo esempio e applicheremo la proprietà "GRID-GAP" su questi. Inoltre, imposteremo il valore di questa proprietà "GRID-GAP" in "PX" nel codice CSS.
Per il "corpo", utilizziamo l'attributo "allineamento del testo" e lo sistemiamo al "centro". Lo "stile del carattere" è "corsivo". Quindi, aggiungiamo il valore "griglia" per la proprietà "display". Usiamo quattro "auto" nella proprietà "Grid-Template-Column" per ottenere quattro colonne nell'output. Successivamente, abbiamo la proprietà "GRID-GAP", che ci consente di specificare le dimensioni dello spazio in "pixel" per le colonne e le righe della griglia. Lo impostiamo su "50px", il che significa che ci sarà "50px" di spazio tra le colonne e "50px" tra le righe. Il "colore di sfondo" è impostato su "rosa". Inoltre, creiamo un "bordo" per questo div principale che è impostato su "1px solido nero".
Qui, abbiamo "10px" della "imbottitura". Ora stiamo impostando il "colore di sfondo" dei Div interni in formato "RGBA" e separalo su "RGBA (204, 90, 90, 0.8) "che mostra la trasparenza per questo colore. Il valore di trasparenza qui è “0.8 ". La "imbottitura", la "dimensione del carattere" e la "famiglie di carattere" sono le stesse che abbiamo usato negli esempi sopra.
Ciò dimostra che abbiamo quattro colonne nell'uscita e anche lo spazio tra le righe della griglia e le colonne della griglia è "50px" qui.
Conclusione
L'obiettivo di questo tutorial è aiutarti a capire come utilizzare la proprietà "GRIG-GAP" CSS. In questo tutorial, abbiamo esaminato la proprietà CSS "Grid-Gap" e abbiamo descritto cosa significa la proprietà "Gap Grip", perché utilizziamo questa proprietà, come usarlo e come restituisce l'output. L'uso del "Grup-Gap" è già stato discusso qui. Abbiamo spiegato questa proprietà che abbiamo usato per impostare le dimensioni dello spazio tra le righe e le colonne della griglia. Abbiamo anche mostrato esempi su come utilizzare la proprietà "GRID-GAP", nonché i risultati di tutti gli esempi in questo tutorial.