Grid-template-rows en CSS: Cómo organizar las filas en un contenedor grid

En mi experiencia como desarrollador y profesor, me he dado cuenta de que es bastante común eso de intentar organizar los elementos de una página web y sentir que nada encaja. Debo decir que muchos de nosotros, seamos principiantes o tengamos experiencia, nos enfrentamos a esta frustración al tratar de lograr un diseño cohesivo y funcional. Pero, por suerte, CSS dispone de herramientas muy útiles con las que podemos estructurar nuestros diseños de forma impecable, como lo es grid-template-rows.

Así que hoy quiero contarte qué es esta propiedad, para qué sirve y cómo puedes empezar a aplicarla en tus proyectos y ahorrarte unos cuantos dolores de cabeza.

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

Grid-template-rows es una propiedad CSS Grid, o modelo de cuadrícula, que te permite definir el tamaño y la cantidad de filas en un contenedor grid. En pocas palabras, es el plano que usas para decidir cómo se verán las filas de tu diseño, donde puedes establecer tamaños fijos, proporcionales o dinámicos, utilizando diferentes valores como píxeles, porcentajes, unidades de fracción (fr), entre otros.

De esta manera, puedes ser muy específico sobre cómo se distribuye el espacio vertical entre las diferentes filas.

¿Para qué sirve grid-template-rows en CSS?

Como venía diciendo, esta propiedad es muy útil porque te permite definir la estructura y el tamaño de las filas en un contenedor de cuadrícula. Por esto mismo, resulta esencial al momento de crear diseños web flexibles y responsivos. Veámoslo con más detalle:

1. Definir filas de tamaño fijo: Esta propiedad es ideal si necesitas que cada fila tenga un tamaño exacto, como 100px o 50px.
2. Crear diseños dinámicos: Puedes hacer que las filas se ajusten al contenido o al espacio disponible, por lo que resulta una propiedad perfecta para crear diseños responsivos que funcionen adecuadamente desde cualquier dispositivo.
3. Personalizar la altura de las filas: Por ejemplo, puedes darle más altura a una fila que contiene un encabezado y menos a otra que tiene un texto secundario.
4. Simplificar layouts complejos: Cuando combinas esta propiedad con otras como grid-template-columns, puedes crear diseños sólidos y bien organizados.

Sintaxis básica de grid-template-rows en CSS

Además de ser una propiedad muy útil, la sintaxis de grid-template-rows es bastante sencilla e intuitiva, pues solo necesitas especificar los tamaños de las filas separados por espacios, como verás a continuación:

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px 100px;
}

Aquí, el contenedor tendrá tres filas: la primera y la tercera fila medirán 100 píxeles de altura. Por su parte, la segunda fila será más grande, con 200 píxeles. Muy intuitivo, ¿no crees?

Ejemplos de grid-template-rows en CSS

Ahora, viene mi parte favorita. Veremos algunos ejemplos de cómo utilizar esta propiedad según diferentes propósitos:

Crear filas de altura fija

Si necesitas que cada fila tenga un tamaño específico, puedes hacerlo así:

.grid-container {
  display: grid;
  grid-template-rows: 150px 150px 150px;
}

Esto crea tres filas idénticas de 150 píxeles de alto, lo que resulta perfecto para diseños donde el tamaño de las filas no debe cambiar. 

Crear filas dinámicas con fracciones (fr)

Cuando quieres que las filas se adapten al espacio disponible, lo mejor es que utilices fracciones:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
}

Por ejemplo, aquí, la primera y la tercera fila ocuparán la misma proporción de espacio, mientras la segunda será el doble de alta que las otras.

Crear filas ajustables con auto

Si no estás seguro de cuánto contenido tendrá cada fila, entonces puedes usar el valor auto, ya que este ajustará la altura automáticamente:

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

Con esto, cada fila tomará la altura necesaria para acomodar su contenido.

Combina tamaños con minmax()

La función minmax() es ideal si quieres establecer un tamaño mínimo y máximo para las filas:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, minmax(100px, auto));
}

En este ejemplo, cada fila tendrá un tamaño mínimo de 100 píxeles, pero podrá expandirse si es necesario.

Consejos para trabajar con grid-template-rows

Después de ver los ejemplos, me gustaría darte algunas recomendaciones que puedes tener en consideración al momento de implementar esta propiedad. Son cosas bastante sencillas, pero que pueden marcar una gran diferencia en el resultado:

1. Planea tu diseño: Antes de codificar, define cuántas filas necesitas y qué contenido irá en cada una.
2. Usa valores proporcionales para diseños flexibles: Recuerda que las fracciones (fr) te permiten aprovechar al máximo el espacio disponible.
3. Combina con otras propiedades de CSS Grid: Puedes combinarla con otras propiedades como grid-template-columns y gap, que son excelentes complementos para esta propiedad.
4. Prueba en diferentes dispositivos: Es de vital importancia que te asegures de que tus filas se vean bien tanto en pantallas grandes como en móviles.

Espero que estos consejos te sean de mucha utilidad. Ten por seguro que dominar grid-template-rows en CSS te abrirá las puertas a un diseño mucho más organizado y profesional. Ahora que has aprendido a usarlo, podrás estructurar tus layouts con precisión, asegurarte de que cada fila tenga el tamaño ideal y, lo más importante, crear páginas web que se adapten a cualquier dispositivo. ¡Así que empieza a practicar!

Si esta propiedad te parece útil, imagina lo que podrías lograr dominando todo el sistema de CSS Grid y otras herramientas avanzadas de diseño web. Por eso, en el Bootcamp en Desarrollo Web de KeepCoding, te enseñaremos de CSS, HTML, JavaScript, React y mucho más, paso a paso, desde los fundamentos hasta la creación de proyectos impresionantes. Anímate a empezar una nueva carrera en uno de los sectores con mejores oportunidades laborales y grandes salarios.

¡Es tu oportunidad de construir el futuro que siempre soñaste!