Propiedad grid-template-rows de CSS Grid

Autor: | Última modificación: 29 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

CSS Grid es un sistema de posicionamiento avanzado de elementos que nos permite ubicar los elementos HTML de nuestra página web en una cuadrícula diseñada por nosotros. Al igual que otros sistemas de posicionamiento, como el posicionamiento clásico de CSS y el posicionamiento avanzado de Flexbox, CSS Grid funciona a partir de la inserción de propiedades.

En este post, te presentaremos cómo funciona la propiedad grid-template-rows de CSS Grid para que la uses en el diseño de tu página web.

¿Cómo funciona CSS Grid?

El posicionamiento avanzado con CSS Grid define la posición de un elemento en relación a una cuadrícula que nosotros mismos diseñamos. Una forma de entender la cuadrícula de CSS Grid es pensar en ella como el elemento contenedor o flex-container de Flexbox. Entonces, la cuadrícula es como un elemento padre, normalmente un elemento div, que contiene distintos elementos y los posiciona según sus reglas. Ten presente que, para hacer que las reglas de CSS Grid que te presentaremos a continuación funcionen, debes insertar en el elemento contenedor la propiedad display:grid.

La cuadrícula de CSS Grid está formada por celdas, líneas de grid, pistas y áreas. Como toda cuadrícula, los elementos dentro los contienen y limitan lo que CSS Grid llama grid lines o líneas de grid. Esto se refiere a las líneas horizontales y verticales de la cuadrícula que definen las filas y columnas, que a su vez definen las celdas.

Sin embargo, las líneas de grid no siempre son visibles o relevantes, pues lo que realmente importa para situar nuestros elementos dentro de la cuadrícula es el número de filas o columnas que tenga y el tamaño de cada una.

A continuación, te presentamos cómo funciona la propiedad grid-template-rows de CSS Grid.

¿Cómo funciona la propiedad grid-template-rows de CSS Grid?

En nuestro post sobre el posicionamiento avanzado con CSS Grid te comentamos que podemos definir de manera explícita las columnas usando la propiedad grid-template-columns de CSS Grid. En este caso, la cuadrícula se genera implícitamente asumiendo un tamaño automático para las filas y creando el número de filas que sea necesario según el número de elementos en el contenedor. Sin embargo, CSS Grid es mucho más flexible que eso.

La propiedad grid-template-rows de CSS Grid nos permite determinar de manera explícita el número y tamaño de las filas de nuestra cuadrícula. Al igual que la propiedad grid-template-columns, la propiedad grid-template-rows de CSS Grid determina el tamaño de la variable a partir de valores con cualquier unidad de medida de CSS. Sea porcentaje, pixel, em, fr, ch, ex o una unidad de medida del viewport, mientras el valor sea positivo funcionará para definir el tamaño de esta propiedad.

Entonces, al insertar un valor en esta propiedad le estás dando al navegador el largo de la fila. Si tienes tres filas, por ejemplo, puedes insertar la propiedad como grid-template-rows: 400px, 380px, 100px. Esto quiere decir que la primera fila de arriba abajo tendrá un largo de 400px, la segunda de 380px y la tercera de 100px.

Pero entonces, ¿qué pasa si no defino el largo de la fila? Pongamos un ejemplo: tenemos ocho elementos en una cuadrícula de dos columnas y cuatro filas. Sin embargo, hemos definido los valores de solo las primeras tres filas (400px, 380px y 100px). Entonces, la cuarta fila, y todas las siguientes, tendrán un largo automático. ¿Y cómo se definirá este valor? El navegador le otorgará el largo necesario para que los elementos contenidos dentro de la fila quepan, ni más ni menos. Esto quiere decir que, si el tamaño de los elementos cambia, también lo hará la fila que los contenga.

Además de los valores en unidad de medida, puedes insertar palabras clave en la propiedad grid-template-rows de CSS Grid para determinar el largo de tu fila. Si quieres conocer en profundidad cada una de las palabras clave disponibles en esta propiedad, te invitamos a leer el post sobre la propiedad grid-template-rows en la página oficial de Mozilla Developer Network.

¿Te emociona seguir aprendiendo?

Después de leer este post sabes lo básico para hacer una cuadrícula y utilizar la propiedad grid-template-rows de CSS Grid. Pero en KeepCoding conocemos personas como tú, soñadores de la programación que siempre quieren seguir aprendiendo nuevos trucos y métodos. Por ello, te invitamos a seguir formándote acerca de los lenguajes de programación para web y sus posibilidades para la creación y diseño de páginas web útiles. ¿Y qué mejor manera que hacerlo en un espacio intensivo que une la teoría con la práctica?

Si te emociona seguir aprendiendo tanto como a nosotros, es el momento de que te unas a nuestro Desarrollo Web Full Stack Bootcamp. Aquí, no solo continuarás aprendiendo sobre desarrollo web, sino que también crearás y diseñarás tu propia página web con ayuda de nuestros profesores. ¡No esperes más y únete ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!