├── 10 ├── index.html └── css │ └── main.css ├── 11 ├── css │ └── main.css └── index.html ├── 12 ├── css │ └── main.css └── index.html ├── 13 ├── index.html └── css │ └── main.css ├── 14 ├── index.html └── css │ └── main.css ├── 15 ├── index.html └── css │ └── main.css ├── 16 ├── css │ └── main.css └── index.html ├── 17 ├── css │ └── main.css └── index.html ├── 18 ├── css │ └── main.css └── index.html ├── 19 ├── css │ └── main.css └── index.html ├── 20 ├── css │ └── main.css └── index.html ├── .DS_Store ├── Ejercicio ├── .DS_Store ├── inicio │ ├── css │ │ └── main.css │ └── index.html └── final │ ├── index.html │ └── css │ └── main.css ├── .idea ├── vcs.xml ├── modules.xml ├── GRID.iml ├── inspectionProfiles │ └── Project_Default.xml ├── workspace.xml.orig └── workspace.xml ├── 04 ├── index.html └── css │ └── main.css ├── 05 ├── index.html └── css │ └── main.css ├── 07 ├── index.html └── css │ └── main.css ├── 01 ├── index.html └── css │ └── main.css ├── 02 ├── index.html └── css │ └── main.css ├── 03 ├── index.html └── css │ └── main.css ├── 08 ├── index.html └── css │ └── main.css ├── README.md ├── 09 ├── index.html └── css │ └── main.css └── 06 ├── index.html └── css └── main.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/aprende-css-grid-practico/HEAD/.DS_Store -------------------------------------------------------------------------------- /Ejercicio/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/aprende-css-grid-practico/HEAD/Ejercicio/.DS_Store -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /17/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | grid-gap: 10px; 4 | font-family: sans-serif; 5 | grid-template: 6 | repeat(4, 50px) / repeat(3, 1fr); 7 | justify-items: stretch; 8 | } 9 | 10 | div { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: goldenrod; 15 | } -------------------------------------------------------------------------------- /16/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | height: 100vh; 3 | display: grid; 4 | grid-gap: 10px; 5 | font-family: sans-serif; 6 | grid: 7 | /* Filas / Columnas */ 8 | 10fr 5fr / auto-flow 2fr 8fr; 9 | ; 10 | } 11 | 12 | div { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background-color: goldenrod; 17 | } -------------------------------------------------------------------------------- /04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Header
11 | 12 |
Contenido
13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Header
11 | 12 |
Contenido
13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /20/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | grid-gap: 10px; 4 | font-family: sans-serif; 5 | grid-template: 6 | repeat(4, 50px) / repeat(3, 1fr); 7 | } 8 | 9 | div { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: goldenrod; 14 | } 15 | 16 | div:nth-child(5) { 17 | background-color: purple; 18 | align-self: stretch; 19 | } -------------------------------------------------------------------------------- /07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Header
11 | 12 |
Contenido
13 | 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS GRID 6 | 7 | 8 | 9 |
10 |
Header
11 | 12 |
Contenido
13 | 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Header
11 | 12 |
Contenido
13 | 14 | 15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /18/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | grid-gap: 10px; 4 | font-family: sans-serif; 5 | grid-template: 6 | repeat(4, 50px) / repeat(3, 1fr); 7 | 8 | /* Row Axis */ 9 | justify-items: stretch; 10 | 11 | /* Column Axis */ 12 | align-items: stretch; 13 | } 14 | 15 | div { 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | background-color: goldenrod; 20 | } -------------------------------------------------------------------------------- /19/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | grid-gap: 10px; 4 | font-family: sans-serif; 5 | grid-template: 6 | repeat(4, 50px) / repeat(3, 1fr); 7 | justify-items: start; 8 | } 9 | 10 | div { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: goldenrod; 15 | } 16 | 17 | div:nth-child(5) { 18 | background-color: purple; 19 | justify-self: end; 20 | } -------------------------------------------------------------------------------- /02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | 22 | -------------------------------------------------------------------------------- /03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | 22 | -------------------------------------------------------------------------------- /13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
21 | 22 | -------------------------------------------------------------------------------- /08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Columna 1
11 |
Columna 2
12 |
Columna 3
13 |
Columna 4
14 |
Columna 5
15 |
Columna 6
16 |
Columna 7
17 |
Columna 8
18 |
19 | 20 | -------------------------------------------------------------------------------- /03/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | height: 100vh; 3 | display: grid; 4 | /*grid-gap: 10px 30px;*/ 5 | grid-row-gap: 10px; 6 | grid-column-gap: 30px; 7 | grid-template-columns: repeat(3, 1fr); 8 | grid-template-rows: repeat(3, 1fr); 9 | 10 | /* Implicit grid */ 11 | grid-auto-rows: 1fr; 12 | } 13 | 14 | div { 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | background-color: purple; 19 | color: white; 20 | } -------------------------------------------------------------------------------- /12/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | height: 100vh; 4 | grid-gap: 10px; 5 | grid-template-columns: 200px 100px; 6 | grid-auto-columns: 300px; 7 | grid-auto-flow: column; 8 | } 9 | 10 | div { 11 | background-color: goldenrod; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | font-family: sans-serif; 16 | } 17 | 18 | div:first-child, 19 | div:nth-child(2) { 20 | background-color: purple; 21 | color: white; 22 | } -------------------------------------------------------------------------------- /17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
11
21 |
12
22 |
23 | 24 | -------------------------------------------------------------------------------- /18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
11
21 |
12
22 |
23 | 24 | -------------------------------------------------------------------------------- /19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
11
21 |
12
22 |
23 | 24 | -------------------------------------------------------------------------------- /20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
11
21 |
12
22 |
23 | 24 | -------------------------------------------------------------------------------- /.idea/GRID.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /13/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | height: 100vh; 4 | grid-gap: 10px; 5 | grid-template-columns: repeat(auto-fit, minmax(30px, auto)); 6 | } 7 | 8 | /*main > * { 9 | order: 1; 10 | }*/ 11 | 12 | div { 13 | background-color: goldenrod; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | font-family: sans-serif; 18 | } 19 | 20 | div:nth-child(4) { 21 | background-color: purple; 22 | color: white; 23 | order: 1; 24 | } 25 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aprende CSS Grid práctico 2 | 3 | Curso 100% gratuito donde aprenderás cómo funciona el nuevo módulo de posicionamiento CSS: GRID!. 4 | 5 | ## Repositorio del curso 6 | 7 | Este es el repositorio del curso. En el encontrarás todos los documentos y archivos que uso en cada una de las lecciones. Puedes clonarlo o descargarlo para utilizarlo en tu entorno de desarollo. 8 | 9 | ### Más información 10 | 11 | * [YouTube](https://www.youtube.com/playlist?list=PLM-Y_YQmMEqBxmylkI5WJn9ouUxWlJNOW) - Serie de vídeos del curso. 12 | -------------------------------------------------------------------------------- /09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Col 1
11 |
Col 2
12 |
Col 3
13 |
Col 4
14 |
Col 5
15 |
Col 6
16 |
Col 7
17 |
Col 8
18 |
Col 9
19 |
Col 10
20 |
Col 11
21 |
Col 12
22 |
23 | 24 | -------------------------------------------------------------------------------- /10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Columna 1
11 |
Columna 2
12 |
Columna 3
13 |
Columna 4
14 |
15 | 16 |
17 |
Columna 1
18 |
Columna 2
19 |
Columna 3
20 |
Columna 4
21 |
22 | 23 | -------------------------------------------------------------------------------- /06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Elemento 01
11 |
Elemento 02
12 |
Elemento 03
13 |
Elemento 04
14 |
Elemento 05
15 |
Elemento 06
16 |
Elemento 07
17 |
Elemento 08
18 |
Elemento 09
19 |
20 | 21 | -------------------------------------------------------------------------------- /12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
11
21 |
12
22 |
13
23 |
14
24 |
15
25 |
26 | 27 | -------------------------------------------------------------------------------- /10/css/main.css: -------------------------------------------------------------------------------- 1 | section { 2 | display: grid; 3 | grid-gap: 10px; 4 | font-family:sans-serif; 5 | margin: 20px 0; 6 | } 7 | 8 | div { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | padding: 50px; 13 | text-align: center; 14 | } 15 | 16 | .auto-fill div { 17 | background-color: goldenrod; 18 | } 19 | 20 | .auto-fit div { 21 | background-color: purple; 22 | color: white; 23 | } 24 | 25 | .auto-fill { 26 | grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 27 | } 28 | 29 | .auto-fit { 30 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 31 | } -------------------------------------------------------------------------------- /06/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | height: 100vh; 4 | grid-gap: 10px; 5 | font-family: sans-serif; 6 | grid-template-columns: 1fr 1fr 1fr; 7 | grid-template-rows: 1fr 2fr 1fr; 8 | } 9 | 10 | main > * { 11 | background-color: goldenrod; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | @media (max-width: 500px) { 18 | main { 19 | grid-template-columns: 1fr 1fr; 20 | grid-template-rows: repeat(5, 1fr); 21 | } 22 | } 23 | 24 | @media (max-width: 300px) { 25 | main { 26 | grid-template-columns: 1fr; 27 | grid-template-rows: repeat(9, 1fr); 28 | } 29 | } -------------------------------------------------------------------------------- /16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
7
17 |
8
18 |
9
19 |
10
20 |
11
21 |
12
22 |
13
23 |
14
24 |
15
25 |
16
26 |
17
27 |
18
28 |
19
29 |
20
30 |
31 | 32 | -------------------------------------------------------------------------------- /14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
15 |
16 |
1
17 |
2
18 |
3
19 |
4
20 |
5
21 |
22 |
23 |
6
24 |
7
25 |
8
26 |
9
27 |
10
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /09/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | grid-gap: 10px; 4 | height: 100vh; 5 | font-family: sans-serif; 6 | 7 | grid-template-columns: 8 | [start] 9 | repeat(4, 10 | [col-lg-start] minmax(80px, 1fr) 11 | [col-lg-end col-md-start] minmax(40px, 1fr) 12 | [col-md-end col-sm-start] minmax(20px, 1fr) 13 | ) 14 | [end] 15 | ; 16 | } 17 | 18 | div { 19 | background-color: goldenrod; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | div:first-of-type { 26 | background-color: purple; 27 | color: white; 28 | grid-column: col-lg-start / end; 29 | } -------------------------------------------------------------------------------- /02/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | height: 100vh; 3 | display: grid; 4 | grid-gap: 20px; 5 | grid-template-columns: 100px 100px 100px 100px; 6 | grid-template-rows: 100px 100px 100px; 7 | } 8 | 9 | div { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: goldenrod; 14 | } 15 | 16 | @media (max-width: 600px) { 17 | div:nth-child(10) { 18 | background-color: purple; 19 | /* grid-column-start: 3; 20 | grid-column-end: 5*/; 21 | grid-column: 3 / 5; 22 | } 23 | 24 | div:nth-child(6) { 25 | background-color: purple; 26 | grid-column: 2 / 3; 27 | grid-row: 2 / 4; 28 | } 29 | } 30 | 31 | -------------------------------------------------------------------------------- /14/css/main.css: -------------------------------------------------------------------------------- 1 | /* Primer GRID */ 2 | #grid-1 { 3 | display: grid; 4 | height: 100vh; 5 | grid-gap: 10px; 6 | grid-template-columns: repeat(auto-fit, minmax(100px, auto)); 7 | } 8 | 9 | div { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-family: sans-serif; 14 | } 15 | 16 | #grid-1 > div { 17 | background-color: goldenrod; 18 | } 19 | 20 | /* Segundo GRID */ 21 | #grid-1 > div:nth-child(5) { 22 | background-color: transparent; 23 | display: block; 24 | } 25 | 26 | #grid-2 { 27 | display: grid; 28 | grid-gap: 15px; 29 | height: 100%; 30 | grid-template-columns: repeat(2, 1fr); 31 | } 32 | 33 | #grid-2 > div { 34 | background-color: purple; 35 | color: white; 36 | } -------------------------------------------------------------------------------- /05/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | height: 100vh; 4 | grid-gap: 10px; 5 | 6 | grid-template-columns: 7 | [sidebar-start] 1fr 8 | [sidebar-end contenido-start] 2fr 9 | [contenido-end]; 10 | 11 | grid-template-rows: 12 | [header-start] 1fr 13 | [header-end contenido-start] 2fr 14 | [footer-start] 1fr 15 | [footer-end]; 16 | } 17 | 18 | main > * { 19 | font-family: sans-serif; 20 | background-color: goldenrod; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | header { 27 | grid-column: sidebar-start / contenido-end; 28 | } 29 | 30 | aside { 31 | grid-row: header-end / footer-end; 32 | } 33 | 34 | footer { 35 | grid-column: contenido-start / contenido-end; 36 | } -------------------------------------------------------------------------------- /04/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | height: 100vh; 4 | grid-gap: 10px; 5 | /*grid-template-columns: 1fr 2fr;*/ 6 | 7 | grid-template-columns: 8 | [sidebar-start] 1fr 9 | [contenido-start] 2fr; 10 | 11 | grid-template-rows: 12 | [header-start] 1fr 13 | [contenido-start] 2fr 14 | [footer-start] 1fr; 15 | } 16 | 17 | main > * { 18 | font-family: sans-serif; 19 | background-color: goldenrod; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | /* 26 | header { 27 | grid-column: sidebar-start / span 2; 28 | } 29 | 30 | footer { 31 | grid-column: sidebar-start / -1; 32 | }*/ 33 | 34 | header { 35 | grid-column: sidebar-start / span 2; 36 | } 37 | 38 | aside { 39 | grid-row: contenido-start / span 2; 40 | } 41 | 42 | footer { 43 | grid-column: contenido-start; 44 | } -------------------------------------------------------------------------------- /01/css/main.css: -------------------------------------------------------------------------------- 1 | main > * { 2 | background-color: goldenrod; 3 | padding: 10px; 4 | font-size: 3em; 5 | } 6 | 7 | /* Definimos el GRID container */ 8 | main { 9 | display: grid; 10 | grid-gap: 10px; 11 | grid-template-areas: 12 | "footer" 13 | "contenido" 14 | "izquierda" 15 | "derecha" 16 | "header"; 17 | } 18 | 19 | /* Desktop */ 20 | @media (min-width: 500px) { 21 | main { 22 | grid-template-areas: 23 | "header header header" 24 | "contenido izquierda derecha" 25 | "footer footer ."; 26 | } 27 | } 28 | 29 | /* Nombramos los elementos */ 30 | header { 31 | grid-area: header; 32 | } 33 | 34 | aside:first-of-type { 35 | grid-area: izquierda; 36 | } 37 | 38 | article { 39 | grid-area: contenido; 40 | } 41 | 42 | aside:last-of-type { 43 | grid-area: derecha; 44 | } 45 | 46 | footer { 47 | grid-area: footer; 48 | } -------------------------------------------------------------------------------- /08/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | height: 100vh; 3 | display: grid; 4 | font-family: sans-serif; 5 | grid-gap: 10px; 6 | grid-template-columns: 7 | /*1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr*/ 8 | 9 | /*repeat(8, 1fr)*/ 10 | 11 | /* 8 columnas con un mínimo y un máximo (límite) */ 12 | /*repeat(8, minmax(10px, 1fr));*/ 13 | 14 | /* 8 columnas con un patrón dos (30px y mínimo 10% y máximo flexible */ 15 | /*repeat(4, 30px minmax(10%, 1fr));*/ 16 | 17 | /* 8 columnas con un mínimo marcado por el contenido y un máximo del 30% */ 18 | /*repeat(8, minmax(min-content, 30%));*/ 19 | 20 | /* 8 columnas con un máximo y mínimo marcado por su contenido */ 21 | repeat(8, minmax(min-content, max-content)) 22 | ; 23 | } 24 | 25 | div { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | background-color: goldenrod; 30 | } -------------------------------------------------------------------------------- /Ejercicio/inicio/css/main.css: -------------------------------------------------------------------------------- 1 | /* Generales */ 2 | html * { 3 | box-sizing: border-box; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: sans-serif; 12 | margin: 0; 13 | padding: 0; 14 | background-color: white; 15 | } 16 | 17 | /* Principal */ 18 | .principal { 19 | height: 100vh; 20 | } 21 | 22 | /* Cabecera */ 23 | .cabecera { 24 | background-color: aquamarine; 25 | } 26 | 27 | /* Contenido */ 28 | .contenido { 29 | background-color: aliceblue; 30 | } 31 | 32 | .contenido__img { 33 | width: 100%; 34 | height: auto; 35 | } 36 | 37 | /* Izquierda */ 38 | .izquierda { 39 | background-color: beige; 40 | } 41 | 42 | /* Anexos */ 43 | .anexo1 { 44 | background-color: goldenrod; 45 | } 46 | 47 | .anexo2 { 48 | background-color: darkcyan; 49 | } 50 | 51 | /* Derecha */ 52 | .derecha { 53 | background-color: bisque; 54 | } 55 | 56 | /* Pie */ 57 | .pie { 58 | background-color: black; 59 | color: white; 60 | } -------------------------------------------------------------------------------- /11/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | background-color: white; 6 | } 7 | 8 | main { 9 | width: 100vw; 10 | height: 100vh; 11 | display: grid; 12 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 13 | grid-template-rows: repeat(auto-fit, minmax(150px, 1fr)); 14 | grid-auto-rows: minmax(150px, 1fr); 15 | grid-auto-columns: minmax(150px, 1fr); 16 | grid-auto-flow: column dense; 17 | } 18 | 19 | section { 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | background-color: goldenrod; 24 | border: 1px solid black; 25 | } 26 | 27 | section:nth-child(3n) { 28 | background-color: purple; 29 | grid-column-end: span 2; 30 | } 31 | 32 | section:nth-child(7n) { 33 | background-color: cyan; 34 | grid-row-end: span 2; 35 | } 36 | 37 | section:nth-child(12n) { 38 | background-color: aqua; 39 | grid-column-end: span 3; 40 | grid-row-end: span 3; 41 | } 42 | -------------------------------------------------------------------------------- /07/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | font-family: sans-serif; 4 | height: 100vh; 5 | grid-gap: 10px; 6 | 7 | /* Especificar posición de las areas */ 8 | grid-template-areas: 9 | "header" 10 | "contenido" 11 | "izquierda" 12 | "derecha" 13 | "footer"; 14 | } 15 | 16 | main > * { 17 | background-color: goldenrod; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | /* Responsive */ 24 | @media (min-width: 500px) { 25 | main { 26 | grid-template-areas: 27 | "header header derecha" 28 | "izquierda contenido derecha" 29 | "izquierda footer derecha"; 30 | grid-template-columns: 1fr 2fr 1fr; 31 | grid-template-rows: 2fr 5fr 1fr; 32 | } 33 | } 34 | 35 | /* Nombrar las areas */ 36 | header { 37 | grid-area: header; 38 | } 39 | 40 | aside:first-of-type { 41 | grid-area: izquierda; 42 | } 43 | 44 | article { 45 | grid-area: contenido; 46 | } 47 | 48 | aside:last-of-type { 49 | grid-area: derecha; 50 | } 51 | 52 | footer { 53 | grid-area: footer; 54 | } -------------------------------------------------------------------------------- /15/css/main.css: -------------------------------------------------------------------------------- 1 | main { 2 | height: 100vh; 3 | display: grid; 4 | grid-gap: 10px; 5 | font-family: sans-serif; 6 | /* grid-template-areas: 7 | "header header header" 8 | "izquierda contenido derecha1" 9 | "izquierda contenido derecha2" 10 | "izquierda footer footer"; 11 | 12 | grid-template-rows: 13 | [inicio] 1fr [contenido-start] 2fr 1fr 1fr [fin]; 14 | 15 | grid-template-columns: 16 | [inicio] 1fr [contenido-start] 2fr 1fr [fin];*/ 17 | 18 | grid-template: 19 | /* Filas*/ 20 | [inicio] "header header header" 1fr 21 | [contenido-start] "izquierda contenido derecha1" 2fr 22 | "izquierda contenido derecha2" 1fr 23 | "izquierda footer footer" 1fr [fin] 24 | / 25 | /* Columnas*/ 26 | [inicio] 1fr [contenido-start] 2fr 1fr [fin] 27 | ; 28 | } 29 | 30 | main > * { 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | background-color: goldenrod; 35 | } 36 | 37 | header { 38 | grid-area: header; 39 | } 40 | 41 | aside:first-of-type { 42 | grid-area: izquierda; 43 | } 44 | 45 | article { 46 | grid-area: contenido; 47 | } 48 | 49 | aside:nth-of-type(2) { 50 | grid-area: derecha1; 51 | } 52 | 53 | aside:last-of-type { 54 | grid-area: derecha2; 55 | } 56 | 57 | footer { 58 | grid-area: footer; 59 | } 60 | -------------------------------------------------------------------------------- /Ejercicio/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | GRID 9 | 10 | 11 | 12 |
13 |
14 |

Ejercicio CSS GRID

15 |
16 | 17 | 20 | 21 |
22 | Media de artículo 23 |

Título del artículo

24 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cum cupiditate, distinctio ea esse illum labore necessitatibus nostrum officia possimus quis quos repellat, saepe, sapiente totam vel voluptate. Quam, repellat!

25 |
26 | 27 |
28 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam aspernatur aut corporis distinctio dolore et eveniet excepturi facere, fugit id laboriosam laudantium minus nostrum perspiciatis praesentium quibusdam quos unde. 29 |
30 | 31 |
32 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem corporis dolore dolorem dolorum facere facilis, fugiat inventore labore laborum libero, obcaecati possimus quos sapiente sint sit tempora, tenetur voluptatibus! 33 |
34 | 35 | 38 | 39 | 42 |
43 | 44 | -------------------------------------------------------------------------------- /Ejercicio/inicio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | GRID 9 | 10 | 11 | 12 |
13 |
14 |

Ejercicio CSS GRID

15 |
16 | 17 | 20 | 21 |
22 | Media de artículo 23 |

Título del artículo

24 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cum cupiditate, distinctio ea esse illum labore necessitatibus nostrum officia possimus quis quos repellat, saepe, sapiente totam vel voluptate. Quam, repellat!

25 |
26 | 27 |
28 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam aspernatur aut corporis distinctio dolore et eveniet excepturi facere, fugit id laboriosam laudantium minus nostrum perspiciatis praesentium quibusdam quos unde. 29 |
30 | 31 |
32 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem corporis dolore dolorem dolorum facere facilis, fugiat inventore labore laborum libero, obcaecati possimus quos sapiente sint sit tempora, tenetur voluptatibus! 33 |
34 | 35 | 38 | 39 | 42 |
43 | 44 | -------------------------------------------------------------------------------- /Ejercicio/final/css/main.css: -------------------------------------------------------------------------------- 1 | /* Generales */ 2 | html * { 3 | box-sizing: border-box; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: sans-serif; 12 | margin: 0; 13 | padding: 0; 14 | background-color: white; 15 | } 16 | 17 | /* Principal */ 18 | .principal { 19 | height: 100vh; 20 | } 21 | 22 | .principal > * { 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | padding: 10px; 27 | } 28 | 29 | @media (min-width: 600px) { 30 | .principal { 31 | display: grid; 32 | grid-template-columns: 1fr 2fr 2fr; 33 | grid-template-rows: 1fr 3fr 3fr 1fr; 34 | } 35 | } 36 | 37 | @media (min-width: 900px) { 38 | .principal { 39 | grid-template-columns: 1fr 3fr 3fr 1fr; 40 | } 41 | } 42 | 43 | /* Cabecera */ 44 | .cabecera { 45 | background-color: aquamarine; 46 | } 47 | 48 | @media (min-width: 600px) { 49 | .cabecera { 50 | grid-column: 1 / -1; 51 | } 52 | } 53 | 54 | /* Contenido */ 55 | .contenido { 56 | background-color: aliceblue; 57 | flex-direction: column; 58 | } 59 | 60 | .contenido__img { 61 | width: 100%; 62 | height: auto; 63 | } 64 | 65 | @media (min-width: 600px) { 66 | .contenido { 67 | grid-column: span 2; 68 | } 69 | } 70 | 71 | /* Izquierda */ 72 | .izquierda { 73 | background-color: beige; 74 | } 75 | 76 | @media (min-width: 900px) { 77 | .izquierda { 78 | grid-row: span 2; 79 | } 80 | } 81 | 82 | /* Anexos */ 83 | .anexo1 { 84 | background-color: goldenrod; 85 | } 86 | 87 | .anexo2 { 88 | background-color: darkcyan; 89 | } 90 | 91 | /* Derecha */ 92 | .derecha { 93 | background-color: bisque; 94 | } 95 | 96 | @media (min-width: 600px) { 97 | .derecha { 98 | grid-row: 3 / 4; 99 | } 100 | } 101 | 102 | @media (min-width: 900px) { 103 | .derecha { 104 | grid-column: 4; 105 | grid-row: 2 / 4; 106 | } 107 | } 108 | 109 | /* Pie */ 110 | .pie { 111 | background-color: black; 112 | color: white; 113 | } 114 | 115 | @media (min-width: 600px) { 116 | .pie { 117 | grid-column: 1 / -1; 118 | } 119 | } -------------------------------------------------------------------------------- /11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GRID 6 | 7 | 8 | 9 |
10 |
Elemento 001
11 |
Elemento 002
12 |
Elemento 003
13 |
Elemento 004
14 |
Elemento 005
15 |
Elemento 006
16 |
Elemento 007
17 |
Elemento 008
18 |
Elemento 009
19 |
Elemento 010
20 |
Elemento 011
21 |
Elemento 012
22 |
Elemento 013
23 |
Elemento 014
24 |
Elemento 015
25 |
Elemento 016
26 |
Elemento 017
27 |
Elemento 018
28 |
Elemento 019
29 |
Elemento 020
30 |
Elemento 021
31 |
Elemento 022
32 |
Elemento 023
33 |
Elemento 024
34 |
Elemento 025
35 |
Elemento 026
36 |
Elemento 027
37 |
Elemento 028
38 |
Elemento 029
39 |
Elemento 030
40 |
Elemento 031
41 |
Elemento 032
42 |
Elemento 033
43 |
Elemento 034
44 |
Elemento 035
45 |
Elemento 036
46 |
Elemento 037
47 |
Elemento 038
48 |
Elemento 039
49 |
Elemento 040
50 |
Elemento 041
51 |
Elemento 042
52 |
Elemento 043
53 |
Elemento 044
54 |
Elemento 045
55 |
Elemento 046
56 |
Elemento 047
57 |
Elemento 048
58 |
Elemento 049
59 |
Elemento 050
60 |
Elemento 051
61 |
Elemento 052
62 |
Elemento 053
63 |
Elemento 054
64 |
Elemento 055
65 |
Elemento 056
66 |
Elemento 057
67 |
Elemento 058
68 |
Elemento 059
69 |
Elemento 060
70 |
Elemento 061
71 |
Elemento 062
72 |
Elemento 063
73 |
Elemento 064
74 |
Elemento 065
75 |
Elemento 066
76 |
Elemento 067
77 |
Elemento 068
78 |
Elemento 069
79 |
Elemento 070
80 |
Elemento 071
81 |
Elemento 072
82 |
Elemento 073
83 |
Elemento 074
84 |
Elemento 075
85 |
Elemento 076
86 |
Elemento 077
87 |
Elemento 078
88 |
Elemento 079
89 |
Elemento 080
90 |
Elemento 081
91 |
Elemento 082
92 |
Elemento 083
93 |
Elemento 084
94 |
Elemento 085
95 |
Elemento 086
96 |
Elemento 087
97 |
Elemento 088
98 |
Elemento 089
99 |
Elemento 090
100 |
Elemento 091
101 |
Elemento 092
102 |
Elemento 093
103 |
Elemento 094
104 |
Elemento 095
105 |
Elemento 096
106 |
Elemento 097
107 |
Elemento 098
108 |
Elemento 099
109 |
Elemento 100
110 |
Elemento 101
111 |
Elemento 102
112 |
Elemento 103
113 |
Elemento 104
114 |
Elemento 105
115 |
Elemento 106
116 |
Elemento 107
117 |
Elemento 108
118 |
Elemento 109
119 |
Elemento 110
120 |
Elemento 111
121 |
Elemento 112
122 |
Elemento 113
123 |
Elemento 114
124 |
Elemento 115
125 |
Elemento 116
126 |
Elemento 117
127 |
Elemento 118
128 |
Elemento 119
129 |
Elemento 120
130 |
Elemento 121
131 |
Elemento 122
132 |
Elemento 123
133 |
Elemento 124
134 |
Elemento 125
135 |
Elemento 126
136 |
Elemento 127
137 |
Elemento 128
138 |
Elemento 129
139 |
Elemento 130
140 |
Elemento 131
141 |
Elemento 132
142 |
Elemento 133
143 |
Elemento 134
144 |
Elemento 135
145 |
Elemento 136
146 |
Elemento 137
147 |
Elemento 138
148 |
Elemento 139
149 |
Elemento 140
150 |
Elemento 141
151 |
Elemento 142
152 |
Elemento 143
153 |
Elemento 144
154 |
Elemento 145
155 |
Elemento 146
156 |
Elemento 147
157 |
Elemento 148
158 |
Elemento 149
159 |
Elemento 150
160 |
Elemento 151
161 |
Elemento 152
162 |
Elemento 153
163 |
Elemento 154
164 |
Elemento 155
165 |
Elemento 156
166 |
Elemento 157
167 |
Elemento 158
168 |
Elemento 159
169 |
Elemento 160
170 |
Elemento 161
171 |
Elemento 162
172 |
Elemento 163
173 |
Elemento 164
174 |
Elemento 165
175 |
Elemento 166
176 |
Elemento 167
177 |
Elemento 168
178 |
Elemento 169
179 |
Elemento 170
180 |
Elemento 171
181 |
Elemento 172
182 |
Elemento 173
183 |
Elemento 174
184 |
Elemento 175
185 |
Elemento 176
186 |
Elemento 177
187 |
Elemento 178
188 |
Elemento 179
189 |
Elemento 180
190 |
Elemento 181
191 |
Elemento 182
192 |
Elemento 183
193 |
Elemento 184
194 |
Elemento 185
195 |
Elemento 186
196 |
Elemento 187
197 |
Elemento 188
198 |
Elemento 189
199 |
Elemento 190
200 |
Elemento 191
201 |
Elemento 192
202 |
Elemento 193
203 |
Elemento 194
204 |
Elemento 195
205 |
Elemento 196
206 |
Elemento 197
207 |
Elemento 198
208 |
Elemento 199
209 |
Elemento 200
210 |
Elemento 201
211 |
Elemento 202
212 |
Elemento 203
213 |
Elemento 204
214 |
Elemento 205
215 |
Elemento 206
216 |
Elemento 207
217 |
Elemento 208
218 |
Elemento 209
219 |
Elemento 210
220 |
Elemento 211
221 |
Elemento 212
222 |
Elemento 213
223 |
Elemento 214
224 |
Elemento 215
225 |
Elemento 216
226 |
Elemento 217
227 |
Elemento 218
228 |
Elemento 219
229 |
Elemento 220
230 |
Elemento 221
231 |
Elemento 222
232 |
Elemento 223
233 |
Elemento 224
234 |
Elemento 225
235 |
Elemento 226
236 |
Elemento 227
237 |
Elemento 228
238 |
Elemento 229
239 |
Elemento 230
240 |
Elemento 231
241 |
Elemento 232
242 |
Elemento 233
243 |
Elemento 234
244 |
Elemento 235
245 |
Elemento 236
246 |
Elemento 237
247 |
Elemento 238
248 |
Elemento 239
249 |
Elemento 240
250 |
Elemento 241
251 |
Elemento 242
252 |
Elemento 243
253 |
Elemento 244
254 |
Elemento 245
255 |
Elemento 246
256 |
Elemento 247
257 |
Elemento 248
258 |
Elemento 249
259 |
Elemento 250
260 |
Elemento 251
261 |
Elemento 252
262 |
Elemento 253
263 |
Elemento 254
264 |
Elemento 255
265 |
Elemento 256
266 |
Elemento 257
267 |
Elemento 258
268 |
Elemento 259
269 |
Elemento 260
270 |
Elemento 261
271 |
Elemento 262
272 |
Elemento 263
273 |
Elemento 264
274 |
Elemento 265
275 |
Elemento 266
276 |
Elemento 267
277 |
Elemento 268
278 |
Elemento 269
279 |
Elemento 270
280 |
Elemento 271
281 |
Elemento 272
282 |
Elemento 273
283 |
Elemento 274
284 |
Elemento 275
285 |
Elemento 276
286 |
Elemento 277
287 |
Elemento 278
288 |
Elemento 279
289 |
Elemento 280
290 |
Elemento 281
291 |
Elemento 282
292 |
Elemento 283
293 |
Elemento 284
294 |
Elemento 285
295 |
Elemento 286
296 |
Elemento 287
297 |
Elemento 288
298 |
Elemento 289
299 |
Elemento 290
300 |
Elemento 291
301 |
Elemento 292
302 |
Elemento 293
303 |
Elemento 294
304 |
Elemento 295
305 |
Elemento 296
306 |
Elemento 297
307 |
Elemento 298
308 |
Elemento 299
309 |
Elemento 300
310 |
311 | 312 | -------------------------------------------------------------------------------- /.idea/workspace.xml.orig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <<<<<<< HEAD 6 | ======= 7 | 8 | 9 | >>>>>>> 318cf4a28ef2c739a9441920952340211629ec80 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | <<<<<<< HEAD 37 | 38 | 39 | 40 | 41 | ======= 42 | 43 | 44 | 45 | 46 | >>>>>>> 318cf4a28ef2c739a9441920952340211629ec80 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | <<<<<<< HEAD 58 | 59 | 60 | 61 | 62 | ======= 63 | 64 | 65 | 66 | 67 | >>>>>>> 318cf4a28ef2c739a9441920952340211629ec80 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 84 | 85 | 86 | 88 | 89 | 133 | 134 | 135 | 136 | 137 | true 138 | DEFINITION_ORDER 139 | 140 | <<<<<<< HEAD 141 | 142 | 724 | --------------------------------------------------------------------------------