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

Cursusinhoud

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

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 6
Onze excuses dat er iets mis is gegaan. Wat is er gebeurd?
some-alt