Dominar la ubicación individual de elementos dentro de una grid es lo que separa un diseño genérico de uno que refleja fielmente un mockup. Mientras que desde el contenedor podemos alinear todos los hijos de forma uniforme, las propiedades aplicadas directamente a cada ítem permiten colocar cada pieza exactamente donde el diseño lo requiere.
¿Por qué no basta con alinear desde el contenedor?
Cuando trabajamos únicamente con el contenedor padre, todos los elementos hijos comparten la misma regla de alineación: todos a la izquierda, todos centrados o todos a la derecha. En la práctica, los diseños reales combinan elementos en distintas posiciones dentro de la misma grid. Por eso necesitamos propiedades que se aplican a cada hijo de forma independiente [0:45].
Para ilustrarlo, se parte de un diseño mobile que debe replicarse tal cual. El primer paso, como siempre, es imaginarse la grid sobre el diseño: contar líneas de fila y de columna, asegurándose de que todas las líneas se toquen entre sí, tanto horizontal como verticalmente [1:15].
El código base del contenedor usa display: grid y grid-template-columns: repeat(2, 1fr) con un width de 60 píxeles. Las filas se generan de forma implícita al agregar más elementos. Cada ítem tiene un tamaño de 30 píxeles. Sin embargo, ese resultado no coincide con el diseño solicitado [1:40].
¿Cómo ubicar elementos con grid-column y grid-row?
Las propiedades se organizan en dos grupos principales que funcionan contando las líneas de la grid.
¿Cómo funciona grid-column?
grid-column-start: define en qué línea vertical comienza el elemento.grid-column-end: define en qué línea vertical termina.grid-column: es la abreviación que combina ambos valores separados por un slash (/) con espacios a cada lado [2:30].
Por ejemplo, para que un ítem ocupe la primera columna se escribe grid-column: 1 / 2. El espacio antes y después del slash es importante para que la sintaxis sea válida.
¿Cómo funciona grid-row?
De manera análoga, pero contando las líneas horizontales de arriba hacia abajo [3:10]:
grid-row-start: línea donde inicia el elemento en el eje vertical.grid-row-end: línea donde termina.grid-row: abreviación con la misma estructura de slash.
Si queremos que una card ocupe dos filas, escribimos grid-row: 1 / 3. Justo aquí se produce la diferencia visual respecto al diseño por defecto: al establecer dónde empieza y dónde termina cada elemento, el layout se ajusta al diseño original [3:30].
¿Cómo usar grid-area para nombrar zonas del layout?
grid-area permite asignar nombres a las celdas de la grid y luego indicar a cada hijo qué área debe ocupar [4:05]. El flujo de trabajo es el siguiente:
- Nombrar las celdas en el diseño: por ejemplo, las dos celdas verticales de la izquierda se llaman
card-uno, y las de la derecha card-dos y card-tres.
- En el contenedor, definir las áreas con
grid-template-areas:
css
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"card-uno card-dos"
"card-uno card-tres";
}
- En cada hijo, asignar el nombre correspondiente:
css
.item-one {
grid-area: card-uno;
}
El resultado es que item-one se extiende a lo largo de las dos filas en la primera columna, mientras card-dos y card-tres ocupan cada una su celda en la segunda columna [4:50]. Este enfoque es muy legible porque el código refleja visualmente la estructura del diseño.
¿Cuál es el proceso para traducir un diseño a código?
- Analizar el diseño y contar filas y columnas.
- Decidir si se prefiere enumerar líneas (
grid-column / grid-row) o nombrar áreas (grid-area).
- Plasmar esa estructura en CSS.
- Verificar que el resultado coincida con el mockup.
Cuando se sigue este orden, ubicar elementos deja de ser complicado y se convierte en un proceso sistemático [5:20].
El reto propuesto consiste en tomar la card que estaba en posición vertical y colocarla de forma horizontal, aplicando las mismas técnicas. El código base ya está disponible en el repositorio; solo hace falta redefinir las áreas y reubicar el elemento. Comparte tu solución en los comentarios para comparar enfoques.
