Cursos de páginas web

Grid Layout

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

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.  

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.

display:grid básico

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

Usando grid-column y grid-row

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

Usando grid-area

Grid Game

cssgridgarden.com

← Maquetar una web
Hacer página Grassy Green →