Grilla CSS Responsive / Fluid + Fixed

1/jun/2016 2

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

Comentarios

  1. William Garibello Sáenz [#]

    Agradezco este trabajo que me sirvió mucho. Es útil en la mayoría de navegadores y genera poco código, muy bien. Encontré algunas dificultades en su implementación y adaptación a mis necesidades por lo que comparto el resultado y de nuevo reitero la utilidad de este post:

    http://www.csslab.cl/2016/06/01/grilla-css-responsive-fluid-fixed/

    /**
    * http://www.csslab.cl/2016/06/01/grilla-css-responsive-fluid-fixed/
    */

    .grid-table-layout {
    display: table;
    width: 100%;
    /* outline: 1px solid blue; */
    }
    .grid-table-layout.table-fixed {
    table-layout: fixed;
    }
    .grid-table-layout .table-cell {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    }
    /* Para mezclar divisiones adaptativas con fijas */
    .grid-table-layout .fixed-width {
    width: 200px;
    background: violet;
    }

    /* Filas de la grilla para alternar color de fondo */
    .grid-row,
    .grid-row-gris {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    }
    .grid-row-gris {
    background-color: whitesmoke;
    }

    /* Celdas de diferentes tamaños */
    [class*=’grid-celda-‘] {
    box-sizing: border-box;
    margin-bottom: 5px;

    outline: solid thin blue;
    }
    .grid-celda-1 {
    width: 25%;
    }
    .grid-celda-2 {
    width: 50%;
    }
    .grid-celda-3 {
    width: 75%;
    }
    .grid-celda-5 {
    width: 100%;
    }
    .grid-item {
    padding: 10px 0px;
    }

    @media (max-width: 1280px) {
    .grid-row,
    .grid-row-gris {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    }
    [class*=’grid-celda-‘] {
    width: 100%;
    }
    }

    Left / fluid column, con ajustes para cambiar diseño según el ancho de pantalla.

    .column-5

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    .column-1

    right / fixed column
    Pellentesque aliquam placerat ullamcorper. Ut sit amet ex sed ex maximus suscipit sed ac risus. Duis sodales sapien lectus, vel porta nibh eleifend eget.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab