Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Challenge: Grid Layout Mastery | Layout Basics
Tailwind CSS for Web Development

book
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.

html

index.html

copy
<!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 .

html

index.html

copy
<!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?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

some-alt