Brecha - Trucos CSS

La propiedad gap en CSS es una abreviatura de row-gapy column-gap, que especifica el tamaño de las canaletas, que es el espacio entre filas y columnas dentro de diseños de cuadrícula, flex y de varias columnas.

/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )

Utilice el control deslizante de la siguiente demostración para ver la gappropiedad en acción:

Sintaxis

gap acepta uno o dos valores:

• Un solo valor establece ambos row-gapy column-gappor el mismo valor.
• Cuando se utilizan dos valores, el primero establece el row-gapy el segundo establece el column-gap.

.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )

La especificación del módulo de diseño de cuadrícula CSS definió el espacio entre las pistas de la cuadrícula utilizando la grid-gappropiedad. gapestá destinado a reemplazarlo para que las brechas se puedan definir en múltiples métodos de diseño CSS, como flexbox, pero grid-gapaún debe usarse en casos en los que un navegador puede haber implementado grid-gappero aún no ha comenzado a admitir la gappropiedad más nueva .

Valores

gap acepta los siguientes valores:

• normal: (Predeterminado) El navegador especificará un valor usado de 1em para el diseño de varias columnas y 0px para todos los demás contextos de diseño (es decir, cuadrícula y flex).
• : Cualquier longitud CSS válido y no negativo, como px, em, remy %, entre otros.
• : El tamaño de la brecha como un valor porcentual no negativo en relación con la dimensión del elemento. (Consulte a continuación para obtener más detalles).
• initial: Aplica la configuración predeterminada de la propiedad, que es normal.
• inherit: Adopta el valor de la brecha del padre.
• unset: Elimina la corriente gapdel elemento.

Porcentajes en propiedades de brecha

Cuando el tamaño de un contenedor en la dimensión del espacio es definido, gapresuelve los porcentajes contra el tamaño del cuadro de contenido del contenedor en cualquier tipo de diseño.

En otras palabras, cuando el navegador conoce el tamaño del contenedor, puede calcular el valor porcentual del gap. Por ejemplo, cuando la altura del contenedor gapes de 100 px y se establece en 10%, el navegador sabe que el 10% de 100 px es de 10 px.

Pero cuando el navegador no conoce el tamaño, se preguntará, "¿10% de qué?" En estos casos, se gapcomporta de manera diferente según el tipo de diseño.

En un diseño de cuadrícula, los porcentajes se resuelven contra cero para determinar las contribuciones de tamaño intrínseco, pero se resuelven contra el cuadro de contenido del elemento al diseñar el contenido del cuadro, lo que significa que pondrá espacio entre los elementos, pero el espacio no afecta el tamaño del contenedor.

En esta demostración, la altura del contenedor no está definida. Vea lo que sucede cuando aumenta el gaptamaño. Luego configure las gapunidades de píxeles e intente nuevamente:

En un diseño flexible, los porcentajes se resuelven frente a cero en todos los casos, lo que significa que los espacios no se aplicarán cuando el navegador no conozca el tamaño del contenedor:

Usando la función calc () con gap

Puede usar la calc()función para especificar el tamaño del gappero, en el momento de escribir este artículo, no hay soporte para Safari e iOS.

.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); ) 
 .grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )

Ejemplos

La gappropiedad está diseñada para su uso en diseños de cuadrícula, flexible y de varias columnas. Veamos algunos ejemplos.

Diseño de cuadrícula

En la siguiente demostración, puede ver cómo gapse usa para especificar las propiedades row-gapy column-gapen un contenedor de cuadrícula, definiendo los medianiles entre las filas de cuadrícula y las columnas de cuadrícula, respectivamente:

Diseño flexible

La aplicación de un espacio al eje principal de un contenedor flexible indica el espacio entre elementos flexibles en una sola línea del diseño flexible.

Aquí se column-gapusa en una dirección de fila:

Aquí se row-gapusa en una dirección de columna:

La aplicación gapal eje transversal de un contenedor flexible indica el espacio entre las líneas flexibles del diseño flexible.

Aquí está row-gapen una dirección de fila:

Aquí está column-gapen una dirección de columna:

Diseño de varias columnas

column-gapaparece en diseños de varias columnas para crear espacios entre los cuadros de columna, pero tenga en cuenta que row-gapno tiene ningún efecto ya que solo estamos trabajando en columnas. gaptodavía se puede utilizar en este contexto, pero solo column-gapse aplicará el.

Como puede ver en la siguiente demostración, aunque la gappropiedad tiene un valor de 2rem, solo separa elementos horizontalmente en lugar de en ambas direcciones, ya que estamos trabajando en columnas:

Cuanto más sepa ...

Hay un par de cosas que vale la pena mencionar acerca de trabajar con la gappropiedad.

Es una buena forma de evitar espacios no deseados

¿Alguna vez ha utilizado márgenes para crear espacios entre elementos? Si no tenemos cuidado, podemos terminar con un espacio adicional antes y después del grupo de elementos.

Resolver eso generalmente requiere agregar márgenes negativos o recurrir a pseudo-selectores para eliminar el margen de elementos específicos. Pero lo bueno de usar gapen métodos de diseño más modernos es que solo tiene espacio entre elementos. ¡El impulso adicional al principio y al final nunca es un problema!

Pero, oye, si quieres tener espacio alrededor de los elementos mientras los usas gap, colócalo paddingalrededor del contenedor así:

.container ( display: flex; gap: 1rem; padding: 1rem; )

El tamaño de la canaleta no siempre es igual al valor de la brecha

La gappropiedad no es lo único que puede poner espacio entre elementos. Los márgenes, los rellenos justify-contenty align-contenttambién pueden aumentar el tamaño de la canaleta y afectar el gapvalor real .

En el siguiente ejemplo, estamos configurando un 1em gappero, como puede ver, hay mucho más espacio entre los elementos, causado por el uso de alineaciones distribuidas, como justify-contenty align-content:

Soporte de navegador

Las consultas de características suelen ser una buena forma de verificar si un navegador admite una propiedad específica, pero en este caso, si verifica la gappropiedad en flexbox, puede obtener un falso positivo porque una consulta de características no distinguirá entre los modos de diseño. En otras palabras, podría ser compatible con un diseño flexible que da como resultado un resultado positivo, pero en realidad no es compatible si se usa en un diseño de cuadrícula.

Diseño de cuadrícula

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	16+	61+	66+	12+	53+

Safari de iOS	Opera Mobile	Navegador de Android	Chrome para Android	Firefox para Android
12+	No	81+	84+	68+

Diseño de cuadrícula con valores calc ()

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	84+	79+	84+	No	69+

Safari de iOS	Opera Mobile	Navegador de Android	Chrome para Android	Firefox para Android
No	No	81+	84+	68+

Diseño de cuadrícula con valor porcentual

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	84+	79+	84+	No	69+

Safari de iOS	Opera Mobile	Navegador de Android	Chrome para Android	Firefox para Android
No	No	81+	84+	68+

Diseño flexible

La especificación para usar gapcon flexbox se encuentra actualmente en estado de borrador de trabajo.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
84	63	No	84	TP

Móvil / Tablet

Android Chrome	Android Firefox	Androide	Safari de iOS
88	85	No	No

Diseño de varias columnas

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	84+	79+	84+	No	69+

Safari de iOS	Opera Mobile	Navegador de Android	Chrome para Android	Firefox para Android
No	No	81+	84+	68+

Más información

• Módulo de alineación de cajas CSS, nivel 3
• Chromium aterriza en la brecha de Flexbox (boleto # 761904)
• Estado de la función CSS de WebKit

Relacionado

• Diseño de cuadrícula
• Diseño de caja flexible
• Diseño de varias columnas