Cursos de páginas web

Grid Layout

Curso de HTML

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  
59.  
60.  
61.  
62.  
63.  
64.  

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

display:grid básico
Usando grid-column y grid-row
Usando grid-area

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.

Ver ejercicio propuesto
Ver ejercicio resuelto

Grid Game

cssgridgarden.com

← Maquetar una web
Hacer página Grassy Green →