TRABAJO SOBRE CSS3

Diseño Grid

Uno de los procesos más problematicos y frustrantes de CSS, sobre todo para novatos o principiantes, es el proceso de colocar y distribuir los elementos a lo largo de una página. Mecanismos como posicionamiento, floats o elementos en bloque o en línea, suelen ser insuficientes (o muy complejos) para crear un layout o estructuras para páginas web actuales.

El sistema flexbox es una gran mejora, sin embargo, está orientado a estructuras de una sola dimensión, por lo que aún necesitamos algo más potente para estructuras web. Con el paso del tiempo, muchos frameworks y librerías utilizan un sistema grid donde definen una cuadrícula determinada, y modificando los nombres de las clases de los elementos HTML, podemos darle tamaño, posición o colocación.

Grid CSS nace de esa necesidad, y recoge las ventajas de ese sistema, añadiendole numerosas mejoras y características que permiten crear rápidamente cuadrículas sencillas y potentes.

1
2
3
4
5

Codigo de grid

Codigo del contenedor

#efectos { display: grid; grid-gap: 10px; background-color: #2196F3; padding: 10px; }

Codigo ejemplo

.grid-item { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px; font-size: 30px; }
.item1 { grid-column: 1 / span 2; grid-row: 1; }
.item2 { grid-column: 3; grid-row: 1 / span 2; }
.item5 { grid-column: 1 / span 3; grid-row: 3; }
Inicio Transiciones Animaciones Flexbox Grid