DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
06-04-2015

Existen una gran cantidad de frameworks CSS que podrás encontrar el Google que permiten crear rejillas o grids para colocar distintos elementos en los mismos a través de un CSS ya configurado; en esta entrada veremos como crear un sencillo sistema de rejillas con solo CSS.

Diseñando nuestras rejillas

Obtaremos por crear un maximo de diez columnas por filas en vez de las doce columnas que cuentan como maximo la mayoría de los frameworks CSS en la actualidad en su core como en el caso de Bootstrap simplemente por el hecho de contener medidas sin parte decimal y ayudará a simplificar el ejercicio; sin embargo, puede ser fácilmente adaptado a las necesidades que se tenga; veamos:

Sistema de grids en CsS - tamaño 10

Grid tamaño uno (1).

Además crearemos los distintos tamaños para abordar todas las necesidades:

Sistema de grids en CsS - todos los tamaños

Grid tamaño uno (1) a diez (10).

Una de las preguntas que se nos pueden ocurrir hasta el momento es:

¿Cómo hacer Responsive nuestras rejillas?

Esta pregunta la abordaremos en la siguiente sección.

Si no sabes de qué va el Responsive puedes consultar una entrada anterior en donde damos algunos conceptos claves del Responsive: ¿Qué es el Diseño Web Responsivo?.

Las medidas en % esenciales para el Responsive

Una de las medidas más empleadas en la actualidad para la creación de sites modernos responsives son los porcentajes (%); los porcentajes son medidas relativas al tamaño de su contenedor y al ser medidas relativas permiten que los elementos que la empleen en la definición de su anchura o altura puedan ser fácilmente adaptados al tamaño que se disponga:

.e_mitad{
 width: 50%;
}
.e_mitad{
 width: 50%;
}

A su vez contaremos con diez tipos de tamaños para mostrar un máximo de 10 columnas por fila; los tamaños podrás verlos referenciados en el siguiente código CSS:

.col-1{
 width: 10%;
}
.col-2{
 width: 20%;
}
.col-3{
 width: 30%;
}
.col-4{
 width: 40%;
}
.col-5{
 width: 50%;
}
.col-6{
 width: 60%;
}
.col-7{
 width: 70%;
}
.col-8{
 width: 80%;
}
.col-9{
 width: 90%;
}
.col-10{
 width: 100%;
}

Con el código anterior no es suficiente para mostrar las rejillas de una forma alineada; debemos de tener un código CSS común a todas las columnas:

[class^=col]{
 float:left;
 height:auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
¿Sabías que? La propiedad box-sizing con el valor border-box permite romper el modelo que tiene por defecto CSS al alterar el tamaño del contenedor al variar el grosor de los bordes y el padding; lo que es una tremenda ventaja para crear un sistema de grids o rejillas de forma fácil y sin mucho esfuerzo como vimos en esta entrada.

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Loader variados con CSS

Loader variados con CSS

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Algunos artículos que te pueden interesar

¿Cómo crear un checkbox personalizado en CSS?

¿Cómo crear un checkbox personalizado en CSS?

En esta entrada veremos cómo crear un checkbox custom o personalizados con solo CSS, con esto se quiere decir que no se emplea la renderización realizada por defecto por los navegadores.

Andrés Cruz 09-07-2015

La pseudo-class nth-child en CSS

La pseudo-class nth-child en CSS

La pseudo-clase nth-child identificar un elemento dentro de una lista de etiquetas.

Andrés Cruz 16-07-2013

Cómo capturar videos desde la cámara con PhoneGap

Cómo capturar videos desde la cámara con PhoneGap

Andrés Cruz 08-05-2017