Sistema de cuadrícula (Grid system)

Ejemplo

El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y columnas para diseñar y alinear el contenido. Está construido con flexbox y es totalmente responsivo. A continuación se muestra un ejemplo y una explicación detallada de cómo se integra el sistema de cuadrícula.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Columna
    </div>
    <div class="col">
      Columna
    </div>
    <div class="col">
      Columna
    </div>
  </div>
</div>

El ejemplo anterior crea tres columnas de igual ancho en todos los dispositivos y ventanas gráficas utilizando nuestras clases de cuadrícula predefinidas. Esas columnas están centradas en la página con el contenedor padre .container.

Cómo funciona

Desglosándolo, así es como se integra el sistema de cuadrícula:

• Nuestra cuadrícula admite seis puntos de interrupción responsivos. Los puntos de interrupción se basan en media queries min-width, lo que significa que afectan a ese punto de interrupción y a todos los que están por encima de él (por ejemplo, .col-sm-4 se aplica a sm, md, lg, xl y xxl). Esto significa que puedes controlar el tamaño y el comportamiento del contenedor y de las columnas en cada punto de interrupción.

• Los contenedores centran y rellenan horizontalmente tu contenido. Usa .container para un ancho de píxel responsivo, .container-fluid para width: 100% en todas las ventanas gráficas y dispositivos, o un contenedor responsivo (por ejemplo, .container-md) para una combinación de anchos fluidos y de píxeles.

• Las filas (rows) son envolturas para las columnas. Cada columna tiene un relleno horizontal (padding, llamado canal o gutter) para controlar el espacio entre ellas. Este relleno luego se contrarresta en las filas con márgenes negativos para garantizar que el contenido de sus columnas esté visualmente alineado en el lado izquierdo. Las filas también admiten clases modificadoras para aplicar uniformemente el tamaño de las columnas y clases de canales (gutters) para cambiar el espaciado de su contenido.

• Las columnas son increíblemente flexibles. Hay 12 columnas de plantilla disponibles por fila, lo que te permite crear diferentes combinaciones de elementos que abarcan cualquier número de columnas. Las clases de columna indican la cantidad de columnas de plantilla que se deben abarcar (por ejemplo, col-4 abarca cuatro). Los anchos (widths) se establecen en porcentajes para que siempre tengas el mismo tamaño relativo.

• Los canales (gutters) también son responsivos y personalizables. Las clases de canales están disponibles en todos los puntos de interrupción, con los mismos tamaños que nuestro espaciado de margen y relleno. Cambia los canales horizontales con clases .gx-*, los canales verticales con .gy-* o todos los canales con clases .g-*. .g-0 también está disponible para eliminar los canales.

• Las variables, mapas y mixins de Sass potencian la cuadrícula. Si no deseas utilizar las clases de cuadrícula predefinidas en Bootstrap, puedes utilizar el Sass de origen de nuestra cuadrícula para crear el tuyo propio con un marcado más semántico. También incluimos algunas propiedades CSS personalizadas para consumir estas variables Sass para una flexibilidad aún mayor para ti.

Ten en cuenta las limitaciones y los errores (bugs) relacionados con flexbox, como la imposibilidad de usar algunos elementos HTML como contenedores flex.

Opciones de cuadrícula

El sistema de cuadrícula de Bootstrap se puede adaptar a los seis puntos de interrupción predeterminados y a cualquier punto de interrupción que personalices. Los seis niveles de cuadrícula predeterminados son los siguientes:

• Extra pequeño (xs)
• Pequeño (sm)
• Mediano (md)
• Grande (lg)
• Extra grande (xl)
• Extra extra grande (xxl)

Como se indicó anteriormente, cada uno de estos puntos de interrupción tiene su propio contenedor, prefijo de clase único y modificadores. Así es como cambia la cuadrícula en estos puntos de interrupción:

Columnas de diseño automático (Auto-layout columns)

Utiliza clases de columna específicas de puntos de interrupción para cambiar fácilmente el tamaño de las columnas sin una clase numerada explícita como .col-sm-6.

Ancho igual

Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a cada dispositivo y ventana gráfica, desde xs hasta xxl. Agrega cualquier cantidad de clases sin unidad para cada punto de interrupción que necesites y cada columna tendrá el mismo ancho.

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 de 2
    </div>
    <div class="col">
      2 de 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col">
      2 de 3
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
</div>

Establecer el ancho de una columna

El diseño automático para las columnas de la cuadrícula flexbox también significa que puedes establecer el ancho de una columna y hacer que las columnas hermanas cambien de tamaño automáticamente a su alrededor. Puedes usar clases de cuadrícula predefinidas (como se muestra a continuación), mixins de cuadrícula o anchos en línea. Ten en cuenta que las otras columnas cambiarán de tamaño sin importar el ancho de la columna central.

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-6">
      2 de 3 (más grande)
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-5">
      2 de 3 (más grande)
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
</div>

Contenido de ancho variable

Usa clases col-{breakpoint}-auto para dimensionar las columnas según el ancho natural de su contenido.

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 de 3
    </div>
    <div class="col-md-auto">
      Contenido de ancho variable
    </div>
    <div class="col col-lg-2">
      3 de 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-md-auto">
      Contenido de ancho variable
    </div>
    <div class="col col-lg-2">
      3 de 3
    </div>
  </div>
</div>

Clases responsivas

La cuadrícula de Bootstrap incluye seis niveles de clases predefinidas para crear diseños responsivos complejos. Personaliza el tamaño de tus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extra grandes según lo consideres conveniente.

Todos los puntos de interrupción

Para cuadrículas que son iguales desde los dispositivos más pequeños hasta los más grandes, usa las clases .col y .col-*. Especifica una clase numerada cuando necesites una columna de un tamaño particular; de lo contrario, no dudes en limitarte a .col.

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Apilado a horizontal

Usando un único conjunto de clases .col-sm-*, puedes crear un sistema de cuadrícula básico que comienza apilado y se vuelve horizontal en el punto de interrupción pequeño (sm).

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mezclar y combinar

¿No quieres que tus columnas simplemente se apilen en algunos niveles de cuadrícula? Usa una combinación de diferentes clases para cada nivel según sea necesario. Mira el siguiente ejemplo para tener una mejor idea de cómo funciona todo.

<div class="container text-center">
  <!-- Apila las columnas en dispositivos móviles haciendo que una sea de ancho completo y la otra de medio ancho -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Las columnas comienzan con un 50% de ancho en dispositivos móviles y aumentan a un 33.3% de ancho en computadoras de escritorio -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Las columnas siempre tienen un 50% de ancho, tanto en dispositivos móviles como en computadoras de escritorio -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Columnas de fila (Row columns)

Usa las clases responsivas .row-cols-* para establecer rápidamente la cantidad de columnas que mejor rendericen tu contenido y diseño. Mientras que las clases .col-* normales se aplican a las columnas individuales (por ejemplo, .col-md-4), las clases de columnas de fila se establecen en el padre .row como un atajo. Con .row-cols-auto puedes dar a las columnas su ancho natural.

Usa estas clases de columnas de fila para crear rápidamente diseños de cuadrícula básicos o para controlar los diseños de tus tarjetas (cards).

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col-6">Columna</div>
    <div class="col">Columna</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
    <div class="col">Columna</div>
  </div>
</div>

También puedes usar el mixin de Sass correspondiente, row-cols():

.element {
  // Tres columnas para comenzar
  @include row-cols(3);

  // Cinco columnas desde el punto de interrupción mediano hacia arriba
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Anidamiento (Nesting)

Para anidar tu contenido con la cuadrícula predeterminada, agrega una nueva clase .row y un conjunto de columnas .col-sm-* dentro de una columna .col-sm-* existente. Las filas anidadas deben incluir un conjunto de columnas que sumen 12 o menos (no es obligatorio que utilices las 12 columnas disponibles).

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Nivel 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Nivel 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Nivel 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

CSS

Al usar los archivos Sass de origen de Bootstrap, tienes la opción de usar variables y mixins de Sass para crear diseños de página personalizados, semánticos y responsivos. Nuestras clases de cuadrícula predefinidas usan estas mismas variables y mixins para proporcionar un conjunto completo de clases listas para usar para diseños responsivos rápidos.

Variables Sass

Las variables y los mapas determinan el número de columnas, el ancho del canal (gutter) y el punto de media query en el que se debe comenzar a flotar las columnas. Los usamos para generar las clases de cuadrícula predefinidas documentadas anteriormente, así como para los mixins personalizados que se enumeran a continuación.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixins Sass

Los mixins se utilizan junto con las variables de la cuadrícula para generar CSS semántico para columnas de cuadrícula individuales.

// Crea una envoltura para una serie de columnas
@include make-row();

// Hace que el elemento esté listo para la cuadrícula (aplicando todo excepto el ancho)
@include make-col-ready();

// Sin valores de tamaño opcionales, el mixin creará columnas iguales (similar a usar .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Desplazamiento con márgenes
@include make-col-offset($size, $columns: $grid-columns);

Ejemplo de uso

Puedes modificar las variables a tus propios valores personalizados o simplemente usar los mixins con sus valores predeterminados. Aquí hay un ejemplo de cómo usar la configuración predeterminada para crear un diseño de dos columnas con un espacio intermedio.

.example-container {
  @include make-container();
  // Asegúrate de definir este ancho después del mixin para sobrescribir
  // `width: 100%` generado por `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Contenido principal</div>
    <div class="example-content-secondary">Contenido secundario</div>
  </div>
</div>

Personalizando la cuadrícula

Usando nuestras variables y mapas Sass de cuadrícula incorporados, es posible personalizar completamente las clases de cuadrícula predefinidas. Cambia el número de niveles, las dimensiones de la media query y los anchos de los contenedores; luego recompila.

Columnas y canales (gutters)

El número de columnas de la cuadrícula se puede modificar mediante variables de Sass. $grid-columns se usa para generar los anchos (en porcentaje) de cada columna individual, mientras que $grid-gutter-width establece el ancho de los canales (gutters) de las columnas. $grid-row-columns se usa para establecer el número máximo de columnas de .row-cols-*, cualquier número por encima de este límite se ignora.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Niveles de cuadrícula (Grid tiers)

Yendo más allá de las columnas mismas, también puedes personalizar el número de niveles de cuadrícula. Si solo quisieras cuatro niveles de cuadrícula, actualizarías $grid-breakpoints y $container-max-widths a algo como esto:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Al realizar cambios en las variables o mapas de Sass, deberás guardar los cambios y recompilar. Al hacerlo, se generará un conjunto completamente nuevo de clases de cuadrícula predefinidas para anchos de columna, desplazamientos y ordenación. Las utilidades de visibilidad responsiva también se actualizarán para usar los puntos de interrupción personalizados. Asegúrate de establecer los valores de la cuadrícula en px (no en rem, em o %).