La propiedad gap
de CSS está aquí para los motores de diseño de CSS Flexbox y de varias columnas de Chromium.
Brecha de CSS
gap
es relativo de flujo, lo que significa que cambia de manera dinámica según la dirección del flujo de contenido. Por ejemplo, gap
se ajustará automáticamente para los diferentes valores de writing-mode
o direction
que establezcas para los usuarios internacionales. Esto alivia significativamente la carga de los desafíos de espaciado para el componente y el autor de CSS. Permite reducir aún más el escalamiento del código.
Compatibilidad del navegador
Uso
gap
acepta cualquier longitud o porcentaje de CSS como valor.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
Se puede pasar 1 longitud para la brecha, que se usará tanto para la fila como para la columna.
.grid { display: grid; gap: 10px; }
.grid { display: grid; row-gap: 10px; column-gap: 10px; }
Se puede pasar 2 longitudes para la brecha, que se usarán para la fila y la columna.
.grid { display: grid; gap: 10px 5%; }
.grid { display: grid; row-gap: 10px; column-gap: 5%; }
Caja flexible gap
Antes de que gap
estuviera en Flexbox, las estrategias incluían márgenes negativos, selectores complejos, selectores de seudoclases de tipo :last
o :first
, o bien otros medios para administrar el espacio de un conjunto de elementos secundarios distribuidos de forma dinámica.
Intentos anteriores
Los siguientes son patrones que las personas han utilizado para obtener espacios similares a los déficits.
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
.layout > * + * { margin-bottom: 10px; margin-right: 10px; }
Sin embargo, los elementos anteriores no son un reemplazo completo de gap
y, a menudo, necesitan ajustes @media
o :lang()
para tener en cuenta las situaciones de unión, los modos de escritura o la dirección.
Agregar una o dos consultas de medios no parece tan malo, pero puede aumentar y generar una lógica de diseño complicada.
El objetivo del autor anterior era que no se tocara ninguno de los elementos secundarios.
El antídoto: la brecha
.layout {
display: flex;
gap: 10px;
}
En los primeros 2 ejemplos (sin gap
de Flexbox), se orienta a los elementos secundarios y se les asigna el espaciado desde otros elementos. En el ejemplo de brechas de antídoto, el contenedor es el propietario del espacio. Cada niño puede aliviar la carga y centralizar la propiedad del espaciado. Simplificamos la coherencia. Reordenar, cambiar las viewports, quitar elementos, agregar elementos nuevos, etc., y el espaciado se mantiene coherente. Sin nuevos selectores ni consultas de medios, solo espacio.
Actualizaciones de las Herramientas para desarrolladores de Chromium
Con estas actualizaciones, se realizan cambios en las Herramientas para desarrolladores de Chromium. Observa cómo el panel Estilos controla grid-gap
y gap
ahora 👍.
Herramientas para desarrolladores admite grid-gap
y gap
, ya que gap
es básicamente un alias de las sintaxis anteriores.
Nuevo potencial de diseño
Con Flexbox gap
, desbloqueamos más que por conveniencia. Desbloqueamos diseños potentes,
espaciales e intrínsecos. En el video y la siguiente muestra de código, Grid no puede lograr el diseño que hace Flexbox. La cuadrícula debe tener filas y columnas iguales,
incluso si están asignadas intrínsecamente.
Además, observa lo dinámico que es el espacio entre los elementos secundarios cuando se unen de esa forma de forma intrínseca. Las consultas de medios no pueden detectar uniones como esa para realizar ajustes inteligentes.
Flexbox gap
puede hacerlo por ti en todas las internacionalizaciones.
gap
de varias columnas
Además de que Flexbox admita la sintaxis gap
, los diseños de varias columnas también admiten la sintaxis gap
más corta.
article {
column-width: 40ch;
column-gap: 5ch;
gap: 5ch;
}
Genial.