Proprietà CSS relative al layout a griglia
Questo articolo spiega le proprietà CSS relative al layout a griglia.
Puoi imparare come descrivere la griglia e la griglia in linea.
YouTube Video
HTML per Anteprima
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>Layout a Griglia
grid
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}Una griglia è un sistema di layout per allineare gli elementi in righe e colonne bidimensionali. Utilizzando una griglia, è possibile creare facilmente e in modo flessibile layout complessi che erano difficili con i metodi tradizionali float o position. Mentre il flexbox eccelle nei layout monodimensionali, la griglia è adatta ai layout bidimensionali.
- La classe
grid-boxapplica un layout a griglia specificandogridnella proprietàdisplay. Questo elemento si chiama contenitore di griglia. - La proprietà
grid-template-columnsspecifica la larghezza delle colonne della griglia. In questo esempio, la prima colonna è di 100px, la seconda colonna è di 200px e la terza colonna occupa lo spazio rimanente (auto). - La proprietà
grid-template-rowsspecifica l'altezza delle righe della griglia. La prima riga è di 100px, la seconda riga è automatica (auto) e la terza riga ha un'altezza di 50px. - La proprietà
gapimposta la spaziatura tra gli elementi della griglia. Aggiunta di 10px di spazio tra colonne e righe.
Terminologia di Base
- Un contenitore di griglia è un elemento con la proprietà
displayimpostata sugride i suoi figli diventano elementi della griglia. - Gli elementi della griglia sono gli elementi figli posizionati direttamente sotto un contenitore di griglia.
Proprietà principali della griglia
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}- Le proprietà
grid-template-columnsegrid-template-rowsdefiniscono la dimensione di ciascuna colonna e riga. - Si possono utilizzare unità come
pxe%, oltre afr(frazione) per specificare una proporzione dello spazio rimanente.- In questo esempio, ci sono tre colonne e la seconda colonna è larga il doppio delle altre.
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6
7.item {
8 grid-column: 2 / 4;
9 grid-row: 1 / 3;
10}grid-columnegrid-rowspecificano in quale colonna o riga verrà posizionato l'elemento della griglia.- In questo esempio, l'elemento occupa dalla 2ª colonna alla 4ª colonna e dalla 1ª riga alla 3ª riga.
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rowsegrid-auto-columnssono proprietà che controllano la dimensione di righe e colonne generate automaticamente quando le linee di layout della griglia o le colonne non sono esplicitamente definite.- In questo esempio, sono definite esplicitamente 2 righe e 2 colonne, ma se vengono aggiunti altri elementi, nuove righe o colonne saranno generate automaticamente in base a
grid-auto-rowsegrid-auto-columns.
- In questo esempio, sono definite esplicitamente 2 righe e 2 colonne, ma se vengono aggiunti altri elementi, nuove righe o colonne saranno generate automaticamente in base a
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- Allinea gli elementi della griglia orizzontalmente (
justify-items) e verticalmente (align-items).
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-areaspecifica in una sola volta in quale area del contenitore a griglia l'elemento della griglia dovrebbe essere posizionato.- In questo esempio, significa occupare dalla 1ª riga alla 3ª riga e dalla 2ª colonna alla 4ª colonna.
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gapaggiunge spazio tra colonne e righe. Puoi anche specificare individualmente la spaziatura tra colonne e righe utilizzandocolumn-gaperow-gap.
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flowè una proprietà che definisce la direzione in cui gli elementi sono disposti, sia per righe che per colonne.
Esempio di layout complessi
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10
11.grid-header {
12 grid-column: 1 / 4;
13 background-color: lightblue;
14}
15
16.grid-sidebar {
17 grid-column: 1 / 2;
18 grid-row: 2 / 3;
19 height: 100%;
20 background-color: lightslategray;
21 color: white;
22}
23
24.grid-content {
25 grid-column: 2 / 3;
26 grid-row: 2 / 3;
27 background-color: lightskyblue;
28}
29
30.grid-content p {
31 margin: 0;
32 padding: 0;
33 height: 260px;
34}
35
36.grid-ads {
37 grid-column: 3 / 4;
38 grid-row: 2 / 3;
39 height: 100%;
40 background-color: lightsteelblue;
41}
42
43.grid-footer {
44 grid-column: 1 / 4;
45 background-color: lightgray;
46}In questo modo, la griglia ti consente di creare un intero layout di una pagina web con un codice semplice.
- In questo esempio, ci sono tre colonne (barra laterale, contenuto principale e pubblicità) e tre righe (intestazione, contenuto e piè di pagina).
- L'intestazione e il piè di pagina occupano l'intera larghezza della pagina, con il contenuto al centro e la barra laterale e la pubblicità su entrambi i lati.
Vantaggi delle griglie
I vantaggi della griglia includono i seguenti punti:.
- Layout bidimensionale facile: Gestire il layout sia in righe che in colonne consente di ottenere layout complessi con meno codice.
- Compatibile con il design reattivo: Il sistema a griglia rende facile creare design adattivi che si adattano a diverse dimensioni dello schermo.
Proprietà gap
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}La proprietà gap viene utilizzata nei layout a griglia e nei layout flexbox per impostare lo spazio (gaps) tra gli elementi. Usando questa proprietà, puoi facilmente aggiungere spazio tra gli elementi figli.
- Nella classe
gap-grid-container, viene impostato un gap di30pxverticalmente e10pxorizzontalmente tra ogni elemento. Poiché una griglia a 3 colonne è creata congrid-template-columns, i gap vengono applicati verticalmente e orizzontalmente tra ogni elemento. Nella classegap-flex-container, viene applicato un gap di50pxtra i tre elementi del flexbox.
Sintassi di Base
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}- Il
row-gapspecifica il gap tra le righe. Questa è la spaziatura verticale nei layout a griglia o flex. - Il
column-gapspecifica il gap tra le colonne. Questa è la spaziatura orizzontale.
Se non vengono specificati due valori, un solo valore viene applicato sia al row-gap che al column-gap.
Vantaggi della proprietà gap
I benefici della proprietà gap includono i seguenti punti:.
- Impostazione semplice del gap: il codice per impostare i gap tra gli elementi figli diventa più semplice, eliminando la necessità di aggiungere margini o padding extra tra gli elementi.
- Adattamento flessibile: supporta facilmente un design responsive, consentendo regolazioni flessibili del design.
Proprietà grid-template-areas
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12
13.grid-template-areas-container div {
14 width: 100%;
15 height: 100%;
16}
17
18.grid-template-areas-header {
19 grid-area: header; /* Placed in the "header" area */
20 background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24 grid-area: sidebar; /* Placed in the "sidebar" area */
25 background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29 grid-area: content; /* Placed in the "content" area */
30 background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34 grid-area: footer; /* Placed in the "footer" area */
35 background-color: lightsteelblue;
36}La proprietà grid-template-areas offre un modo per nominare le aree all'interno di un contenitore a griglia e utilizzare quei nomi per posizionare facilmente gli elementi della griglia. Utilizzando questa proprietà si possono creare layout visivamente intuitivi.
Gli elementi posizionati nelle aree denominate tramite la proprietà grid-template-areas devono avere lo stesso nome assegnato con la proprietà grid-area. Anche se gli elementi occupano più celle, vengono posizionati automaticamente in modo corretto.
In questo esempio, la griglia viene creata come segue:.
- Nella prima riga, "header" è posizionato su due colonne.
- "Sidebar" è posizionato a sinistra e "content" a destra nella seconda riga.
- "Footer" è posizionato su due colonne nella terza riga.
Uso di base
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";Nella proprietà grid-template-areas, il nome dell'area è specificato per ogni riga. Posizionando gli elementi in regioni con nomi assegnati, si possono creare layout facilmente.
- In questo esempio, viene creata una griglia con 2 righe e 3 colonne, e ogni cella è nominata area1, area2, ecc.
Definire celle vuote usando .
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";Se vuoi avere celle vuote nel tuo layout, puoi rappresentarle usando un punto (.).
- Come in questo esempio, specificando un punto (.) tra sidebar e content, la seconda colonna diventa vuota.
Vantaggi della proprietà grid-template-areas
I vantaggi della proprietà grid-template-areas includono i seguenti punti:.
- Layout visivo: ti consente di esprimere visivamente il layout, rendendo più semplice comprendere il design.
- Facile movimento degli elementi: puoi regolare facilmente il layout degli elementi modificando le definizioni delle aree in CSS senza cambiare l'HTML.
Note
Quando utilizzi la proprietà grid-template-areas, è importante prestare attenzione ai seguenti punti:.
- Il numero di nomi in ogni riga deve corrispondere al numero di colonne definite.
- Assegnare lo stesso nome a più celle unirà quelle celle, ma quando viene assegnato a righe o colonne diverse, l'area deve essere quadrata.
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid è uno dei valori della proprietà display in CSS. Applicando questa proprietà, l'elemento si comporta come un contenitore a livello inline, creando internamente un contesto di formattazione a griglia. A differenza di display: grid, si comporta come un elemento inline nel flusso del documento.
Casi d'uso di inline-grid
inline-grid non è comune come grid, ma può essere utilizzato efficacemente in scenari specifici.
-
Griglia in un contesto inline: Utile quando desideri posizionare una griglia accanto a contenuti di testo o altri elementi inline. Ad esempio, è utile quando è necessaria una struttura a griglia per pulsanti, badge, etichette, ecc., ma desideri visualizzarla in modalità inline senza interrompere il flusso del testo.
-
Controllo del layout all'interno di elementi inline: Anche quando sono necessari layout complessi all'interno di elementi inline come link, pulsanti o span,
inline-gridpuò gestire la struttura interna con un layout a griglia, evitando la visualizzazione a blocco.
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>In questo caso, il pulsante visualizza icone e testo in una griglia, rimanendo inline nel flusso del documento.
- Componenti inline reattivi:
inline-gridpuò essere usato per piccoli componenti che fanno parte di contenuti inline e richiedono un layout a griglia. Ad esempio, è adatto per moduli inline, badge, etichette di prodotto, ecc., dove desideri regolare il layout con una griglia mantenendolo inline.
Allineamento e dimensionamento di inline-grid
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- Come altri elementi inline,
inline-gridrispetta l'allineamento verticale rispetto al contenuto circostante. Puoi controllare l'allineamento della griglia utilizzando la proprietàvertical-align.
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- Per quanto riguarda le dimensioni, un elemento
inline-gridoccupa solo la larghezza necessaria per il suo contenuto a griglia. Se necessario, puoi impostare esplicitamente la larghezza, l'altezza e le dimensioni minime/massime.
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}È anche possibile che il layout della griglia stessa determini la dimensione del contenitore inline-grid, e questa tendenza è maggiore quando si usano unità flessibili come fr, auto e percentuali.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.