CSS Grid es la tecnología de CSS que te permite organizar elementos en filas y columnas al mismo tiempo, algo que con Flexbox no podías hacer porque solo manejas una dimensión. Si estás aprendiendo a maquetar interfaces como un videojuego en el navegador, dominar Grid te da el control total sobre el layout.

En el proyecto Mokepon, vas a usar Grid para separar los ataques del jugador y del enemigo en dos columnas independientes, en lugar de tenerlos apilados en una sola fila.

¿Qué es CSS Grid y en qué se diferencia de Flexbox?

Grid es una tecnología de CSS que crea rejillas bidimensionales: filas y columnas trabajando juntas. Esa es su gran ventaja frente a Flexbox.

¿Cuándo uso Grid en lugar de Flexbox? Usa Grid cuando necesitas controlar filas y columnas a la vez. Usa Flexbox cuando solo te importa una dirección, ya sea horizontal o vertical.

Al igual que con Flexbox, en Grid existe una relación clara entre elemento padre y elementos hijos. El padre recibe la propiedad display: grid y los hijos se acomodan automáticamente dentro de la rejilla que definas.

¿Cómo organizo el HTML antes de aplicar Grid?

Antes de tocar CSS, tu marcado tiene que reflejar la estructura visual que quieres lograr. En el caso del proyecto, partes de un contenedor con cuatro hijos sueltos y los reorganizas en dos hijos: uno para el jugador y otro para el enemigo.

Dentro de cada hijo defines este orden, siguiendo el dibujo del layout:

• Un párrafo con las vidas.
• Un párrafo con el nombre del Mokepon.
• El bloque de ataques correspondiente.

Cuando colapsas los div en el editor, deberías ver claramente al padre con sus dos hijos. Ese chequeo visual te ahorra dolores de cabeza al aplicar las propiedades [03:30].

¿Cómo activar CSS Grid con display grid?

Para empezar, le asignas una clase al contenedor padre, por ejemplo ataques, y en el archivo CSS aplicas la propiedad clave:

css .ataques { display: grid; }

Con esa sola línea le dices al navegador: quiero trabajar con Grid en este contenedor. Las DevTools del navegador te muestran una etiqueta Grid junto al elemento, lo que te permite visualizar la rejilla y las líneas numeradas que la componen [07:30].

¿Qué hace display grid exactamente? Convierte al elemento en un contenedor de rejilla y a sus hijos directos en items que puedes posicionar en filas y columnas.

¿Cómo defino dos columnas con grid template columns?

La propiedad grid-template-columns define cuántas columnas tiene tu rejilla y de qué tamaño es cada una. Cada valor que escribes representa una columna.

css .ataques { display: grid; grid-template-columns: 100px 100px; }

En este ejemplo creas dos columnas de 100 píxeles cada una. Si quisieras tres, agregas un tercer valor. Así de directo. Al guardar y recargar, los ataques del jugador quedan a la izquierda y los del enemigo a la derecha, justo como en el diseño original.

¿Qué recursos te ayudan a practicar Grid y Flexbox?

Leer la teoría no basta. Estas herramientas son las que de verdad te ayudan a interiorizar cómo funciona la rejilla:

• Guía de CSS Grid en CSS Tricks: lista completa de propiedades para padre e hijos, con ejemplos visuales.
• CSS Grid Garden: un juego donde riegas zanahorias en una huerta usando propiedades reales de Grid, nivel por nivel.
• Flexbox Froggy: el equivalente para Flexbox, donde mueves una ranita a su hoja escribiendo propiedades de Flex.

Y aquí viene lo interesante: la guía de CSS Tricks separa claramente las propiedades del padre de las del hijo. Esa distinción es la que más confunde al principio, así que tenerla a mano evita errores comunes [06:00].

¿Por qué importan las líneas de la rejilla?

Cuando activas la vista de Grid en DevTools, el navegador numera cada línea horizontal y vertical. Esos números no son decorativos: te sirven para posicionar elementos específicos dentro de celdas concretas usando propiedades como grid-column o grid-row. Es la base para layouts más complejos que verás más adelante.

Tu reto con CSS Grid

Ahora que tus ataques están en dos columnas, falta un detalle estético: centrar horizontalmente los textos dentro de cada columna. La pista está en la sección de tipografía de la guía de CSS Reference que viste en clases anteriores.

Cuéntame en los comentarios qué propiedad usaste y cómo te quedó el resultado.