Grid Layout

Curso de HTML

31.  
32.  
35.  
38.  
53.  

Cuando queremos controlar los anchos de las columnas de nuestra rejilla, display:grid suele ser una solución más cómoda que display:flex.

El siguiente código distribuye las columnas automáticamente, a razón de 200px por columna.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Ejercicio Grid Layout

Utilizando el estilos display:grid, realiza la maquetación del enlace.

Grid Layout 1
Descarga la imagen superior para hacer el ejercicio

Ejercicio Grid Layout 2

Resolver este ejercicio modificando sólo el código CSS del ejercicio propuesto. No modificaremos su código HTML.

Grid Game

cssgridgarden.com

← Maquetar una web
Hacer página Grassy Green →