Grilla CSS Responsive / Fluid + Fixed

1/Jun/2016 7544

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. ivermectin human dosage [#]

    ivermectin http://stromectolforte.com/# ivermectin stromectol cost

  2. levitra tablets 10mg at levitradd [#]

    why are my hearing aids squealing http://vardenafilz.com – cialis viagra levitra comparison

  3. ivermectin on ebay 50ml [#]

    This design is steller! You most certainly know how to keep a reader entertained.

    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job.
    I really loved what you had to say, and more than that,
    how you presented it. Too cool! http://harmonyhomesltd.com/Ivermectinum-overdose.html

  4. ivermectin for humans amazon [#]

    ivermectin https://stromectolforte.com/# ivermectina Г  venda ivermectin 18mg

  5. ivermectin for humans where to buy [#]

    stromectol indications and usage https://stromectolforte.com/ kjГёp ivermectin nz ivermectin tablets

  6. stromectolforte.com [#]

    ivermectina dosis en humanos https://stromectolforte.com/ ivermectin without prescription ivermectin human dosage

  7. modafinilschedule [#]

    modafinil mechanism of action provigil and alcohol

  8. bactrim dosage [#]

    drug sulfamethoxazole trimethoprim sulfamethoxazole

  9. albuterolinh.com [#]

    how long after hiv exposure until seroconversion? http://albuterolinh.com – ventolin inhaler

  10. ivermectin untuk dijual [#]

    ivermectin tablets http://stromectolforte.com/# ivermectin tablets ivermectin

  11. ivermectina 1% crema generica [#]

    posologie du comprimГ© d’ivermectine 3 mg https://stromectolforte.com/ ivermectin side effects ivermectin

  12. stromectol for humans [#]

    comprimidos de ivermectina reino unido http://stromectolforte.com/# buy 3 mg ivermectin tablets ivermectin 1.87% humans

  13. bactrim antibiotic [#]

    bactrim ds Trimethoprim 100mg

  14. Htbnquiet [#]

    venda de viagra rj como funciona la pastilla de viagra

  15. stromectolforte.com [#]

    stromectol 6 mg https://stromectolforte.com/# ivermectin for humans where to buy locally near me ivermectin canada

  16. stromectolforte.com [#]

    generic stromectol http://stromectolforte.com/# ivermektin tabletter uk ivermectin for humans for sale

  17. stromectol ivermectin [#]

    General Information Here this product
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectinst.com ivermectin 12 mg
    https://ivermectinstrom.com stromectol
    https://ivermectinsts.com ivermectin tablets for humans for sale
    https://ivermectinsts.com ivermectin tablets over counter

  18. ivermectin 12 mg [#]

    Accustomed Information About this offshoot
    https://ivermectinstrom.com stromectol
    https://ivermectinst.com ivermectin 6 mg
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectinsts.com ivermectin tablets
    https://ivermectstromect.com ivermectin tablets

  19. FritzPeerb [#]

    viagra white pills watch viagra work video can i buy cialis online should i take viagra dollar tree coupon policy pfizer enrollment form for group a medicines

  20. ivermectin 6 mg [#]

    General Information About this offshoot
    https://ivermectinsts.com ivermectin 6 mg
    https://ivermectinst.com ivermectin for humans
    https://ivermectinst.com stromectol
    https://stromectolivermect.com ivermectin for sale
    https://stromectolivermect.com stromectol

  21. buy stromectol [#]

    ivermektin online vГЎsГЎrlГЎs http://stromectolforte.com/ coronavirus cure ivermectin for humans for sale

  22. ivermectin 12 mg [#]

    Global Low-down Here this offshoot
    https://ivermectinsts.com ivermectin 12 mg
    https://ivermectinstrom.com ivermectin tablets over counter
    https://ivermectinstrom.com ivermectin 3 mg
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin 6 mg

  23. stromectolforte.com [#]

    stromectol for humans http://stromectolforte.com/# stromectol buy online buy ivermectin online for dogs

  24. prednisonemedicine [#]

    https://deltasoneprednisone.com/ prednisolone online

  25. Joshuawag [#]

    walmart retail prescription program drug list samples of viagra and cialis cialis online where can i purchase zytenz bulk herb seeds

  26. accutane before and after [#]

    buy isotretinoine what is accutane

  27. modafinilweightloss [#]

    provigil vs adderall buy modafinil online

  28. ivermectin tablets for humans for sale [#]

    General Low-down Far this outcome
    https://ivermectinstrom.com ivermectin 12 mg
    https://ivermectinst.com ivermectin over the counter
    https://ivermectinsts.com ivermectin over the counter
    https://ivermectinst.com stromectol ivermectin
    https://ivermectinstrom.com ivermectin for sale

  29. GustavoVet [#]

    dissertation abstracts online
    customwritings com

  30. ivermectin 6 mg [#]

    Non-specific Low-down Here this by-product
    https://ivermectinstrom.com ivermectin 3 mg
    https://ivermectstromect.com 3 mg ivermectine over counter
    https://ivermectinst.com ivermectin 6 mg
    https://ivermectinsts.com ivermectin for humans
    https://ivermectstromect.com ivermectin for humans

  31. modafinilwarnings [#]

    provigil modafinil half life

  32. FritzPeerb [#]

    commonly prescribed medications for autism trusted generic viagra sites cialis without prescription walgreens drug price check how much is viagra cost how to boost viagra effects

  33. Maryblabs [#]

    cost of cialis in australia

  34. ivermectin 12 mg [#]

    General Message Here this by-product
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectinst.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin for sale
    https://ivermectinstrom.com ivermectin 6 mg
    https://ivermectstromect.com stromectol ivermectin

  35. provigiluses [#]

    modafinil mechanism of action provigil over the counter

  36. ordermodafinil [#]

    how long does modafinil last modafinil

  37. accutane before and after [#]

    https://accutaneisotretinoine.com/ accutane before and after

  38. cialis dosage [#]

    buy cialis usa cheap cialis

  39. ivermectin for sale [#]

    Global Low-down Fro this product
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectinstrom.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin for humans
    https://ivermectstromect.com ivermectin over the counter
    https://stromectolivermect.com ivermectin for sale for humans

  40. stromectol [#]

    General Dope Far this by-product
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectinsts.com ivermectin tablets
    https://ivermectinst.com ivermectin for humans
    https://ivermectstromect.com stromectol
    https://ivermectstromect.com ivermectin for sale

  41. stromectol for lice [#]

    If you desire to grow your familiarity just keep
    visiting this web site and be updated with the most
    up-to-date gossip posted here. http://harmonyhomesltd.com/Ivermectinum-precautions.html

  42. stromectol [#]

    Accustomed Information Fro this outcome
    https://ivermectinst.com ivermectin for sale
    https://ivermectinsts.com ivermectin for sale humans
    https://ivermectinstrom.com ivermectin for sale
    https://stromectolivermect.com ivermectin tablets
    https://ivermectinstrom.com ivermectin for humans

  43. stromectol [#]

    General Message Here this product
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectinst.com ivermectin 12 mg
    https://ivermectstromect.com ivermectin for sale for humans

CSSLab