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>