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.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Código esencial

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.

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

Grid-column y grid-layout

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 Area

Grid Game

cssgridgarden.com

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.