¿Sabes que es el gap en CSS?
CSS Grid es un sistema de posicionamiento avanzado para situar elementos en tu página web basado en la idea de una cuadrícula. Al igual que otros sistemas, como el posicionamiento clásico con CSS y el posicionamiento avanzado con Flexbox, CSS Grid funciona a partir de la inserción de propiedades. En esta ocasión, te enseñaremos la propiedad grid-gap en CSS Grid, que te ayudará a determinar las separaciones entre los elementos de la cuadrícula.
¿Cómo funciona CSS Grid?
Antes de hablar sobre la propiedad grid-gap en CSS Grid, debes saber que 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. Esta cuadrícula está dividida en las unidades de celda, línea de grid, pistas y áreas, y está conformada por los distintos elementos que se encuentran dentro de un elemento contenedor. Es a esta cuadrícula o elemento contenedor al que debemos añadirle la propiedad display grid-gap: grid.
Al igual que el posicionamiento avanzado con Flexbox, determinar esta propiedad hace que el navegador sepa en qué método de posicionamiento basarse a la hora de situar los elementos en la página web.
Como toda cuadrícula, CSS Grid está conformada por filas y columnas, las cuales podemos modificar definiendo su número y tamaño. Para definir la forma de la cuadrícula o grid que queremos crear, debemos definir el número de columnas que queremos y qué ancho tiene cada una. Esto lo podemos hacer insertando en la propiedad grid-template-columns cualquier unidad de medida CSS que queramos. De este modo, las columnas se crean de manera explícita mientras que las filas se crean de manera implícita, dependiendo del número de elementos a ubicar.
Para saber más sobre el funcionamiento de este sistema de disposición de elementos en CSS antes de entrar en materia sobre la propiedad grid-gap en CSS Grid ( propiedad gap css ), te invitamos a leer nuestro post sobre el posicionamiento avanzado con CSS Grid. Además, mientras te acostumbras a este sistema, te recomendamos utilizar esta guía completa de CSS Grid publicada por CSS Tricks, en donde encontrarás un resumen de cada una de sus propiedades con diagramas muy útiles.
¿Cómo funciona la propiedad grid-gap en CSS Grid?
El posicionamiento avanzado con CSS Grid nos permite situar elementos dentro de una cuadrícula. Al igual que las propiedades de espaciados de Flexbox, la propiedad grid-gap en CSS Grid nos permite determinar los espaciados entre los elementos. En el caso de CSS Grid, esta propiedad nos ayuda a definir la distancia entre las columnas y filas de la cuadrícula.
Al utilizar la propiedad gap y darle un valor con cualquier unidad de medida CSS, estamos diciéndole al navegador que separe tanto las columnas como las filas de la cuadrícula CSS con ese tamaño. Podemos ver esta separación entre los elementos con ayuda de la herramienta inspector de nuestro navegador.
Al igual que con Flexbox, al hacer clic sobre el nombre de este sistema de posicionamiento en la sección de estilos de nuestro inspector, veremos aparecer ayudas visuales. En el caso del gap, las áreas de espaciado nos aparecen con rayas diagonales. Ten presente que si tienes elementos impares y número de columnas y filas pares, habrá secciones vacías en tu cuadrícula.
También podemos darle un valor diferente a la separación entre columnas y a la separación entre las filas al darle dos valores a la propiedad gap. En esta situación, el primer valor que pongamos representará la separación entre las filas, mientras que el segundo valor representará el valor entre las columnas.
Después de leer este post sabes cómo funciona la propiedad grid-gap en CSS Grid y estás listo para empezar a usarla en un sitio web. Pero en KeepCoding sabemos que aprender cómo funciona una propiedad en un sitio web no es suficiente y que quieres aprender mucho más. ¡Todavía quedan muchas propiedades por descubrir!
Para aprender más sobre este tema, te invitamos a ser parte de nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde no solo seguirás aprendiendo acerca de los lenguajes de programación para la web, sino que también usarás estos conocimientos teóricos para crear y diseñar tu propio sitio web con ayuda de nuestros profesores. De este modo, al cabo de unos pocos meses en este bootcamp, serás un experto en desarrollo web. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web profesional? ¡No dejes pasar la oportunidad y matricúlate ahora!
