Desafio: Domínio do Layout em Grid
Tarefa
Complete a estrutura HTML adicionando as classes Tailwind CSS que estão faltando para atender aos requisitos do layout.
- Container grid: Definir uma grade com três colunas e um espaçamento de 1rem (16px) entre os itens;
- Primeiro item: Abranger duas colunas;
- Segundo item: Abranger uma coluna;
- Terceiro item: Abranger todas as três colunas.
index.html
- Para o contêiner de grid, utilize
grid grid-cols-3 gap-4; - Para o primeiro item, utilize
col-span-2; - Para o segundo item, utilize
col-span-1; - Para o terceiro item, utilize
col-span-3.
index.html
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 6
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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.57
Desafio: Domínio do Layout em Grid
Deslize para mostrar o menu
Tarefa
Complete a estrutura HTML adicionando as classes Tailwind CSS que estão faltando para atender aos requisitos do layout.
- Container grid: Definir uma grade com três colunas e um espaçamento de 1rem (16px) entre os itens;
- Primeiro item: Abranger duas colunas;
- Segundo item: Abranger uma coluna;
- Terceiro item: Abranger todas as três colunas.
index.html
- Para o contêiner de grid, utilize
grid grid-cols-3 gap-4; - Para o primeiro item, utilize
col-span-2; - Para o segundo item, utilize
col-span-1; - Para o terceiro item, utilize
col-span-3.
index.html
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 6