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

Course Content

Tailwind CSS for Web Development

Tailwind CSS for Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

book
Challenge: Grid Utilities

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

css

index

js

index

copy
  • 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

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 6
We're sorry to hear that something went wrong. What happened?
some-alt