Conteúdo do Curso
Tailwind CSS for Web Development
Tailwind CSS for Web Development
1. Introduction and Setup
3. Building Basic Components
5. Responsiveness and Customization
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.
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
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 6