CSS Grid Layout: Crea Diseños Web Dinámicos

Bienvenido y bienvenida a este curso de CSS Grid Básico. Pondremos en práctica algunos conceptos que ya hemos aprendido y conoceremos otros nuevos para posicionar elementos dentro de contenedores de la manera en que deseemos. Primero, entendamos lo que es CSS Grid.

Qué es CSS Grid

Css grid es una especificación de CSS para realizar layouts más dinámicos. Anteriormente sólo se podía usar tablas para realizar lo que ahora podemos hacer con Grid de manera mucho más sencilla. Nos permite dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas construidas a partir de HTML

CSS Grid introdujo un sistema de grilla que es una cuadrícula con columnas (columns) y filas (rows), con ellas podemos ubicar elementos de manera más fácil.

Podemos crear, por ejemplo, un layout simple con el header, main y footer ya que cada bloque conforma un elemento de la grilla que se puede ubicar. Como los layouts pueden cambiar mucho, Grid nos ayuda a posicionar y reposicionar los elementos cuantas veces necesitemos.

Te recomiendo echar un vistazo a la guía completa de CSS Grid.

Contribución creada por: José Miguel Ventimilla (Platzi Contributor).