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 Battlenet

Loader Battlenet

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Lo nuevo del Material Design: Los RecyclerView

Lo nuevo del Material Design: Los RecyclerView

Los RecyclerView al igual que los GridView y ListView, permite crear listados de ítems ya sea a través de listas o celdas y son una versión más flexible, potente y actualizada que los GridView ListView.

Andrés Cruz 07-10-2015

Múltiples capas: Efecto de apertura de una puerta con CSS

Múltiples capas: Efecto de apertura de una puerta con CSS

En esta entrada veremos un experimento compuestos por múltiples divs solapados (capas) y emplearemos las transformaciones 3D en CSS en conjunto con el selector hover podremos crear una transición que emula el efecto de apertura de una puerta.

Andrés Cruz 13-08-2015

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Con la propiedad FlexBox podemos construir cajas flexibles, fluidas y adaptables con distintos tamaños y que sean adaptables facilmente a la resolución del dispositivo.

Andrés Cruz 22-09-2014