Gutters

Cómo funcionan

• Los gutters son los espacios entre el contenido de las columnas, creados por el padding horizontal. Configuramos padding-right y padding-left en cada columna y usamos un margin negativo para compensarlo al principio y al final de cada fila para alinear el contenido.

• Los gutters comienzan en 1.5rem (24px) de ancho. Esto nos permite hacer coincidir nuestra cuadrícula con la escala de espaciadores de margin y padding.

• Los gutters se pueden ajustar de forma responsive. Utiliza clases de gutters específicas de puntos de interrupción para modificar gutters horizontales, verticales y todos los gutters.

Gutters horizontales

.gx-* (clases) se pueden usar para controlar el ancho del gutter horizontal. Es posible que sea necesario ajustar el padre .container o .container-fluid si también se utilizan gutters más grandes para evitar desbordamientos no deseados, utilizando una utilidad de relleno coincidente. Por ejemplo, en el siguiente ejemplo hemos aumentado el relleno con .px-4:

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Una solución alternativa es agregar un contenedor alrededor del .row con la clase .overflow-hidden:

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Gutters verticales

.gy-* (clases) se pueden usar para controlar el ancho del canal vertical dentro de una fila cuando las columnas se ajustan a nuevas líneas. Al igual que los márgenes horizontales, los márgenes verticales pueden provocar cierto desbordamiento debajo del .row al final de una página. Si esto ocurre, agrega un contenedor alrededor de .row con la clase .overflow-hidden:

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Gutters horizontales y verticales

Usa las clases .g-* para controlar los gutters horizontales y verticales de la cuadrícula. En el siguiente ejemplo, utilizamos un ancho de gutter más pequeño, por lo que no es necesaria la clase contenedora .overflow-hidden.

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Gutters filas columnas

Las clases de canal también se pueden agregar a columnas de fila. En el siguiente ejemplo, utilizamos columnas de fila y clases de gutter responsive.

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

Sin gutters

Los márgenes entre columnas en nuestras clases de cuadrícula predefinidas se pueden eliminar con .g-0. Esto elimina los margin negativos de .row y el padding horizontal de todas las columnas secundarias inmediatas.

¿Necesitas un diseño de borde a borde? Suelta el .container o .container-fluid principal y agrega .mx-0 al .row para evitar el desbordamiento.

En la práctica, así es como se ve. Ten en cuenta que puedes continuar usando esto con todas las demás clases de cuadrícula predefinidas (incluidos anchos de columna, niveles responsive, reordenamientos y más).

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Cambia los gutters

Las clases se construyen a partir del mapa Sass $gutters que se hereda del mapa Sass $spacers.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);