Ejercicio de programación con TailwindCSS: Grid en Tailwind CSS
Código
Aprende a crear un layout utilizando el sistema de grid de Tailwind CSS 3.4.10. Este ejercicio te enseñará a definir contenedores grid, columnas y aplicar gaps entre elementos.
Crea una página HTML con CDN que utilice Tailwind CSS para definir un contenedor grid con las siguientes características:
- El contenedor debe tener 4 columnas.
- Debe haber un espacio uniforme de
1rem(16px) entre todas las celdas. - Debe contener 8 elementos hijos (
div) con el siguiente contenido de texto: "Item 1", "Item 2", ..., "Item 8". - Cada elemento debe tener un fondo azul.
Todos los ejercicios de programación de TailwindCSS
Evalúa tus conocimientos con ejercicios de programación en TailwindCSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Fundamentos del diseño responsive en Tailwind CSS
Código
Instalación de Tailwind CSS
Código
Contenedores y columnas en Tailwind CSS
Código
Conocimiento general de Tailwind CSS - Evaluación código
Código
Utilidades de espaciado y alineación en Tailwind CSS
Puzzle
Introducción a Tailwind CSS
Test
Clases de bordes de Tailwind CSS
Código
Clases de colores y fondo de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Flexbox en Tailwind CSS
Puzzle
Clases de tamaño de Tailwind CSS
Puzzle
Hover, focus y estado de Tailwind CSS
Código
Conocimiento general de Tailwind CSS - Evaluación multirespuesta
Test
Fundamentos del sistema de Utility-First de Tailwind CSS
Test
Transiciones y animaciones de Tailwind CSS
Código
Tutorial para resolver este ejercicio de programación
TailwindCSS
Grid en Tailwind CSS
Layout