La gran mayoría de los sitios web utilizan una cuadrícula. Es posible que no cuenten explícitamente con un sistema de cuadrícula, pero si tienen un “área de contenido principal” flotando a la izquierda y una “barra lateral” flotando a la derecha, es una cuadrícula simple.
Si se presenta un diseño más complejo, las personas a menudo buscan un marco de cuadrícula. Asumen que las cuadrículas son estas cosas súper difíciles que es mejor dejar en manos de los súper nerds de CSS. Esa idea se perpetúa por el hecho de que muchos de los sistemas de red a los que llegan son muy complicados.
Tenga en cuenta que este artículo se publicó en 2012. Floats seguía siendo el método principal para un sistema de cuadrícula, y este artículo se enfoca en métodos realmente simples para eso, como simplemente hacer flotar cuatro elementos al 25 % y no volverse loco con las matemáticas y los exóticos sistemas de canales. En estos días, recomiendo encarecidamente usar la cuadrícula CSS o flexbox para su sistema de cuadrícula, incluso si necesita crear una cuadrícula abstracta. Podría decirse que es aún más fácil y definitivamente más flexible y poderoso.
Así es como construyo cuadrículas. No es difícil ni complicado. Incluso hacerlos flexibles no es gran cosa.
Contexto
Un elemento de nivel de bloque es tan ancho como el padre en el que se encuentra (width: auto;). Podemos pensar en ello como 100% ancho. El contenedor de una cuadrícula probablemente no tenga mucho que ver con la semántica, es solo un contenedor genérico, por lo que un div está bien.
<div class="grid">
<!-- 100% wide -->
</div>
columnas
Comencemos con una necesidad práctica y común: un área de contenido principal de 2/3 del ancho y una barra lateral de 1/3 del ancho. Simplemente hacemos dos divs de columna con los nombres de clase apropiados.
<div class="grid">
<div class="col-2-3">
Main Content
</div>
<div class="col-1-3">
Sidebar
</div>
</div>Para hacerlos uno al lado del otro, solo necesitamos flotarlos y aplicar anchos. Podemos seleccionar ambos así:
[class*='col-'] {
float: left;
}y ancho individual como este:
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}Esa es toda la premisa de no pensar demasiado en las cuadrículas.
Contexto de limpieza
El elemento principal se contraerá a la altura cero ya que solo tiene elementos secundarios flotantes. Arreglemos eso limpiándolo. En estos días todo lo que necesitas es esto:
.grid:after {
content: "";
display: table;
clear: both;
}canalones
La parte más difícil de las rejillas son las canaletas. Hasta ahora, hemos hecho que nuestra cuadrícula sea flexible mediante el uso de porcentajes para los anchos. Podríamos hacer las matemáticas complicadas y usar porcentajes para medianeras también, pero personalmente no me gustan las medianeras de porcentaje de todos modos, me gustan las medianeras de tamaño de píxel fijo. Además, estamos tratando de dejar de pensar demasiado en esto.
El primer paso hacia esto está usando box-sizing: border-box;. Me gusta usarlo en absolutamente todo.
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Ahora, cuando establecemos un ancho, ese elemento mantiene ese ancho, a pesar de que se apliquen rellenos o bordes.
el segundo paso está aplicando un relleno fijo al lado derecho de todas las columnas excepto la última.
[class*='col-'] {
padding-right: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
Eso es todo lo que hay para canaletas básicas.
canalones exteriores
¿Necesita canaletas en el exterior? Me gusta usar una clase opt-in para esto:
<div class="grid grid-pad">
Grid with outside gutters also
</div>Paso uno es agregar relleno izquierdo al padre de la cuadrícula (y, opcionalmente, relleno superior e inferior):
.grid-pad {
padding: 20px 0 20px 20px;
}Segundo paso es restaurar el relleno derecho a la última columna:
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
Más opciones de columna
Muy facil:
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}Haz lo que quieras. Solo asegúrate de que las fracciones de la columna sumen 1. Sí, pensar un poco, pero más fácil de lo habitual.
Hablar con descaro a
No lo estoy usando mucho aquí, pero todo se vuelve un poco más sucinto con SCSS/Compass:
* {
@include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}Módulos
Me gusta trabajar dentro de estas cuadrículas con “módulos”.
<div class="grid">
<div class="col-2-3">
<article class="module">
stuff
</article>
<article class="module">
stuff
</article>
</div>
<div class="col-1-3">
<aside class="module">
Sidebar stuff. Sub modules?
</aside>
</div>
</div>Se siente bien dividir el contenido en partes de esta manera. El efecto secundario adicional es que cada módulo puede tener su propio relleno, manteniendo el texto alejado de los bordes de la cuadrícula.
Resultado
Aquí hay una demostración en CodePen.
Navegador Whatnot
Funciona muy bien en IE 8 y superior y todas las demás cosas estándar. Si necesita soporte para IE 7, tendrá que hacer otra cosa =).
Además, Flexbox hará que esto sea aún más fácil y mejor (de varias maneras, incluido el reordenamiento a pedido), pero creo que necesitamos alrededor de un año hasta que podamos comenzar a pensar en usarlo.
Relacionado
Echa un vistazo a las cuadrículas OOCSS.