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

- Andrés Cruz

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

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.
Andrés Cruz

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

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.