Home esercizi css grid layout

Esercizi Grid Layout CSS

Metti alla prova la tua abilità nel creare layout complessi e flessibili utilizzando il grid layout in CSS. Pratica l’allineamento degli elementi in righe e colonne per ottenere una disposizione precisa del contenuto.

Esercizio 1

Crea una pagina HTML con una griglia CSS di 3 colonne e 2 righe. Ogni cella della griglia deve contenere un paragrafo con del testo di esempio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
      <div class="grid-item"><p>Cella 5</p></div>
      <div class="grid-item"><p>Cella 6</p></div>
    </div>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una griglia CSS di 2 colonne e 3 righe. Imposta la seconda colonna in modo che abbia una larghezza fissa di 200 pixel e il resto delle colonne si adatti in modo proporzionale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-rows: repeat(3, auto);
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
      <div class="grid-item"><p>Cella 5</p></div>
      <div class="grid-item"><p>Cella 6</p></div>
    </div>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con una griglia CSS di 4 colonne. Imposta la larghezza della terza colonna in modo che sia due volte più larga rispetto alle altre colonne.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }

      .grid-item:nth-child(3) {
        grid-column: span 2;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
    </div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una griglia CSS di 3 colonne. Fai in modo che gli elementi nella prima colonna abbiano una larghezza fissa di 100 pixel, mentre gli elementi nella seconda colonna si espandano per occupare lo spazio disponibile rimanente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
    </div>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una griglia CSS di 5 colonne. Imposta la larghezza della quarta colonna in modo che sia fissa a 150 pixel, mentre il resto delle colonne si adatta in modo proporzionale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }

      .grid-item:nth-child(4) {
        grid-column: span 1;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
      <div class="grid-item"><p>Cella 5</p></div>
    </div>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con una griglia CSS di 2 colonne e 2 righe. Imposta la seconda riga in modo che sia alta 200 pixel, mentre il resto delle righe si adatta in modo proporzionale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 200px;
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
    </div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una griglia CSS di 3 colonne e 3 righe. Imposta la dimensione delle celle della griglia in modo che siano alte 100 pixel e larghe 150 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 100px);
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
      <div class="grid-item"><p>Cella 5</p></div>
      <div class="grid-item"><p>Cella 6</p></div>
      <div class="grid-item"><p>Cella 7</p></div>
      <div class="grid-item"><p>Cella 8</p></div>
      <div class="grid-item"><p>Cella 9</p></div>
    </div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una griglia CSS di 4 colonne. Imposta la griglia in modo che tutte le celle abbiano una spaziatura di 20 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
    </div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con una griglia CSS di 5 colonne e 2 righe. Imposta la griglia in modo che tutte le colonne abbiano una larghezza fissa di 100 pixel e tutte le righe abbiano un'altezza fissa di 50 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(5, 100px);
        grid-template-rows: repeat(2, 50px);
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
      <div class="grid-item"><p>Cella 5</p></div>
      <div class="grid-item"><p>Cella 6</p></div>
    </div>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con una griglia CSS di 3 colonne e 3 righe. Imposta la prima riga in modo che sia alta 100 pixel e il resto delle righe si adatti in modo proporzionale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100px 1fr 1fr;
        gap: 10px;
      }

      .grid-item {
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item"><p>Cella 1</p></div>
      <div class="grid-item"><p>Cella 2</p></div>
      <div class="grid-item"><p>Cella 3</p></div>
      <div class="grid-item"><p>Cella 4</p></div>
      <div class="grid-item"><p>Cella 5</p></div>
      <div class="grid-item"><p>Cella 6</p></div>
    </div>
  </body>
</html>