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 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.
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!
