Challenge: Grid Layout Mastery
Task
Complete the HTML structure by adding the missing Tailwind CSS classes to meet the layout requirements.
Grid container: Define a grid with three columns and a gap of 1rem (16px) between items;
First item: Span across two columns;
Second item: Span across one column;
Third item: Span across all three columns.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Grid Utilities - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="_____ _____ _____">
<div class="_____ bg-blue-700 text-white p-4">Item 1</div>
<div class="_____ bg-green-700 text-white p-4">Item 2</div>
<div class="_____ bg-red-700 text-white p-4">Item 3</div>
</div>
</body>
</html>
For the grid container, use
grid grid-cols-3 gap-4;For the first item, use
col-span-2;For the second item, use
col-span-1;For the third item, use
col-span-3.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Grid Utilities - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-blue-700 p-4">Item 1</div>
<div class="col-span-1 bg-green-700 p-4">Item 2</div>
<div class="col-span-3 bg-red-700 p-4">Item 3</div>
</div>
</body>
</html>
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 6
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
