Sistema de Cuadrícula

¿Qué es una cuadrícula (Grid)?#

Según la definición de Wikipedia:

En el diseño gráfico, una cuadrícula es una estructura (usualmente bidimensional) compuesta por una serie de líneas verticales y horizontales entrecruzadas que se utilizan para organizar el contenido. Es ampliamente utilizada en el diseño de impresión para la disposición y estructura del contenido. En el diseño web, es un método para crear rápidamente diseños consistentes y utilziar eficazmente HTML y CSS.

En términos simples, las cuadrículas en el diseño web sirven para organizar el contenido, hacer que los sitios sean fáciles de navegar y reducir la carga en el lado del usuario.

¿Qué es el sistema de cuadrícula de Bootstrap?#

La documentación oficial de Bootstrap describe el sistema de cuadrícula de la siguiente manera:

Bootstrap incluye un sistema de cuadrícula responsivo, priorizando dispositivos móviles y de ancho variable, que puede expandirse apropiadamente hasta 12 columnas a medida que el dispositivo o el tamaño de la ventana aumentan. Contiene clases predefinidas para opciones de diseño simples, así como potentes clases mixin para generar diseños más semánticos.

Analicemos esta afirmación. Bootstrap 3 está diseñado con prioridad a dispositivos móviles, lo que significa que el código de Bootstrap comienza para dispositivos de pantalla pequeña (como móviles y tablets) y luego se extiende a componentes y cuadrículas para dispositivos de pantalla más grande (como portátiles y ordenadores de escritorio).

Estrategia Prioritaria para Dispositivos Móviles#

• Contenido
• Determinar qué es lo más importante.
• Diseño
• Priorizar el diseño para anchos más pequeños.
• El CSS base es prioritario para dispositivos móviles, con consultas de medios para tablets y ordenadores de escritorio.
• Mejora Progresiva
• Añadir elementos a medida que aumenta el tamaño de la pantalla.

El sistema de cuadrícula responsiva se divide automáticamente en hasta 12 columnas a medida que la pantalla o la ventana (viewport) aumentan de tamaño.

Funcionamiento del Sistema de Cuadrícula de Bootstrap#

El sistema de cuadrícula crea la disposición de la página mediante una serie de filas y columnas que contienen contenido. A continuación se explica cómo funciona el sistema de cuadrícula de Bootstrap:

• Las filas deben colocarse dentro de la clase .container para obtener una alineación y relleno adecuados.
• Utilice las filas para crear grupos horizontales de columnas.
• El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser elementos secundarios directos de las filas.
• Las clases de cuadrícula predefinidas, como .row y .col-xs-4, pueden utilizarse para crear rápidamente diseños de cuadrícula. Las clases mixin de LESS pueden utilizarse para diseños más semánticos.
• Las columnas crean espacios entre el contenido de las columnas mediante relleno (padding). Este relleno se compensa con un margen negativo en .rows para las primeras y últimas columnas.
• El sistema de cuadrícula se crea especificando las doce columnas disponibles que desea cruzar. Por ejemplo, para crear tres columnas iguales, utilice tres .col-xs-4.

Consultas de Medios#

Las consultas de medios son "reglas CSS condicionales" muy elegantes. Solo se aplican CSS basado en ciertas condiciones específicas. Si se cumplen esas condiciones, se aplican los estilos correspondientes.

Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido según el tamaño de la ventana. Las siguientes consultas de medios se utilizan en los archivos LESS para crear los puntos de clave del sistema de cuadrícula de Bootstrap.

/* Dispositivos muy pequeños (teléfonos, menos de 768px) */
/* Por defecto en Bootstrap no hay consultas de medios */

/* Dispositivos pequeños (tablets, 768px en adelante) */@media (min-width: @screen-sm-min) { ... }

/* Dispositivos medianos (ordenadores de escritorio, 992px en adelante) */@media (min-width: @screen-md-min) { ... }

/* Dispositivos grandes (grandes ordenadores de escritorio, 1200px en adelante) */@media (min-width: @screen-lg-min) { ... }

A veces también incluimos max-width en las consultas de medios para limitar el efecto CSS a un rango más pequeño de tamaños de pantalla.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Las consultas de medios tienen dos partes: primero una especificación del dispositivo y luego una regla de tamaño. En los ejemplos anteriores, se establecen las siguientes reglas:

Veamos esta línea de código:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Para todos los dispositivos con min-width: @screen-sm-min, si el ancho de la pantalla es menor que @screen-sm-max, se realizarán algunas acciones.

Opciones de Cuadrícula#

La siguiente tabla resume cómo funciona el sistema de cuadrícula de Bootstrap en múltiples dispositivos:

Estructura básica de la cuadrícula#

Aquí está la estructura básica de la cuadrícula de Bootstrap:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>       
   </div>
   <div class="row">...</div>
</div>
<div class="container">....
<br><br>

Diseño en línea (arrastrar y soltar para previsualizar)

Etiquetas de Aviso

Fuente: wizard_Q

Buen ejemplo: https://getbootstrap.com/