Sistema de cuadrícula (Grid)

Ejemplo

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

<div class="container">
  <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 viewports utilizando nuestras clases de cuadrícula predefinidas. Esas columnas están centradas en la página con el .container principal.

¿Cómo funciona el sistema de cuadrícula (Grid)?

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

• Nuestra cuadrícula admite seis breakpoints responsive. Los breakpoints se basan en media queries min-width, lo que significa que afectan ese breakpoint y todos los anteriores (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 la columna en cada breakpoint.

• Los contenedores centran y rellenan horizontalmente su contenido. Usa .container para un ancho de píxel responsive, .container-fluid para width: 100% en todos los viewports y dispositivos, o un contenedor responsive (p. ej., .container-md) para una combinación entre fluido y anchos en píxeles.

• Las filas son envoltorios para las columnas. Cada columna tiene un padding horizontal (llamado gutter) para controlar el espacio entre ellas. Este padding luego se contrarresta en las filas con márgenes negativos para garantizar que el contenido de tus columnas esté alineado visualmente en el lado izquierdo. Las filas también admiten clases modificadoras para aplicar uniformemente el tamaño de columna y clases de gutter para cambiar el espaciado de tu 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 el número de columnas de plantilla que abarcan (por ejemplo, col-4 abarca cuatro). widths se establecen en porcentajes para que siempre tengas el mismo tamaño relativo.

• Los gutters también son responsive y personalizables. Las clases Gutter están disponibles en todos los breakpoints, con los mismos tamaños que nuestro espaciado de margin y padding. Cambia los gutters horizontales con las clases .gx-*, los gutters verticales con .gy-* o todos los gutters con las clases .g-*. .g-0 también está disponible para eliminar gutters.

• Las variables Sass, los mapas y los mixins alimentan la cuadrícula. Si no deseas usar las clases de cuadrícula predefinidas en Bootstrap, puedes usar nuestra código fuente Sass de cuedrículas para crear el tuyo propio con más marcado semántico. También incluimos algunas propiedades personalizadas de CSS para consumir estas variables de Sass para una mayor flexibilidad.

Ten en cuenta las limitaciones y los errores relacionados con flexbox, como la incapacidad de usar algunos elementos HTML como contenedores flexibles.

Opciones de cuadrícula

El sistema de cuadrícula de Bootstrap puede adaptarse a los seis breakpoints predeterminados y a cualquier breakpoint que personalices. Los seis niveles de cuadrícula predeterminados son los siguientes:

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

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

Columnas con auto-layout

Utiliza clases de columnas de breakpoints específicos para facilitar la asignación de tamaño de las columnas sin una clase numerada explícita como .col-sm-6.

Anchos iguales

Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a cada dispositivo y viewport, desde xs hasta xxl. Agrega cualquier número de clases sin unidades para cada breakpoint que necesites y cada columna tendrá el mismo ancho.

<div class="container">
  <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 un ancho de columna

El auto-layout para las columnas de cuadrícula de 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), combinaciones 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">
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-6">
      2 de 3 (más ancho)
    </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 ancho)
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
</div>

Contenido de ancho variable

Usa las clases col-{breakpoint}-auto para dimensionar las columnas en función del ancho natural de su contenido.

<div class="container">
  <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 responsive

La cuadrícula de Bootstrap incluye seis niveles de clases predefinidas para crear diseños responsive complejos. Personaliza el tamaño de tus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extra grandes como mejor te parezca.

Todos los breakpoints

Para cuadrículas que son iguales desde el dispositivo más pequeño hasta el más grande, usa las clases .col y .col-*. Especifica una clase numerada cuando necesites una columna de tamaño particular; de lo contrario, siéntate libre de apegarte a .col.

<div class="container">
  <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>

De apilado a horizontal

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

<div class="container">
  <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 ejemplo a continuación para tener una mejor idea de cómo funciona todo.

<div class="container">
  <!-- Apila las columnas en dispositivos móviles haciendo una de ancho completo y la otra de ancho medio -->
  <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 cambian hasta 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, en dispositivos móviles y de escritorio -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Columnas de fila

Usa las clases responsive .row-cols-* para establecer rápidamente la cantidad de columnas que mejor representen tu contenido y diseño. Mientras que las clases .col-* normales se aplican a las columnas individuales (p. ej., .col-md-4), las clases de columnas de fila se establecen en el .row principal como acceso directo. Con .row-cols-auto puedes dar a las columnas su ancho natural.

Utiliza estas clases de filas y columnas para crear rápidamente diseños de cuadrícula básicos o para controlar los diseños de tus tarjetas.

<div class="container">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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 que lo acompaña, row-cols():

.element {
  // Tres columnas al inicio
  @include row-cols(3);

  // Cinco columnas desde el breakpoint medium hacia arriba
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Anidamiento

Para anidar tu contenido con la cuadrícula predeterminada, agrega un nuevo .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 suman 12 o menos (no es necesario que uses las 12 columnas disponibles).

<div class="container">
  <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>

Sass

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

Variables

Las variables y los mapas determinan el número de columnas, el ancho del gutter y el punto de media query en el que comienzan las columnas flotantes. 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-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

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

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

// Hacer que el elemento esté listo para la cuadrícula (aplicando todo menos 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);

// Compensar 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. Este es un ejemplo del uso de la configuración predeterminada para crear un diseño de dos columnas con un espacio entre ellas.

.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>

Personalización de la cuadrícula

Utilizando nuestras variables y mapas Sass de cuadrícula incorporados, es posible personalizar completamente las clases de cuadrícula predefinidas. Cambia la cantidad de niveles, las dimensiones de las media queries y los anchos de los contenedores, luego vuelve a compilar.

Columnas y gutters

El número de columnas de la cuadrícula se puede modificar mediante variables Sass. $grid-columns se utiliza para generar los anchos (en porcentaje) de cada columna individual, mientras que $grid-gutter-width establece el ancho de los gutters (espacios de separación) de las columnas.

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

Niveles de cuadrícula

Yendo más allá de las columnas en sí, también puedes personalizar la cantidad de niveles de cuadrícula. Si quisieras solo 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 volver a compilar. Al hacerlo, se generará un nuevo conjunto de clases de cuadrícula predefinidas para anchos de columna, compensaciones y ordenación. Las utilidades de visibilidad responsive también se actualizarán para usar los breakpoints personalizados. Asegúrate de establecer los valores de cuadrícula en px (no en rem, em o %).