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.
index.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.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 4. ChapterΒ 6
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Suggested prompts:
Can you show me the HTML structure that needs the Tailwind classes?
Where exactly should I add these Tailwind classes in the HTML?
Do you need an explanation of what each Tailwind class does?
Awesome!
Completion rate improved to 3.57Challenge: Grid Layout Mastery
Swipe to show menu
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.
index.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.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 4. ChapterΒ 6
