Grilla CSS Responsive / Fluid + Fixed

Grillas CSS abundan y son múltiples sus utilidades (aunque se sigan usando de forma incorrecta y abusando de sus componentes asociados pero enfin, herrar es umano). Vinieron para quedarse por mucho más tiempo y nos han acostumbrado a los layout tan comunes que hoy en día todas nos parecen iguales: 3 columnas, grilla 12 columnas, responsive, líquido… a fin de cuentas todos terminan pareciéndose.

¡Al-2016-todos-los-sitios-se-ven-iguales!

Pero sucedió lo que temía. Llegó cliente -y la diseñadora de cómplice- con un requerimiento que me hizo erizar los pelos: “Jorge, estamos pensando en tener una grilla responsive pero la columna de la derecha tenga un ancho fijo de 200px. Y que en el breakpoint de móviles necesitamos que esta columna desaparezca”.

giphy

Grilla Responsive pero con columna fija. OK he visto eso, donde la columna del menú (generalmente de la derecha) tiene ancho fijo y la otra columna de contenido con porcentaje y un margin-left es el ancho de la columna fija.

OK pero esta es responsive. No creo haber visto algo así. Entonces me puse a pensar, prototipar, y encontrar con la solución más crossbrowsing posible, y a continuación les presento lo logrado incluyendo soporte IE8+.

La solución

Preferí utilizar la propiedad CSS display: table; y sus anexas por el crossbrowsing y porque me permitía principalmente contener un layout fijo/elástico sin añadir mucho código o raros hacks.

HTML:

<div class="table-layout table-fixed">
  <!-- left / fluid column-->
  <div class="table-cell">
    <h1>fluid column</h1>
  </div>
  <!-- right / fixed column-->
  <div class="table-cell fixed-width">
    <h1>fixed column: 200px</h1>
  </div>
</div>

CSS:

/* la tabla padre, contenedora */
.table-layout {
  display: table;
  width: 100%;
}
    .table-layout.table-fixed {
      table-layout: fixed;
    }
    /* cada celda lateral */
    .table-layout .table-cell {
      display: table-cell;
      width: 100%;
      vertical-align: top; /* necesario para Safari y Firefox */
    }
    .table-layout .fixed-width {
      width: 200px; /* el ancho fijo que estimes necesario */
    }

EJEMPLO 1

JS Bin on jsbin.com

EJEMPLO 2

Agregando la propiedad CSS table-layout: fixed; pude posicionar un carrusel adentro de un table-cell sin que se desarmara y se fuera todo al carajo:

JS Bin on jsbin.com

EJEMPLO 3

Con una columna fluída y una fija, puedo posicionar en la columna fluída cualquier grilla CSS de las columnas que fueran necesarias:

JS Bin on jsbin.com

EJEMPLO 4

Finalmente, esta solución me permitía esconder la columna fija cuando la resolución alcanzara -por ejemplo- el breakpoint de dispositivos móviles:

JS Bin on jsbin.com

CSSLab