Grid-auto-rows en CSS: Aprende a controlar filas automáticas con precisión

| Última modificación: 10 de enero de 2025 | Tiempo de Lectura: 4 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Si alguna vez has trabajado con un grid en CSS, es muy probable que te hayas encontrado con filas que salen de la nada y no sabes manejar. Lo sé porque a mí y a muchos otros desarrolladores nos ha pasado. La verdad es que diseñar layouts complejos llega a sentirse como tratar de armar un rompecabezas sin tener una imagen de referencia, pero ya no tienes que preocuparte más por eso. En esta ocasión, quiero hablarte de grid-auto-rows, una herramienta que te devolverá el control y te ayudará a gestionar esas filas automáticas con total precisión. Así que presta mucha atención porque voy a contarte qué es, para qué sirve y cómo usarlo para hacer que tus diseños sean tan ordenados como una tabla de Excel bien hecha.

Grid-auto-rows en CSS: Aprende a controlar filas automáticas con precisión

¿Qué es grid-auto-rows en CSS?

Grid-auto-rows es la propiedad de CSS con la que puedes definir la altura de las filas que se generan automáticamente en un contenedor de grid. Por lo general, estas filas aparecen cuando los elementos hijos ocupan más espacio del que has definido explícitamente con la propiedad grid-template-rows.

Para que sea más fácil de entender, imagina que tu grid es como un edificio y las filas son los pisos. Normalmente, usas grid-template-rows para definir los pisos que planeas construir, pero ¿qué pasa si alguien necesita más espacio? En ese caso, debes construir pisos adicionales, y grid-auto-rows es la regla que decide cuánta altura tienen estos pisos extra.

Por ejemplo, puedes tener un contenedor de grid con una configuración básica, como esta:

.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;
}

.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}

.item2 {
grid-column: 1 / 2;
grid-row: 2 / 4; /* Ocupa más filas */
}

Lo que sucederá es que, si los elementos hijos ocupan más espacio del definido por las dos primeras filas de 100px, se crearán filas adicionales con una altura de 50px. Así que, aunque ajustes la altura de las filas con grid-auto-rows, estas filas automáticas seguirán generándose automáticamente a medida que sea necesario, pero con la altura especificada, lo que te devuelve el control.

¿Para qué sirve grid-auto-rows?

Cuando diseñamos un grid, es muy común que surjan muchas situaciones inesperadas que pueden complicar el layout. En ese sentido, lo que hace tan útil esta propiedad es que te permite tener un diseño más controlado y ordenado, especialmente en estos casos:

  • Si trabajas con contenido dinámico, por ejemplo galerías de imágenes o listas de datos que pueden continuar creciendo.
  • Cuando necesitas asegurarte de que las filas adicionales mantengan un tamaño uniforme.
  • Si quieres evitar que las filas que se generan automáticamente puedan provocar inconsistencias en el diseño.

Dicho de una forma bastante simple, grid-auto-rows te da el poder de anticiparte a lo inesperado, mientras te aseguras de que tu grid siempre luzca impecable.

Sintaxis de grid-auto-rows

Puedo imaginarme que, si estás aquí, estás aunque sea un poco familiarizado con CSS. Si es así, debes saber que, generalmente, la sintaxis de sus propiedades es bastante simple, como lo es la de grid-auto-rows. Sólo debes seguir esta estructura:

.container {
display: grid;
grid-auto-rows: valor;
}

Valores comunes

En cuanto a los valores, puedes utilizar los siguientes tres:

  • Unidades fijas: En este caso, puedes utilizar valores como px, em, rem o % para especificar alturas constantes.
.container {
grid-auto-rows: 100px;
}
  • Fracciones (fr): Este valor distribuye el espacio disponible de manera proporcional.
.container {
grid-auto-rows: 1fr;
}
  • Funciones más avanzadas: Este combina valores con minmax() para establecer un rango de alturas.
.container {
grid-auto-rows: minmax(100px, auto);
}

Como consejo, puedes utilizar auto para permitir que la altura de la fila se ajuste al contenido.

Ejemplos con grid-auto-rows

Ahora, veamos algunos ejemplos que te ayuden a entender mejor cómo funciona esta propiedad:

Establecer alturas uniformes

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 150px;
}

.item {
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
</style>

En este ejemplo, todas las filas automáticas tienen una altura fija de 150px, lo que va a mantener la uniformidad.

Altura adaptativa con minmax()

<div class="grid-container">
<div class="item">Contenido corto</div>
<div class="item">Este elemento tiene un contenido mucho más largo que ocupa más espacio.</div>
<div class="item">Contenido medio</div>
</div>

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}

.item {
background-color: #add8e6;
text-align: center;
padding: 10px;
}
</style>

Aquí, cada fila tendrá al menos 100px de altura, pero podrá crecer si el contenido lo requiere.

Diferencias entre grid-auto-rows y grid-template-rows

Si todavía tienes dudas sobre cuál es la diferencia entre grid-auto-rows y grid-template-rows, no tienes que preocuparte. En realidad, es bastante común confundir estas dos propiedades, pero tienen funciones distintas:

  • grid-template-rows: Define filas específicas y explícitas en el grid.
  • grid-auto-rows: Define la altura de filas que se generan automáticamente cuando el contenido excede las filas definidas.

Y lo mejor es que ambas pueden combinarse para tener un control más completo del grid.

Consejos para usar grid-auto-rows

Para finalizar, voy a darte tres consejos que, si bien pueden parecer sencillos, van a hacer una gran diferencia en tu trabajo. Es que, precisamente, los detalles más pequeños pueden ser los más importantes:

  1. Combina unidades responsivas y fijas: Si quieres mantener un diseño flexible, entonces lo más apropiado es usar minmax() 
  2. Evita valores excesivamente grandes: Los valores excesivos podrían romper el diseño en pantallas más pequeñas. Recuerda que, al diseñar una web, debemos pensar en la experiencia del usuario.
  3. Prueba con contenido real: Asegúrate de que los valores que eliges funcionan con el contenido real que cargará el grid.

Después de todo lo dicho, has podido ver que grid-auto-rows es como ese as bajo la manga que todo desarrollador necesita. Con un par de líneas de código, te permite gestionar filas automáticas sin perder el control ni la estética de tu diseño. ¿Qué tal si te animas a probar esta propiedad?

Debo decir que dominar propiedades como grid-auto-rows es solo el comienzo de tu camino como desarrollador web. Si realmente quieres mejorar tus habilidades y construir sitios web que destaquen, debes unirte a nuestro Bootcamp en Desarrollo Web. En cuestión de meses, podrás convertirte en un profesional capaz de afrontar cualquier reto en CSS y más allá. 

¡Tu futuro empieza ahora!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo web

Full Stack Bootcamp

Conviértete en Full Stack Deeveloper en solo 10 meses. Accede a un sector con el 98,49% de empleabilidad con sueldos de hasta 80K.