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

bookChallenge: 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

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.
index.html

index.html

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

bookChallenge: 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

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.
index.html

index.html

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6
some-alt