Una guida alla griglia CSS: padroneggiare i layout con le proprietà della griglia

Posizionare gli elementi su una pagina web può essere molto complicato quando si lavora con layout complessi. È qui che la griglia CSS torna utile. È un sistema di layout progettato per semplificare il processo di creazione di layout complessi.

Come ti aiuta? A differenza dei metodi di layout tradizionali che ti consentono solo di posizionare gli elementi in righe o colonne, la griglia CSS ti offre il meglio di entrambi i mondi: un approccio 2D che utilizza righe e colonne.

Contenitori e oggetti della griglia

Puoi applicare le proprietà della griglia CSS a due tipi principali di elementi: genitore e figli. Quando imposti la proprietà di visualizzazione su "griglia" per un elemento principale, trasforma quell'elemento in un contenitore di griglia. Qualsiasi elemento figlio all'interno di questo contenitore della griglia diventa un elemento della griglia, ereditando le proprietà della griglia applicate.

Ecco come viene rappresentato:

Un elemento della griglia può anche diventare un contenitore della griglia. Ora puoi fare riferimento al layout come a una griglia nidificata, ovvero una griglia all'interno di una griglia. Il contenitore della griglia principale viene ora chiamato griglia esterna, mentre il contenitore della griglia trasformato in oggetto diventa una griglia interna.

Ognuna di queste griglie funziona indipendentemente dall'altra, nel senso che le proprietà impostate per una griglia interna non influiscono sul layout della griglia esterna e viceversa.

Ecco come appare:

Padroneggiare la relazione tra i contenitori della griglia e gli elementi è essenziale realizzazione di layout bidimensionali effettivamente.

Tieni presente che esistono proprietà della griglia per i contenitori della griglia, mentre altre sono per gli elementi della griglia.

Linee e tracce della griglia

Prima di iniziare a utilizzare la griglia CSS, ci sono due termini chiave con cui dovresti avere familiarità:

1. Linee della griglia: Le linee della griglia si riferiscono alle linee orizzontali e verticali che formano la griglia in un layout a griglia CSS. Specificano i punti iniziale e finale di righe e colonne, aiutando a organizzare dove vanno le cose sulla griglia. Queste linee sono come i bordi delle scatole; hanno numeri che ti aiutano a fare riferimento agli elementi durante il posizionamento. Qui la linea tratteggiata rossa li rappresenta:
2. Tracce della griglia: Sono gli spazi tra le linee della griglia che definiscono righe e colonne. Sono come gli elementi costitutivi del layout della griglia. Nell'immagine sopra, l'area colorata all'interno di ciascun elemento rappresenta la traccia della griglia.

Pensa alle linee e alle tracce della griglia come agli elementi costitutivi di un layout di griglia, come le linee su un foglio di carta millimetrata. Quando una linea della griglia orizzontale si interseca con una linea della griglia verticale, forma una cella a forma di scatola. Queste celle fungono da contenitori in cui puoi posizionare gli elementi della griglia.

Proprietà del contenitore della griglia CSS

Queste sono proprietà che puoi applicare al contenitore della griglia per organizzare il layout e facilitare il posizionamento degli elementi al suo interno. Come accennato in precedenza, uno di questi è la proprietà display impostata su grid. Eccone altri:

Modello di griglia

Questa proprietà definisce la dimensione di righe e colonne. Puoi ridimensionare queste proprietà utilizzando pixel, percentuali o l'unità frazionaria (fr). Inoltre, puoi utilizzare parole chiave come auto, minimo Massimo(), E ripetere() per migliorare la flessibilità.

• righe-modello-griglia: imposta l'altezza delle righe.
• colonne-modello-griglia: Definisce la larghezza delle colonne.

Ecco alcuni esempi:

Utilizzo dei pixel:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Utilizzo delle percentuali:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Utilizzando fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Utilizzo delle parole chiave auto e minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Utilizzo di Repeat() per un dimensionamento coerente:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Aree di posizionamento automatico e modello di griglia

Posizionamento automatico: Il posizionamento automatico è come lasciare che sia la griglia a decidere dove posizionare gli elementi. Se non specifichi le posizioni esatte, la griglia posizionerà automaticamente gli elementi nell'ordine in cui appaiono nel markup. Ciò è utile quando hai molti elementi e vuoi che riempiano la griglia in modo uniforme.

Aree del modello di griglia: pensa alle aree del modello di griglia come alla creazione di un layout utilizzando zone con nome. È come nominare le stanze su una planimetria. È possibile fare riferimento a questi nomi di area quando si posizionano gli elementi della griglia. Ad esempio:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Questo layout è come una griglia con tre colonne e quattro righe. Sono presenti due righe per l'area del contenuto principale. Le aree etichettate includono "intestazione", "barra laterale", "contenuto" e "piè di pagina". Nelle sezioni successive imparerai come utilizzare queste etichette di area nelle proprietà di ciascun elemento della griglia.

Allineamento nella griglia CSS

È possibile utilizzare le proprietà di allineamento per controllare il posizionamento degli elementi della griglia all'interno delle celle della griglia. Le proprietà sono:

• giustificare gli elementi: controlla l'allineamento orizzontale degli elementi all'interno della cella della griglia.
  • Valori: inizio, fine, centro e allungamento.
• allineare-elementi: controlla l'allineamento verticale degli elementi all'interno della cella della griglia.
  • Valori: inizio, fine, centro e allungamento.
• giustificare il contenuto: Allinea l'intera griglia all'interno del contenitore lungo l'asse orizzontale.
  • Valori: inizio, fine, centro, allungamento, spazio in mezzo, spazio intorno e spazio uniforme.
• allineare-contenuto: Allinea l'intera griglia all'interno del contenitore lungo l'asse verticale.
  • Valori: inizio, fine, centro, allungamento, spazio in mezzo, spazio intorno e spazio uniforme.

Ecco un esempio:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

In questo esempio, gli elementi verranno centrati sia orizzontalmente che verticalmente all'interno delle celle. Lo spazio verrà distribuito uniformemente tra le colonne dell'intera griglia e la griglia verrà centrata verticalmente nel contenitore.

Divario della griglia

Lo spazio della griglia si riferisce allo spazio tra righe e colonne in un layout a griglia. Aiuta a creare una separazione visiva e aggiunge spazio tra gli elementi della griglia.

IL gap della griglia La proprietà consente di impostare lo spazio tra righe e colonne. Puoi utilizzare varie unità per definirlo, come pixel (px), percentuali (%), unità em (em) e altro.

.grid-container {
grid-gap: 20px;
}

In questo esempio, il contenitore della griglia ha due colonne con uno spazio di 20 pixel tra di loro. Questa spaziatura separa visivamente le colonne e migliora il layout.

Proprietà dell'elemento della griglia CSS

Ecco alcune proprietà chiave che controllano il comportamento dei singoli elementi della griglia all'interno di un layout di griglia CSS, insieme ad esempi:

inizio riga della griglia e fine riga della griglia:

• Definisce le righe di riga iniziale e finale per un articolo.
• I valori possono essere numeri di riga, "span n" o "auto".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Questo codice posiziona Elemento della griglia 1 dalla riga della seconda riga alla riga della quarta riga.

inizio-colonna-griglia e fine-colonna-griglia:

• Definisce le righe di colonna iniziale e finale per un articolo.
• I valori possono essere numeri di riga, "span n" o "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Questo codice posiziona Elemento della griglia 2 dalla riga della prima colonna alla riga della terza colonna.

area della griglia:

• Specifica la dimensione e la posizione di un elemento della griglia all'interno della griglia facendo riferimento alle linee della griglia con nome aree del modello di griglia.
• Come accennato in precedenza, i nomi delle aree predefinite sono già in uso con il file aree del modello di griglia proprietà. Ecco un esempio di come usarlo insieme a area della griglia.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Ecco il risultato:

giustificarsi:

• Allinea i singoli elementi orizzontalmente all'interno della cella.
• I valori possono essere inizio, fine, centro e allungamento.

.grid-item-5 {
justify-self: center;
}

Questo codice centra orizzontalmente il Elemento della griglia 5 all'interno della sua cella.

allinearsi:

• Allinea i singoli elementi verticalmente all'interno della cella.
• I valori possono essere inizio, fine, centro e allungamento.

.grid-item-1 {
align-self: end;
}

Questo codice si allinea Elemento della griglia 1 fino al fondo della sua cella.

Sentiti libero di combinare e personalizzare queste proprietà per creare il layout e l'aspetto che desideri per ogni elemento della griglia nella tua griglia CSS.

Creazione di layout reattivi utilizzando le griglie CSS

Utilizzo delle griglie CSS per creazione di layout reattivi è importante garantire che la tua pagina web si adatti perfettamente a diverse dimensioni di schermo e dispositivi. Puoi applicare questi metodi:

• Domande multimediali: È possibile utilizzare le query multimediali per applicare diversi layout di griglia a seconda delle dimensioni dello schermo. Ad esempio, potrebbe essere necessario riorganizzare gli elementi della griglia o regolare la larghezza delle colonne per schermi più piccoli.
• Unità flessibili: utilizza unità relative come percentuali e fr per consentire agli elementi della griglia e alle colonne di adattarsi proporzionalmente allo spazio disponibile.
• minimo Massimo(): Usa il minimo Massimo() funzione per specificare un intervallo di dimensioni per le colonne o le righe della griglia. Garantisce che gli elementi non appaiano troppo piccoli o troppo grandi su schermi diversi.

Ricorda di regolare le colonne e altri elementi come gli spazi tra gli elementi della griglia, le dimensioni dei caratteri e i margini. Garantisce un layout coerente e ben progettato che funziona bene su vari dispositivi.

Esplora le possibilità del layout della griglia CSS

Abbracciare la flessibilità e la potenza della griglia CSS ti consentirà di creare layout che non solo hanno un bell'aspetto, ma si adattano perfettamente alle esigenze del web design moderno. Quindi, tuffati nel mondo delle griglie, esplora le possibilità e migliora le tue capacità di sviluppo web.

Mentre approfondisci i sistemi di layout, potresti voler confrontare altri metodi di layout con le griglie CSS. Puoi farlo con il modulo CSS Flexbox. Questo ti aiuterà a imparare a decidere quando lavorare su un progetto.