CSS grid-gap

<grid-gap>, así como <row-gap> y <column-gap>, controlan el espacio entre las celdas de una cuadrícula. Permiten separar fácilmente los elementos sin usar márgenes adicionales.

Espaciado uniforme con grid-gap

La propiedad <grid-gap> es una forma abreviada para definir el espacio entre filas y columnas al mismo tiempo. Es una manera simple de mantener la cuadrícula ordenada y legible.

En este ejemplo se crea una cuadrícula de dos columnas con 20px de espacio entre las celdas.

Control separado de filas y columnas

<row-gap> y <column-gap> permiten establecer de forma independiente los espacios entre filas y columnas. Esto es útil si se busca un diseño diferente.

En este ejemplo, el espacio entre filas es de 10px y entre columnas de 30px.

Consejos para usar grid-gap

Configurar correctamente los espacios mejora la estructura visual y la experiencia de usuario. Algunos consejos:

• Usa <grid-gap> en lugar de márgenes cuando necesites un espaciado uniforme en cuadrículas.
• En vistas móviles, aplica valores de gap más pequeños para ajustarse mejor a la pantalla.
• Combina <row-gap> y <column-gap> si necesitas diferentes espacios entre filas y columnas.