10.1 Combinazione con media-query
CSS Grid Layout offre strumenti fantastici per creare layout complessi e adattivi. Combinare CSS Grid con media-query permette di creare layout che si adattano a varie dimensioni di schermo e dispositivi. Vediamo come utilizzare le media-query con CSS Grid per creare pagine web flessibili e adattive.
Concetti di base delle media-query
Le media-query permettono di applicare diversi stili CSS a seconda delle caratteristiche del dispositivo, come la larghezza dello schermo, l'altezza dello schermo, l'orientamento dello schermo e altro. In combinazione con CSS Grid, le media-query permettono di cambiare la struttura e la posizione degli elementi in base alle dimensioni dello schermo.
Sintassi delle media-query:
@media (condizione) {
/* Stili applicati quando la condizione è soddisfatta */
}
Dove «condizione» è la condizione per cui gli stili verranno applicati.
Più spesso vengono utilizzate condizioni legate alla larghezza dello schermo, come max-width e min-width.
10.2 Modifica del numero di colonne
Esempio di implementazione completa (modifica del numero di colonne a seconda della larghezza dello schermo):
/* Stile di base per tutti gli schermi */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Per schermi più larghi di 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Due colonne */
}
}
/* Per schermi più larghi di 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Tre colonne */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout adattivo con CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Spiegazione del codice:
- Stile di base: crea un container Grid con una colonna per tutti gli schermi
- Media-query per schermi più larghi di 600px: modifica il layout a due colonne
- Media-query per schermi più larghi di 900px: modifica il layout a tre colonne
10.3 Dipendenza dalla larghezza dello schermo
Esempio di implementazione completa (modifica della disposizione degli elementi in base alla larghezza dello schermo):
/* Stile di base per tutti gli schermi */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* Per schermi più larghi di 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Per schermi più larghi di 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posizionamento adattivo con CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Spiegazione del codice:
- Stile di base: crea un container Grid con quattro righe e una colonna per tutti gli schermi
- Media-query per schermi più larghi di 600px: modifica il layout a due colonne e cambia il posizionamento delle aree: l'intestazione occupa due colonne, il contenuto principale e la barra laterale occupano una colonna ciascuno, il footer occupa due colonne
- Media-query per schermi più larghi di 900px: modifica il layout a tre colonne e cambia il posizionamento delle aree: l'intestazione occupa tre colonne, il contenuto principale e la barra laterale occupano rispettivamente una e due colonne, il footer occupa tre colonne
10.4 Modifica delle dimensioni degli elementi
Esempio di implementazione completa (modifica delle dimensioni degli elementi in base alla larghezza dello schermo):
/* Stile di base per tutti gli schermi */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Per schermi più larghi di 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Per schermi più larghi di 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dimensioni adattive con CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Elemento 1</div>
<div class="grid-item item2">Elemento 2</div>
<div class="grid-item item3">Elemento 3</div>
<div class="grid-item item4">Elemento 4</div>
<div class="grid-item item5">Elemento 5</div>
<div class="grid-item item6">Elemento 6</div>
</div>
</body>
</html>
Spiegazione del codice:
- Stile di base: crea un container Grid con due colonne e righe automatiche di altezza
100pxper tutti gli schermi - Media-query per schermi più larghi di 600px: modifica il layout a tre colonne e aumenta l'altezza delle righe a
150px - Media-query per schermi più larghi di 900px: modifica il layout a quattro colonne e aumenta l'altezza delle righe a
200px
GO TO FULL VERSION