Canales (Gutters)

Cómo funcionan

• Los canales son los espacios entre el contenido de las columnas, creados por el relleno (padding) horizontal. Establecemos padding-right y padding-left en cada columna, y usamos un margen (margin) negativo para contrarrestar eso al principio y al final de cada fila para alinear el contenido.

• Los canales comienzan con un ancho de 1.5rem (24px). Esto nos permite hacer coincidir nuestra cuadrícula con la escala de los espaciadores de relleno y margen.

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

Canales horizontales

Se pueden usar las clases .gx-* para controlar los anchos de los canales horizontales. Es posible que también deba ajustarse el contenedor padre .container o .container-fluid si se usan canales más grandes para evitar un desbordamiento no deseado, utilizando una utilidad de relleno coincidente. Por ejemplo, en el siguiente ejemplo aumentamos el relleno con .px-4:

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
    <div class="col">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
  </div>
</div>

Una solución alternativa es agregar una envoltura alrededor de la clase .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">Relleno de columna personalizado</div>
    </div>
    <div class="col">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
  </div>
</div>

Canales verticales

Se pueden usar las clases .gy-* para controlar los anchos de los canales verticales dentro de una fila cuando las columnas se envuelven en nuevas líneas. Al igual que los canales horizontales, los canales verticales pueden causar cierto desbordamiento debajo de la clase .row al final de una página. Si esto ocurre, agregas una envoltura 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">Relleno de columna personalizado</div>
    </div>
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
  </div>
</div>

Canales horizontales y verticales

Usa las clases .g-* para controlar los canales horizontales y verticales de la cuadrícula. En el siguiente ejemplo, usamos un ancho de canal más pequeño, por lo que no es necesario usar la clase de envoltura .overflow-hidden.

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
    <div class="col-6">
      <div class="p-3">Relleno de columna personalizado</div>
    </div>
  </div>
</div>

Canales de columnas de fila

También se pueden agregar clases de canales a las columnas de fila. In el siguiente ejemplo, usamos columnas de fila responsivas y clases de canales responsivas.

<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">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
    <div class="col">
      <div class="p-3">Columna de fila</div>
    </div>
  </div>
</div>

Sin canales (No gutters)

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

¿Necesitas un diseño de borde a borde? Elimina el contenedor padre .container o .container-fluid y agrega .mx-0 a la fila .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 los anchos de columna, los niveles responsivos, los 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>

Cambiar los canales (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,
);