itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-3185 page-child parent-pageid-3152 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

08. Huecos en Grid

Por defecto, la cuadrícula tiene todas sus celdas pegadas a sus celdas contiguas. Aunque sería posible darle un margin a las celdas dentro del contenedor, existe una forma más apropiada, que evita los problemas clásicos de los modelos de caja: los huecos (gutters).

Para especificar los huecos (espacio entre celdas) podemos utilizar las propiedades column-gap y/o row-gap. En ellas indicaremos el tamaño de dichos huecos.

Propiedad Descripción
column-gap Establece el  de los huecos entre columnas (líneas verticales).
row-gap Establece el  de los huecos entre filas (líneas horizontales).

Cojamos el ejm del capítulo anterior. En él, le indicamos estas propiedades para colocar huecos entre las celdas de la cuadrícula. El código a añadir al ejemplo anterior sería el siguiente:

Ejm

    .grid {
      column-gap: 100px;
      row-gap: 10px;
    }

Con este código, obtenemos un resultado como el siguiente, indicando huecos entre columnas de 100px y huecos entre filas de 10px.

Huecos en Grid

Atajo: Grid con huecos

Existe una propiedad de atajo para las propiedades column-gap y row-gap, permitiéndonos la posibilidad de no tener que indicarlas por separado.

La propiedad en cuestión sería gap y se utilizaría de la siguiente forma.

Ejm

    .grid {
      /* gap: <row-gap> <column-gap> */
      gap: 20px 80px;
      /* Equivalente a gap: 40px 40px; */
      /* gap: <rowcolumn-gap> */
      gap: 40px;
    }

Nota: Antiguamente, las propiedades column-gaprow-gap y gap eran conocidas como grid-column-gapgrid-row-gap y grid-gap, por lo que aún se puede encontrar información obsoleta que las mencione. Hoy en día deberías utilizar las tres primeras en su lugar.

Scroll al inicio