¿Cómo hacer un sistema de grid (rejillas) responsivo casero en CSS?

06-04-2015 - Andrés Cruz

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:

Grid tamaño uno (1).

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

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.

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;
}

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy