Cursos de páginas web

Curso de HTML | 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.

<style>
	.container{
		display: ;
		grid-template-columns:   ; /*1 fr una fracción del espacio que queda libre*/
		grid-template-rows:   ; /*Para repetir el mismo valor 3 veces podíamos haber usado repeat(3, 33.33vh)*/
		column-gap: ;
		row-gap:
	}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

Ejercicio Grid Layout

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

Curso de HTML | 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

<style>
	.container{
            display: grid; 
            grid-template-areas:    " "
                                    " "
	}

      .red{
            grid-area: c1;
      }
      .green{
            grid-area: c2;
      }
      .blue{
            grid-area: c3;
      }
      .white{
            grid-area: c4;
      }
</style>
111111
111111
111111
222222
222222
222222
333333
333333
333333
444444
444444
444444

Grid Game

cssgridgarden.com

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