sudo: Jack of all trades, master of some

Sistema de grid fluido, nada del otro mundo

5 comentarios

Admito que al principio de empezar a hacer cosas con CSSy HTML, no conocía de la existencia de sistemas de grids, instintivamente utilizaba, digamos una especie ‘grid‘ porque de alguna manera había que disponer las secciones del sitio, tener simetría, organización y control del contenido.
Sistemas de grids, que cándidamente personas muy inteligentes y creativas comparten, hay muchos, tanto así que es un poco extenuante probarlos todos y discenir cuál utilizar con el añadido de que todos tienen sus ventajas y desventajas.
En mis ratos de investigación y trial and error encontré como dije antes, muchos, pero yo quería uno que me hiciera decir: “ya estoy satisfecho”. Para hacer la historia más corta, de los poco que vi niguno me convenció. Sin embargo uno de los sitios consultados me impresionó por la simplicidad y la potencia del grid que ofrecía: Don’t overthink it grids, artículo de Chris Coyier en CSS-tricks –blog MUY interesante e instructivo, de los mejores para mí–.

Como bien dice el artículo original, muchos piensan que esto de un sistema de grid es una de esas cosas que hay que dejarlas para los super nerds de CSS, sin embargo la realidad es bien diferente. Simplemente voy a tratar de explicar aquí el asunto de marras:

Un elemento de bloque (block level element) es tan ancho como su padre (width: auto;) y como no tiene mucho impacto en la semántica ni mucho menos, por lo tanto podemos utilizar como wrapper el clásico <div>

<div class="grid">
 <!--100% de ancho-->
</div>

Podemos ilustrar el ejemplo de un grid básico por una necesidad común: un área de contenido de 2/3 de ancho y una barra lateral de 1/3.

<div id="grid">
  <div class="col-2-3">
    <!--contendo principal-->
  </div>
  <div class="col-1-3">
    <!--barra lateral-->
  </div>
</div>

Para tenerlas una a continuación de la otra, es necesario flotarlas y aplicarles un ancho. Para flotar todas las columnas a la izquierda:

[class*='col-'] {
  float: left;
}

Y para aplicarles el ancho a cada columna individualmente:

.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}

Con el código anterior tenemos un grid básico y funcional, pero es necesario seguir ajustándolo.

Aplicando el clásico clearfix

El elemento padre se colapsará a una altura de cero pixeles ya que solamente tiene hijos flotantes. Para resolver el problema: el clásico clearfix:

.grid:after {
  clear: both;
  content: "";
  display: table;
}

Espaciado

La parte más complicada podría ser el espaciado, hasta ahora tenemos un grid fluído usando porcentajes para el ancho.

Lo primero que debemos hacer es usar: box-sizing: border-box;:

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

De esta manera se asegura que el ancho del elemento sea siempre el mismo aún cuando tenga padding o bordes.

Después, aplicar un padding hacia la derecha de todas las columnas exceptuando la última:

[class*='col-'] {
  padding-right: 32px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}

Se pudiera hacer uso de porcentajes para mantener las proporciones, sin embargo el trabajo es un poco más arduo ya que debemos hacer más cálculos en dependencia de la cantidad de columnas que tenga el grid.

Más columnas

Si se desea definir más columnas para nuestro grid es bien sencillo:

.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

grid

Observaciones

En algunos casos es conveniente aplicar un padding exterior.
No he tenido la oportunidad de probarlo, pero el autor original indica que el grid no funciona en versiones de IE menores que la 8, sin embargo con el mismo principio es posible, claro, con los correspondientes fixes y hacks.

Comentarios desactivados
  1. Otro excelente POST como para demostrar que CSS no se come a nadie, por el contrario, se deja digerir muy bien

    1. @Maikel Llamaret Heredia

      Pues claro:
      Easy recipe:
      1- Currate entre 1 y 8 CSS.
      2- Agítalos fuertemente.
      3- Siguelos agitando fuertemente.
      4- Ponlos al fuego.
      5- Cómete los CSS.
      Fuente: An Exotic Cookbook from WoW.

      1. @Ozkar

        Hay que reconocer que el humor y el sarcasmo son de lo mejor.

        1. @oneohthree

          Eso es culpa de F. Mond, de Dashiell Hammett y especialmente de Juan Ángel Cardi: sus libros me reblandecieron el cerebro.

          1. paradix 5 años atrás
            @Ozkar

            Coincidimos … de F. Mond “Kronicas Koradianas” y de Juan Angel Cardi “La llave dorada” … ;)