Come creare un layout di un sito web del Santo Graal usando CSS Grid
Le seguenti istruzioni descrivono come implementare il layout del Santo Graal con CSS Grid.
Configurazione di base
Crea un documento HTML minimo. In un editor di testo o html, inserisci il seguente codice.
HTML minimo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
Hello, world
</body>
</html>
Salva il file come index.html.
Apri index.html in un browser web. Per aprire il file in una nuova scheda del browser Web, premere Ctrl+oh (Comando+oh su macOS), quindi seleziona index.html. Puoi anche trascinare index.html su una finestra del browser.
CSS minimo
Crea un nuovo file di testo. Nel file vuoto, aggiungi il seguente codice.
html {
width: 100%; /* 100% width of parent (root) element */
height: 100vh; /* 100% height of viewport */
background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
font-size: 1.0em; /* root font size */
}
body {
margin: 0; /* no margin at edge of content */
height: 100%; /* 100% height of parent (html) element */
}
Salva questo foglio di stile come index.css nella stessa posizione di index.html.
La larghezza dell’elemento html è definita come 100% (dello spazio orizzontale disponibile), per tenere conto della possibilità di una barra di scorrimento verticale visualizzata. Se l’elemento html è 100vw (100% della larghezza del viewport), il contenuto della pagina può estendersi sotto ed essere nascosto dalla barra di scorrimento verticale.
In index.html, aggiungi la seguente riga nell’elemento
.<link rel="stylesheet" href="https://www.computerhope.com/issues/ch002064.htm/index.css">
Per esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="https://www.computerhope.com/issues/ch002064.htm/index.css">
</head>
<body>
Hello, world
</body>
</html>
Ricarica index.html nel browser. Notare che lo sfondo è grigio chiaro e il contenuto “Hello, world” tocca il bordo superiore sinistro della finestra.
Definisci la griglia
Aggiungi le seguenti righe a index.css.
Contenitore griglia CSS
div.container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
grid-template-areas:
"head head head"
"panleft mainbody panright"
"foot foot foot";
}
Il contenitore della griglia è l’elemento padre della griglia. I suoi attributi si applicano all’intera griglia.
Di seguito è riportata una descrizione degli stili del contenitore della griglia utilizzati qui.
| CSS | Descrizione |
|---|---|
| div.container { stile…} |
Applicare gli stili elencati tra parentesi quadre a qualsiasi elemento nell’HTML che ha la classe contenitore, ad esempio:
<div class="container ..."> Il contenitore del nome della classe è arbitrario. |
| visualizzazione: griglia; |
Imposta questo elemento come genitore di una nuova griglia. Tutti gli elementi nella griglia vengono visualizzati nel contorno della casella di questo elemento. |
| larghezza: 100%; altezza: 100%; |
Imposta il limite del riquadro dell’elemento al 100% della larghezza e dell’altezza dell’elemento padre ( |
| colonne-modello-griglia: 1fr 2fr 1fr; righe-modello-griglia: 1fr 3fr 1fr; |
Definire le tre larghezze di colonna predefinite della griglia, da sinistra a destra, e tre altezze di riga predefinite, dall’alto verso il basso. L’unità fr (“unità frazionaria”) è speciale per gli elementi CSS Grid. Il valore di fr è calcolato come la larghezza della griglia (per le colonne), o l’altezza (per le righe), divisa per le unità fr totali richieste. Ad esempio, in una griglia larga 300 pixel con tre colonne definite come 1fr, 2fr e 3fr, le larghezze delle colonne sono 50, 100 e 150 pixel. Una colonna di nfr è sempre n volte più larga di una colonna di 1fr. In questo layout, l’elemento centrale (il corpo principale) è il doppio della larghezza (2fr) di ciascun pannello e il triplo dell’altezza (3fr) dell’intestazione e del piè di pagina. I pannelli sono 1/(1+2+1)=1/4 della larghezza della griglia. L’intestazione e il piè di pagina sono 1/(1+3+1)=1/5 dell’altezza della griglia. |
| aree-modello-griglia: “testa testa testa” “panleft corpo principale panright” “piede piede piede”; |
L’attributo grid-template-areas è costituito da una serie di stringhe tra virgolette, una per ogni riga della griglia. Ogni stringa contiene una parola per colonna nella griglia. Ogni parola è il nome dell’area della griglia che occupa quella cella nella griglia. Se un nome viene ripetuto, l’area denominata si estende su quelle celle della griglia. Le celle espanse devono formare un rettangolo. Il nostro codice CSS dice: “tutte e tre le celle nella prima riga costituiscono l’area della griglia principale. La riga successiva ha un’area denominata panleft nella colonna di sinistra, mainbody nella colonna centrale e panright nella colonna di destra. Tutte e tre le celle di la riga inferiore costituisce l’area denominata piede.” Nota che le stringhe sono delimitate da uno spazio o da una nuova riga, non da una virgola. |
Elemento della griglia CSS
Ogni elemento della griglia occupa un’area della griglia denominata. Un’area della griglia è una o più celle adiacenti che formano un rettangolo, come indicato nel modello del contenitore della griglia.
Il layout del Santo Graal ha cinque aree della griglia: l’intestazione (area testa), il pannello sinistro (area pansinistra), il corpo principale (area mainbody), il pannello destro (area panright) e il piè di pagina (area piedi). Aggiungi le seguenti righe a index.css alla fine del file.
div.header {
background: rgb(0, 0, 0, 0.2); /* 20% black */
grid-area: head; /* head corresponds to name in template */
}
div.footer {
background: rgb(0, 0, 0, 0.2);
grid-area: foot;
}
div.panel { /* div elements with "panel" class */
background: rgb(0, 0, 0, 0.1); /* 10% black */
}
div.panel.left { /* with both "panel" and "left" class */
grid-area: panleft;
}
div.panel.right {
grid-area: panright;
}
div.mainbody {
grid-area: mainbody;
}
Salva index.css.
Elementi HTML della griglia
Aggiungi cinque elementi
<body>
<div class="container">
<div class="header">Header</div>
<div class="panel left">Left panel</div>
<div class="mainbody">Main body</div>
<div class="panel right">Right panel</div>
<div class="footer">Footer</div>
</div>
</body>
Salva index.html. Ricarica index.html nel browser per testare la griglia.
Ridimensiona la finestra del browser e le proporzioni della griglia si adattano alle dimensioni della finestra.
Imposta la dimensione delle aree della griglia
Assegna un’altezza all’intestazione e al piè di pagina e una larghezza ai pannelli.
Apri index.css e trova queste due righe.
grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr;
Sostituirli con le seguenti righe:
grid-template-columns: 10rem auto 10rem; grid-template-rows: 5rem auto 5rem;
Salva index.css.
La larghezza predefinita dei pannelli laterali ora è 10 rem e l’altezza predefinita dell’intestazione e del piè di pagina è 5 rem. Il corpo principale (l’area della griglia centrale) è impostato su automatico, il che significa che le dimensioni occupano tutto lo spazio disponibile.
L’unità rem (“root em”) si basa sulla dimensione del carattere radice del documento. In questo esempio, è definito in index.css, nello stile dell’elemento html:
html {
...
font-size: 1.0em;
L’unità rem è uguale a questo valore em. Ad esempio, html { font-size: 1.2em; } scalerebbe tutte le dimensioni espresse in rem del 120% del loro valore predefinito.
La dimensione esatta dell’unità em dipende dal carattere. Come regola generale, 1em equivale a 16 pixel.
Ricarica index.html nel browser e ridimensiona la finestra. L’intestazione e il piè di pagina rimangono un’altezza fissa e i pannelli rimangono una larghezza fissa.
Imposta il ridimensionamento mobile
Le pagine Web moderne dovrebbero essere progettate prima per i dispositivi mobili, il che significa che il design dovrebbe dare la priorità a come appaiono sui dispositivi mobili.
Utilizzando gli strumenti di sviluppo del browser, il documento può essere visualizzato come su un dispositivo mobile.
In Chrome, premi Ctrl+Spostare+ioe fai clic sul pulsante Attiva/disattiva dispositivo nella barra degli strumenti.
In Firefox, premere Ctrl+Spostare+ohe fare clic sul pulsante Modalità Responsive Design.
Per impostazione predefinita, il ridimensionamento è molto ridotto sui dispositivi mobili.
Per rendere leggibile il testo sui dispositivi mobili, aggiungi questa riga nell’elemento
di index.html.<meta name="viewport" content="width=device-width, initial-scale=1">
Questa riga indica al browser di regolare la scala in base al dispositivo che visualizza la pagina.
Ricarica l’anteprima mobile.
Il testo ridimensionato è più leggibile, coerente con un browser desktop.
Tuttavia, c’è un nuovo problema. I pannelli a larghezza fissa “schiacciano” il corpo principale. In modalità verticale su un dispositivo mobile, non c’è spazio per i pannelli. I passaggi nelle sezioni seguenti risolvono questo problema.
Rendilo reattivo
Quando si definisce il modello di griglia, è possibile assegnare nomi alle linee della griglia.
Le linee della griglia formano i confini di ogni riga e colonna, compreso il bordo della griglia. Una griglia con x colonne e y righe ha x+1 righe di colonna, y+1 righe di riga e x+y+2 righe di griglia totali.
Attualmente, la nostra griglia ha l’aspetto del diagramma seguente.
La griglia contiene tre colonne, definite dalle dimensioni delle colonne.
grid-template-columns: 10rem auto 10rem;
Facoltativamente, questa definizione può contenere anche nomi di riga.
Assegna i nomi delle linee della griglia
Nella definizione del modello, i nomi delle righe sono racchiusi tra parentesi. Possono essere specificati prima, tra o dopo un valore di dimensione.
In index.css, cambia il valore di grid-template-columns come segue.
grid-template-columns: [left] 10rem auto 10rem [right];
I nomi a sinistra ea destra ora si riferiscono alle linee di confine verticali della griglia.
Questi nomi possono ridefinire il bordo di un’area della griglia, come descritto nella sezione successiva.
CSS condizionale con una media query
Una media query è un blocco CSS condizionale creato con la parola chiave @media CSS. Gli stili in un blocco @media vengono applicati solo quando le condizioni specificate sul dispositivo di visualizzazione sono vere.
Le media query possono applicare stili in base alla dimensione del viewport, quindi se l’utente ridimensiona la finestra del browser o ruota il telefono, il CSS risponde di conseguenza.
La forma generale di una media query è:
@media media-type and (media-feature-rule) {
style ...
}
Aggiungi la seguente media query alla fine di index.css.
@media screen and (max-width: 50rem) { /* if viewport width < 50rem */
div.panel.left {
grid-column-end: left; /* left panel stops at left edge */
}
div.panel.right {
grid-column-start: right; /* right panel starts at right edge */
}
div.panel {
display: none; /* neither panel is displayed */
}
div.mainbody {
grid-column-start: left; /* mainbody starts at left edge */
grid-column-end: right; /* mainbody ends at right edge */
}
}
Salva index.css. Ricarica index.html nel browser e ridimensiona la finestra. Quando la finestra diventa più stretta di 50 rem (circa 800 pixel), i pannelli scompaiono e il corpo principale si espande per coprire tutte e tre le colonne.
Sui dispositivi mobili, i pannelli vengono visualizzati solo in modalità orizzontale.
Quando il dispositivo mobile viene ruotato in modalità verticale, i pannelli sono nascosti e il corpo principale copre la larghezza del dispositivo.
CSS e HTML finali
Il CSS finale aggiunge tre funzionalità aggiuntive.
- Il contenitore della griglia ha un’altezza minima, impedendo il completo collasso del piè di pagina e dell’intestazione.
- La larghezza dell’elemento del corpo principale è fissa, impedendo il riflusso del contenuto del corpo.
- L’elemento del corpo principale è giustificato al centro nella sua area della griglia.
Indice finale.css
html {
width: 100%; /* 100% width of parent (root) element */
height: 100vh; /* 100% height of viewport */
background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
font-size: 1.0em; /* our root font size */
}
body {
margin: 0; /* content goes to edge of viewport */
height: 100vh; /* and spans height of viewport */
}
div.container {
min-height: 25rem; /* mainbody height never squishes < 25rem */
display: grid;
width: 100%;
height: 100%;
grid-template-columns:
[left] 10rem auto 10rem [right];
grid-template-rows:
[top] 5rem auto 5rem [bottom];
grid-template-areas:
"head head head"
"panleft mainbody panright"
"foot foot foot";
}
div.header {
background: rgb(0, 0, 0, 0.2); /* 20% black */
grid-area: head; /* head corresponds to name in template */
}
div.footer {
background: rgb(0, 0, 0, 0.2);
grid-area: foot;
}
div.panel { /* div elements with "panel" class */
background: rgb(0, 0, 0, 0.1); /* 10% black */
}
div.panel.left { /* with both "panel" and "left" class */
grid-area: panleft;
}
div.panel.right {
grid-area: panright;
}
div.mainbody {
grid-area: mainbody;
width: 30rem; /* mainbody width is fixed *\/justify-self: center; /* and always centered in grid area */
}
@media screen and (max-width: 50rem) { /* if viewport width < 50rem */
div.panel.left {
grid-column-end: left; /* left panel stops at left edge */
}
div.panel.right {
grid-column-start: right; /* right panel starts at right edge */
}
div.panel {
display: none; /* neither panel is displayed */
}
div.mainbody {
grid-column-start: left; /* mainbody starts at left edge */
grid-column-end: right; /* mainbody ends at right edge */
}
}
index.html finale
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="panel left">Left panel</div>
<div class="mainbody">Main Body</div>
<div class="panel right content">Right panel</div>
<div class="footer">Footer</div>
</div>
</body>
</html>