CodeGym/Corsi/Frontend SELF IT/Tecniche avanzate di CSS Grid

Tecniche avanzate di CSS Grid

Disponibile

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):

CSS
/* 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 */
  }
}
HTML
<!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):

CSS
/* 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;
  }
}
HTML
<!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):

CSS
/* 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;
  }
}
HTML
<!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 100px per 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
1
Compito
Frontend SELF IT,  livello 28lezione 4
Bloccato
Layout adattivo
Layout adattivo
1
Compito
Frontend SELF IT,  livello 28lezione 4
Bloccato
Grid e media query
Grid e media query
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti