Esercizi Grid Layout CSS
Codegrind Team•Jul 16 2023
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>