CSS Grid es un sistema de posicionamiento de elementos que nos permite crear una cuadrícula personalizada en la que ubicar los elementos HTML de nuestra página web. La base de la personalización de esta cuadrícula es modificar las características de sus filas y columnas. La propiedad grid-auto-rows de CSS Grid es una de la gran variedad de propiedades que nos da este sistema para conseguirlo. Por eso, en este post, te enseñamos cómo la propiedad grid-auto-rows de CSS Grid nos permite automatizar el tamaño de las filas de nuestra cuadrícula.
¿Cómo funciona la propiedad grid-auto-rows de CSS Grid?
El nombre de la propiedad grid-auto-rows de CSS Grid suena a una mezcla entre la propiedad grid-template-rows, que nos ayuda a definir el tamaño de las filas, y la propiedad grid-auto-flow, que nos permite definir el flujo de la disposición de elementos en nuestra cuadrícula. La verdad es que esta mezcla funciona, porque esta propiedad hace un poco de ambas cosas.
En definitiva, la propiedad grid-auto-rows de CSS Grid nos permite definir el tamaño de las filas de nuestra cuadrícula a partir de un patrón automático.
En el post sobre la propiedad grid-template-rows vimos que podemos definir el tamaño de las filas de manera explícita, al igual que las columnas. Aprendimos que podemos insertar un valor con la unidad de medida que queramos para determinar el largo de cada fila. También aprendimos que, en los casos en los que el largo no se define, como cuando se crean más filas de las que se habían determinado porque hay más elementos a ubicar, el largo automático será el largo mínimo que requieren los elementos dentro de la fila.
Con la propiedad grid-auto-rows podemos determinar qué sucede cuando el navegador necesita crear filas automáticas para situar nuevos elementos. Esta propiedad nos permite crear un patrón que establezca el largo de estas nuevas filas.
Te proponemos un ejemplo. Digamos que quieres crear una cuadrícula en la que el largo de las filas se intercale, la primera sea el doble que la segunda y así sucesivamente. Bastaría con escribir grid-auto-rows: 200px 100px. Esto hará que las filas se creen siguiendo este patrón, las impares tendrán un largo de 200px y las pares de 100px. Con esta propiedad, puedes escribir el patrón que desees usando el número de valores que necesites y las unidades de medida que elijas.
¿Puedo aplicar esta propiedad en las columnas?
El posicionamiento avanzado de CSS Grid piensa siempre en la flexibilidad y utilidad, por ello, sabe que hay momentos en los que las columnas se definen implícitamente mientras las filas se definen explícitamente usando la propiedad grid-template-rows. En este caso, podemos usar la propiedad grid-auto-columns para crear patrones de tamaño y generar los anchos de nuestras columnas automáticamente.
Aunque esta propiedad es igual de importante que la propiedad grid-auto-rows de CSS Grid, tendemos a hablar más sobre esta última porque el valor predeterminado para el grid-auto-flow es row. Esto quiere decir que el sistema de posicionamiento CSS Grid automáticamente piensa en la creación de filas implícita y nos pide que seamos explícitos con la creación de nuestras columnas.
Sin embargo, estos sistemas de posicionamiento avanzado están para darnos la libertad de crear diseños más complejos y únicos. Por ello, te invitamos a que juegues con las propiedades y desafíes las lógicas de estos sistemas.
Después de leer este artículo, sabes todo lo necesario para definir los tamaños de tus filas y columnas usando la propiedad grid-auto-rows de CSS Grid. Pero en KeepCoding sabemos que una mente como la tuya, curiosa e inquieta, no encuentra suficiente aprender solo sobre las propiedades. ¡Lo que necesitas es ponerlas en práctica en tu propia página web! ¿Y qué mejor manera de poner en práctica tus conocimientos que en un bootcamp intensivo donde, además, seguirás aprendiendo?
En KeepCoding creemos fielmente en el poder de mezclar la teoría con la práctica. Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde no solo seguirás formándote en relación a los lenguajes de programación para web, sino que los pondrás en práctica en tus propias líneas de código. ¡No lo dudes más e inscríbete ya para convertirte en desarrollador web!
