Home esercizi css multicolumn layout

Esercizi Layout Multicolonna CSS

Esplora come creare layout a più colonne per il tuo contenuto utilizzando le regole CSS. Allenati nella creazione di colonne affiancate per un design moderno e organizzato.

Esercizio 1

Crea una pagina HTML con un paragrafo. Applica un layout multicolonna CSS al paragrafo in modo che sia diviso in tre colonne con larghezza uguale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        column-count: 3;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla
      tortor ac justo elementum, at aliquam arcu malesuada.
    </p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista non ordinata contenente cinque elementi di lista. Applica un layout multicolonna CSS alla lista in modo che sia divisa in due colonne con larghezza uguale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      ul {
        column-count: 2;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ul>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un paragrafo Applica un layout multicolonna CSS al paragrafo in modo che sia diviso in due colonne, ognuna larga il 50% del contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      p {
        column-width: 50%;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla
      tortor ac justo elementum, at aliquam arcu malesuada.
    </p>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata contenente dieci elementi di lista. Applica un layout multicolonna CSS alla lista in modo che sia divisa in tre colonne, ognuna larga il 33% del contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      ul {
        column-width: 33%;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
      <li>Elemento 6</li>
      <li>Elemento 7</li>
      <li>Elemento 8</li>
      <li>Elemento 9</li>
      <li>Elemento 10</li>
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un paragrafo. Applica un layout multicolonna CSS al paragrafo in modo che sia diviso in tre colonne, ognuna alta 100 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      p {
        column-height: 100px;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla
      tortor ac justo elementum, at aliquam arcu malesuada. Nulla facilisi.
    </p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con una lista non ordinata contenente dieci elementi di lista. Applica un layout multicolonna CSS alla lista in modo che sia divisa in quattro colonne con larghezza uguale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      ul {
        column-count: 4;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
      <li>Elemento 6</li>
      <li>Elemento 7</li>
      <li>Elemento 8</li>
      <li>Elemento 9</li>
      <li>Elemento 10</li>
    </ul>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un paragrafo. Applica un layout multicolonna CSS al paragrafo in modo che sia diviso in due colonne con spazio tra le colonne di 20 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      p {
        column-gap: 20px;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla
      tortor ac justo elementum, at aliquam arcu malesuada. Nulla facilisi.
    </p>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata contenente cinque elementi di lista. Applica un layout multicolonna CSS alla lista in modo che sia divisa in tre colonne con spazio tra le colonne di 10 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      ul {
        column-count: 3;
        column-gap: 10px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ul>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un paragrafo. Applica un layout multicolonna CSS al paragrafo in modo che sia diviso in quattro colonne con spazio tra le colonne di 5 pixel e altezza di 150 pixel per colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      p {
        column-count: 4;
        column-gap: 5px;
        column-height: 150px;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla
      tortor ac justo elementum, at aliquam arcu malesuada. Nulla facilisi.
    </p>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con una lista non ordinata contenente dieci elementi di lista. Applica un layout multicolonna CSS alla lista in modo che sia divisa in tre colonne con spazio tra le colonne di 15 pixel e altezza di 120 pixel per colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      ul {
        column-count: 3;
        column-gap: 15px;
        column-height: 120px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
      <li>Elemento 6</li>
      <li>Elemento 7</li>
      <li>Elemento 8</li>
      <li>Elemento 9</li>
      <li>Elemento 10</li>
    </ul>
  </body>
</html>