¿Brechas? ¡Jadear!

Al principio, existían las flexboxes (las hijas de un display: flexcontenedor). Si querías que estuvieran visualmente separados, tenías que usar justificación de contenido (es decir justify-content: space-between), marginengaño o, a veces, ambos. Luego aparecieron las cuadrículas (un display: gridcontenedor), y las cuadrículas podían tener espacios mínimos sin márgenes ni engaños entre las celdas de la cuadrícula, gracias a grid-gap. Las Flexboxes no tenían huecos.

Ahora pueden hacerlo, gracias al creciente apoyo de gap, el grid-gapsucesor que no se limita a las redes. Con gap, puede separar sus cuadrículas, sus cajas flexibles e incluso sus múltiples columnas. ¡Es fantástico!

Espacio con cuadrícula

Empecemos por donde gapes más robusto: CSS Grid. Aquí hay una configuración de cuadrícula básica en HTML y CSS:

section  divdiv/div  divdiv/div  divdiv/div  divdiv/div  divdiv/div  divdiv/div  divdiv/div/section

section {  display: grid;  grid-template-rows: repeat(2,auto);  grid-template-columns: repeat(4,auto);  gap: 1em;}section div {  width: 2em;}

Eso coloca las celdas de la cuadrícula al menos 1emseparadas entre sí. La distancia de separación puede ser mayor, dependiendo de otras condiciones fuera del alcance de esta publicación, pero como mínimo deben estar separados por 1em. (Bien, hagamos un ejemplo: gaplos espacios de son adicionales a los márgenes de las celdas de la cuadrícula, por lo que si todos los elementos de la cuadrícula tienen margin: 2px;, entonces la distancia visual entre las celdas de la cuadrícula sería al menos 1emmás 4px). De forma predeterminada, los cambios en el El tamaño del espacio provoca el cambio de tamaño de los elementos de la cuadrícula, de modo que llenen sus celdas.

Todo esto funciona porque gapen realidad es una abreviatura de las propiedades row-gapy column-gap. El gap: 1emse interpreta como gap: 1em 1em, que es una abreviatura de row-gap: 1em; column-gap: 1em;. Si desea diferentes distancias entre filas y columnas, algo como esto gap: 0.5em 1emfuncionará bien.

Brecha con Flexbox

Hacer lo mismo en un contexto de flexbox genera espacios, pero no de la misma manera que suceden en las cuadrículas. Supongamos el mismo HTML que el anterior, pero en su lugar este CSS:

section {  display: flex;  flex-wrap: wrap;  gap: 1em;}

Las cajas flexibles se separan al menos por el valor de gapaquí y (gracias a flex-wrap) se ajustan a nuevas líneas flexibles cuando se quedan sin espacio dentro de su contenedor flexible. Cambiar la distancia de los espacios podría provocar un cambio en la envoltura de los elementos flexibles, pero a diferencia de Grid, cambiar los espacios entre los elementos flexibles no cambiará los tamaños de los elementos flexibles. Los cambios en los espacios pueden hacer que la envoltura flexible ocurra en diferentes lugares, lo que significa que la cantidad de elementos flexibles por fila cambiará, pero los anchos permanecerán iguales (a menos que los haya configurado para que crezcan o se reduzcan mediante flex, claro está).

Brecha con varias columnas

En el caso de contenido de varias columnas, existe una pequeña restricción gap: solo se utilizan espacios entre columnas. Puede declarar espacios entre filas para varias columnas si lo desea, pero se ignorarán.

section {  columns: 2;  gap: 1em;}

Apoyo

El apoyo agap , row-gapy column-gapestá sorprendentemente extendido. Mozilla los tiene desde la versión 61, Chromium desde la versión 66, y gracias al trabajo de Sergio Villar de Igalia , pronto llegarán a Safari y Mobile Safari (ya están en las versiones preliminares de tecnología ). Entonces, si su contenido de cuadrícula, flexible o de varias columnas necesita un poco más de espacio para respirar, ¡prepárese para caer en el vacío!