Alineación de Elementos con CSS Grid y Flexbox

Completar un proyecto de CSS Grid implica dominar las propiedades de alineamiento, transformación y modos de escritura que permiten ubicar cada elemento exactamente donde lo necesitas. En esta fase final se trabajan los tres elementos restantes: un texto grande centrado, un cuadrado de color y un texto rotado verticalmente, todo usando las herramientas que ofrece grid.

¿Cómo centrar un texto dentro de una celda con CSS Grid?

El sexto elemento del proyecto corresponde al texto "CSS Grid", que debe quedar completamente centrado dentro de su celda. Para lograrlo se siguen varios pasos clave.

Primero, se define la posición del elemento usando grid-column y grid-row [01:17]. En este caso, el texto debe ocupar desde la línea 6 hasta la 9 en columnas y de la 3 a la 5 en filas:

css .item-6 { font-size: 40px; grid-column: 6 / 9; grid-row: 3 / 5; }

Sin embargo, el texto no queda perfectamente centrado solo con eso. Aquí entra un concepto fundamental: un hijo también puede ser padre. Al agregarle display: grid al elemento hijo, este se convierte en un contenedor grid y puede usar propiedades de alineamiento sobre su propio contenido [01:52].

css .item-6 { display: grid; justify-items: center; align-items: center; }

• justify-items: center alinea el contenido de forma horizontal.
• align-items: center lo alinea de forma vertical.

¿Por qué eliminar el margen por defecto de las etiquetas P?

Las etiquetas <p> traen un margin por defecto que puede generar interferencias visuales [02:28]. Para corregirlo basta con eliminar ese margen:

css .item-6 p { margin: 0; }

Esto garantiza que el elemento se visualice limpio, sin espacio adicional que desplace el texto de su posición centrada.

¿Cómo posicionar un cuadrado en una celda específica del grid?

El séptimo elemento es un pequeño cuadrado de color hot pink que ocupa una sola celda. Se posiciona contando las líneas del grid: de la línea 3 a la 4 tanto en columna como en fila [03:06].

css .item-7 { background: hotpink; grid-column: 3 / 4; grid-row: 3 / 4; }

Un detalle importante mencionado durante la práctica: escribir mal un selector hace que las reglas CSS simplemente no se apliquen [03:40]. Revisar la ortografía de clases y selectores es un paso de depuración básico pero frecuentemente olvidado.

¿Cómo rotar texto verticalmente usando writing-mode y transform?

El octavo elemento es un texto que debe mostrarse en orientación vertical, leyéndose de arriba hacia abajo. Para posicionarlo se usa grid-column-start sin necesidad de definir dónde termina, y grid-row de la línea 2 a la 4 [04:12].

css .item-8 { font-size: 20px; display: grid; grid-column-start: 4; grid-row: 2 / 4; }

¿Qué diferencia hay entre transform rotate y writing-mode?

La propiedad transform: rotate() gira el elemento completo un número determinado de grados [04:48]. Se puede experimentar con valores como 90, 60 o 180 grados. Sin embargo, para cambiar la dirección de lectura del texto resulta más adecuado usar writing-mode: vertical-lr [05:08], que modifica el sistema de escritura para que fluya verticalmente:

css .item-8 { writing-mode: vertical-lr; justify-items: center; align-items: center; }

• writing-mode cambia la orientación del flujo de texto.
• Combinado con justify-items y align-items, el texto queda centrado dentro de su celda.

Una consideración práctica que se destaca es el comportamiento responsivo [05:52]: dependiendo del ancho de la pantalla, los elementos pueden verse diferentes. Lo que luce perfecto en una proporción casi cuadrada podría estirarse o comprimirse en otra. Esta variabilidad es parte natural del diseño web y conecta directamente con la fase de diseño responsivo.

La creatividad juega un papel central en este tipo de proyectos. Una vez que dominas la ubicación, el centrado y la rotación de elementos, las posibilidades se multiplican: agregar biografías, frases, cuadros decorativos o cualquier elemento que enriquezca tu composición. Si completaste tu versión del proyecto, compártela en los comentarios para que la comunidad pueda ver tu resultado.