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

Kursinnhold

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

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6
Vi beklager at noe gikk galt. Hva skjedde?
some-alt