Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara 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>

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 6
some-alt