CSS Grid es un sistema de posicionamiento avanzado que define la ubicación de los elementos HTML de nuestra página web con base a una cuadrícula o grid layout que nosotros mismos creamos. Como muchos otros sistemas de posicionamiento, CSS Grid sitúa nuestros elementos usando las propiedades de CSS. En esta ocasión, te presentamos la propiedad grid-template-columns de CSS Grid, una de las propiedades base para la creación de su cuadrícula.
¿Cómo funciona CSS Grid?
Antes de conocer cómo funciona la propiedad grid-template-columns de CSS Grid, debemos conocer cómo funciona este sistema. Como mencionamos arriba, el posicionamiento avanzado con CSS Grid define la ubicación de un elemento en relación a una cuadrícula que nosotros mismos diseñamos. Esta cuadrícula está conformada por celdas, la unidad más pequeña de la cuadrícula, que, a su vez, está limitada por líneas de grid o grid lines. Estas son las líneas horizontales o verticales de la cuadrícula que definen las filas y columnas. Las filas o columnas individuales también son conocidas como tracks o pistas. Cualquier forma diferente de agrupar celdas, que no sea filas o columnas, se conoce como área (por ejemplo, un cuadrado).
Aunque tiene una nomenclatura y lógica diferente, el posicionamiento avanzado con CSS Grid funciona exactamente igual que Flexbox a nivel de HTML. Al igual que en Flebox, en CSS existe un contenedor de la cuadrícula, que Flexbox entiende como flex-container. Este contenedor tiene elementos dentro, entendidos en Flexbox como flex-items, los cuales CSS Grid ubicará en sus celdas. Es al contenedor al que tendremos que aplicarle la propiedad display: grid. De este modo, el navegador entenderá que debe posicionar los elementos en relación al modelo CSS Grid y ningún otro. Esto también es similar a Flexbox, un sistema en el que debemos insertar la propiedad display:flex al elemento contenedor.
¿Cómo funciona la propiedad grid-template-columns de CSS Grid?
Entonces, si la base de este sistema de posicionamiento es un grid layout, ¿cómo creamos y diseñamos esta cuadrícula en CSS Grid? La propiedad grid-template-columns de CSS Grid, con su opuesto grid-template-rows, es la base de la creación de una cuadrícula en CSS. Al usar esta propiedad, manipulamos dos características muy importantes: el número de columnas que tendrá la cuadrícula y el ancho de las mismas.
En función del número de columnas, el navegador ubicará los elementos siguiendo un orden de izquierda a derecha empezando por la fila superior hasta llegar a la fila inferior. Si solamente definimos el número de columnas, el número de filas se definirá implícitamente dependiendo del número de elementos a ubicar. Sin embargo, también podemos definir las características de las filas usando la propiedad grid-template-rows.
Entonces, ¿cómo usamos la propiedad grid-template-columns de CSS Grid? Para definir las dos características que hemos mencionado, basta con darle un valor al ancho de las columnas usando cualquier unidad de medida CSS positiva. El número de columnas se obtendrá por el número de valores que agreguemos. Por ejemplo, si queremos tener tres columnas, cada una con un ancho diferente, escribiremos grid-template-columns: 400px 300px 200px. No es necesario escribir el número de columnas, dado que ya lo estamos dando de forma implícita con el número de anchos que estamos definiendo.
Ten presente que, al definir el valor del ancho, sea con la unidad de medida que sea, este se mantendrá sin importar el tamaño de la pantalla. Entonces, si la pantalla es más grande que la suma de los anchos de las columnas, el espacio restante estará vacío. De igual forma, si la pantalla es más pequeña que la suma de los anchos, el borde y los elementos de la cuadrícula van a sobresalir del viewport.
Además de los valores en distintas unidades de medida, puedes insertar palabras clave para determinar el comportamiento de tus columnas. Aquí simplemente te hemos introducido a esta propiedad, por ello, te invitamos a leer el siguiente post de Mozila Developer Network sobre la propiedad grid-template-columns de CSS Grid para poder conocerla más en profundidad.
Ahora que sabes cómo funciona la propiedad grid-template-columns de CSS Grid, conoces las bases para hacer una cuadrícula y ubicar tus elementos dentro de ella. Podrías quedarte con este conocimiento básico, pero en KeepCoding sabemos que un soñador como tú siempre quiere seguir aprendiendo.
Por ello, te invitamos a nuestro Desarrollo Web Full Stack Boocamp, una formación intensiva en al que no solo continuarás tu aprendizaje sobre estos lenguajes de programación, sino que también combinarás la teoría con la práctica al crear y diseñar tu propia página web. Así, al cabo de unos pocos meses en nuestro bootcamp, serás un experto en desarrollo web y tendrás cómo comprobarlo. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web profesional? ¡No te pierdas esta oportunidad e inscríbete ahora para alcanzar tus objetivos y triunfar en el sector IT!
