Grilla CSS Responsive / Fluid + Fixed

1/Jun/2016 4693

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. azithromycin pharmacokinetics [#]

    I savor, lead to I found exactly what I used to be taking a look for.

    You’ve ended my four day long hunt! God Bless you man. Have a great day.
    Bye http://herreramedical.org/azithromycin

  2. kelaGyncclieria [#]

    clonopine meaning https://chloroquine500mg.com/ – is hydroxychloroquine aralen medicine

  3. ampicillin for uti [#]

    You really make it seem so easy along with your
    presentation however I in finding this matter to be actually something which I think I’d by
    no means understand. It kind of feels too
    complex and very broad for me. I am taking a look ahead to your
    next post, I will try to get the dangle of it! http://antiibioticsland.com/Ampicillin.htm

  4. kelaGyncclieria [#]

    plaquenil side effects https://hydroxychloroquine20.com/ – chloroquine side effects buy chloriquine

  5. kelaGyncclieria [#]

    aralen medication https://chloroquinestablet.com/ – chloroquine phosphate canada chloroquine prophylaxis

  6. kelaGyncclieria [#]

    trump hydroxychloroquine https://hydroxychloroqui.com/ – doctors for hydroxychloroquine chlorquin

  7. kelaGyncclieria [#]

    chloroquine hcl https://hydro-chloroquine.com/ – chloroquine otc canada buy chloroquine

  8. tadalafil 40 mg daily [#]

    tadalafil generic https://tadalafilgenc.com/ tadalafil max dose generic tadalafil united states

  9. tadalis sx [#]

    tadalafil online https://nextadalafil.com/ tadalafil max dose generic tadalafil united states

  10. kelaGyncclieria [#]

    hydroxyquine https://hydrochloroquine200.com/ – hydroxychloroquine chloroquine over the counter

  11. Vikoiskl [#]

    best place to buy viagra online – viagra price cheap viagra online
    how much is viagra https://viagrasv.com/#

  12. tadalafil generic [#]

    tadalafil gel https://superactivetadalafil.com/ buy tadalafil us tadalafil 40

  13. tadalafil 40 mg daily [#]

    tadalafil 40 https://extratadalafill.com/ tadalafil generic what is tadalafil

  14. Defattaithaccug [#]

    chloroquine prophylaxis https://canadachloroquine.com/ – buy aralen hydroxyquine

  15. ivermectin company [#]

    Very nice post. I just stumbled upon your weblog and wished to say that I’ve really enjoyed browsing your blog
    posts. In any case I will be subscribing in your feed and I hope you write again very soon! http://herreramedical.org/ivermectin

  16. kelaGyncclieria [#]

    where to buy chloroquine https://chloroquinephosphates.com/ – chloroquine phosphate chloroquine over the counter

  17. tadalis sx [#]

    tadalafil pills 20mg https://pulmoprestadalafil.com/ tadalafil pills tadalis sx

  18. dosage of amoxicillin for dental abscess [#]

    Greetings from Los angeles! I’m bored to tears at work so I decided
    to browse your site on my iphone during lunch break.
    I really like the knowledge you provide here and can’t wait to take a
    look when I get home. I’m amazed at how quick your blog loaded on my mobile ..
    I’m not even using WIFI, just 3G .. Anyhow, amazing site! http://antiibioticsland.com/Amoxil.htm

  19. BotoLyncIntet [#]

    hydroxychloroquine warnings https://chloroquine250mg.com/ – hydroxychloroquine covid plaquenil medication

  20. kelaGyncclieria [#]

    generic chloroquine phosphate https://hydroxychloroquine20.com/ – can you buy chloroquine over the counter plaquenil

  21. Skinconsehick [#]

    chloroquine phosphate tablets https://aralenhydroxychloroquine.com/ – hcq medication generic chloroquine

  22. kelaGyncclieria [#]

    hydroxychloride medicine https://hydroxychloroquin1mg.com/ – chloroquine tablet how to get hydroxychloroquine

  23. Loredophertarry [#]

    https://genisotretinoin.com/ isotretinoin side effects https://genisotretinoin.com/ – accutane cost accutane online

  24. pharmaceptica [#]

    tadalafil evolution peptides https://pharmaceptica.com/

  25. kelaGyncclieria [#]

    chloroquine pills https://chloroquine500mg.com/ – hydroxychloroquine over the counter does hydroxychloroquine

  26. tadalafil max dose [#]

    tadalafil 40 mg from india https://tadalafilgenc.com/ tadalafil generic tadalafil 30 mg

  27. Loredophertarry [#]

    plaquenil side effects https://aralenphosphates.com/ – hydroxychloroquine over the counter hydroxychloroquine over the counter

  28. kelaGyncclieria [#]

    side effects for hydroxychloroquine https://hydroxychloroqui.com/ – buy chloroquine online aralen retail price

Deja tu Comentario

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

CSSLab