Chromium llega a la brecha de Flexbox

La propiedad gap de CSS está aquí para los motores de diseño de CSS Flexbox y de varias columnas de Chromium.

Adam Argyle

David Grogan

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.