├── README.md
├── grid.css
└── grid.html
/README.md:
--------------------------------------------------------------------------------
1 | # css-grid-template
2 | CSS Grid responsive layout
3 |
4 | Maquetado responsive con CSS Grid
5 |
6 | [](https://www.youtube.com/watch?v=T4t00Hd3qZc "Maquetado responsive con CSS Grid")
7 |
8 |
--------------------------------------------------------------------------------
/grid.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Public+Sans&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | html {
10 | height: 100%;
11 | }
12 |
13 | body {
14 | font-family: "Public Sans", sans-serif;
15 | font-size: 1.2rem;
16 | min-height: 100%;
17 | }
18 |
19 | .grid-container > * {
20 | box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);
21 | border-radius: 4px;
22 | padding: 10px;
23 | text-align: center;
24 | }
25 |
26 | .header {
27 | grid-area: header;
28 | background-color: #85aedd;
29 | }
30 |
31 | .navbar {
32 | grid-area: navbar;
33 | background-color: #afd6af;
34 | }
35 |
36 | .sidebar {
37 | grid-area: sidebar;
38 | background-color: #fdcfcf;
39 | }
40 |
41 | .main {
42 | grid-area: main;
43 | background-color: #f5f5f5;
44 | }
45 |
46 | .footer {
47 | grid-area: footer;
48 | background-color: #8c96a0;
49 | }
50 |
51 | .grid-container {
52 | display: grid;
53 | gap: 10px;
54 | grid-template:
55 | "header" 100px
56 | "navbar" 50px
57 | "main" auto
58 | "sidebar" 100px
59 | "footer" 100px;
60 | }
61 |
62 | @media (min-width: 600px) {
63 | .grid-container {
64 | /* grid-template-columns: 200px auto;
65 | grid-template-rows: 100px 50px auto 100px;
66 | grid-template-areas:
67 | "header header"
68 | "navbar navbar"
69 | "sidebar main"
70 | "footer footer"; */
71 |
72 | grid-template:
73 | "header header" 100px
74 | "navbar navbar" 50px
75 | "sidebar main" auto
76 | "footer footer" 100px /
77 | 200px auto;
78 | }
79 | }
80 |
81 | @media (min-width: 900px) {
82 | .grid-container {
83 | grid-template:
84 | "header header header" 100px
85 | "navbar main sidebar" auto
86 | "footer footer footer" 100px /
87 | 200px auto 200px;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Grid
8 |
9 |
10 |
11 |
12 |
13 |
14 | MAIN
15 |
16 |
17 |
--------------------------------------------------------------------------------