Retícula

Retícula de 12 columnas que se utiliza mediante clases específicas, para facilitar la composición de cualquier tipo de layout y sus variaciones en los distintos puntos de corte.

Contenido

• Cómo se usa
• Opciones
• Ejemplos
• Retícula flexible - Flexbox

Cómo se usa

Para utilizar la retícula, se necesitan tres tipos de elementos: los contenedores, las filas y las columnas.

Los contenedores .container son los encargados de centrar el contenido y de alinear la retícula.

Las filas .row son grupos horizontales de columnas que permiten la alineación correcta de las columnas.

El contenido se debe poner dentro de columnas, que deben ser elementos hijos directos inmediatos de una fila .row.

Mediante las clases de columna indicamos el número de columnas (dentro de las 12 totales de la retícula) que queremos utilizar. Las clases de columna constan del prefijo col-, el punto de corte al que estamos aplicando la retícula xs-, sm-, md-, lg- o xl-, y el número de columnas. Por ejemplo, si queremos que un elemento ocupe 4 columnas en el breakpoint medio, usaremos la clase .col-md-4.

Las columnas son fluidas (porcentuales) y tienen una separación fija entre ellas.

Disponemos de 5 retículas, una para cada punto de corte. Cada una de ellas se aplica en el punto de corte en cuestión, y en todos los superiores.

<div class="container">
  <div class="row">
    <div class="col-md-4">Elemento de 4 columnas</div>
    <div class="col-md-4">Elemento de 4 columnas</div>
    <div class="col-md-4">Elemento de 4 columnas</div>
  </div>
</div>

Opciones

Podemos ver las distintas clases disponibles para crear retículas en esta tabla:

Ejemplos

Utilizando únicamente las clases .col-md-* podemos crear una retícula simple en la que los distintos elementos se muestran uno debajo de otro en los puntos de cortes más pequeños, y horizontalmente en tamaños mayores.

<div class="container">
  <div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div

Podemos refinar cómo queremos que nuestra retícula se vea en otros puntos de corte combinando las distintas clases de columna.

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
    <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
    <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
  </div>
</div>

Retícula flexible - Flexbox

En el caso de disponer de una colección de elementos con diferentes alturas se puede alinear todas las alturas al elemento más alto mediante la clase .flexbox-layout que activa las retículas del tipo caja flexible. A continuación por cada uno de los elementos repetidos se debe añadir la clase .flexbox--item para alinear las alturas.

<div class="row flexbox-layout">
  <div class="col-xs-12 col-md-3 col-lg-3">
    <div class="card flexbox--item">
      <div class="card__contents">
        <h3>Ellentesque habitant morbi tristique senectus et netus</h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3 col-lg-3">
    <div class="card flexbox--item">
      <div class="card__contents">
        <h3>Ellentesque habitant morbi tristique senectus et netus</h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3 col-lg-3">
    <div class="card flexbox--item">
      <div class="card__contents">
        <h3>Ellentesque habitant morbi tristique senectus et netus</h3>
        <p>Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3 col-lg-3">
    <div class="card flexbox--item">
      <div class="card__contents">
        <h3>Ellentesque habitant morbi tristique senectus et netus</h3>
      </div>
    </div>
  </div>
</div>