H. grid 1

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Grid 1</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 display: grid;
14 margin: 0 0.5rem;
15 height: 100dvh;
16 column-gap: 0.5rem;
17 row-gap: 1rem;
18 /* Declara 3 columnas:
19 * columna 1 20vw de amcho
20 * columna 2: se ajusta ancho
21 * columna 3: 20vw de amcho */
22 grid-template-columns: 20vw 1fr 20vw;
23 /* Declara 3 renglones:
24 * remglón 1 4rem de alto
25 * remglón 2: se ajusta altura
26 * remglón 3: 4rem de alto */
27 grid-template-rows: 4rem 1fr 4rem;
28 grid-template-areas:
29 "head head head"
30 "nav main aside"
31 "foot foot foot";
32 }
33
34 h1 {
35 margin: 0;
36 grid-area: head;
37 align-self: center;
38 justify-self: center
39 }
40
41 main {
42 grid-area: main;
43 overflow: auto;
44 }
45
46 nav {
47 grid-area: nav;
48 overflow: auto;
49 }
50
51 aside {
52 grid-area: aside;
53 overflow: auto;
54 }
55
56 footer {
57 display: flow-root;
58 grid-area: foot;
59 align-self: center;
60 justify-self: center
61 }
62 </style>
63
64</head>
65
66<body>
67
68 <h1>Grid 1</h1>
69
70 <main>
71 <p>
72 Este ejemplo usa display: grid
73 para una página principal.
74 </p>
75 <p>
76 Lorem ipsum dolor sit amet
77 consectetur adipisicing elit.
78 Omnis, eius. Quaerat alias
79 facilis recusandae, voluptate
80 cumque quod tenetur
81 necessitatibus exercitationem
82 beatae cupiditate iste
83 voluptatum, optio debitis
84 deserunt laboriosam placeat
85 odit?.
86 </p>
87 </main>
88
89 <nav>
90 <h2>Navegación</h2>
91 <p>
92 <a href="https://facebook.com"
93 target="_blank"
94 rel="noreferrer">
95 Facebook</a>
96 </p>
97 </nav>
98
99 <aside>
100 <h2>Aside</h2>
101 <p>
102 Este es un aside.
103 </p>
104 </aside>
105
106 <footer>
107 <p>
108 © 2025
109 Gilberto Pacheco Gallegos
110 </p>
111 </footer>
112
113</body>
114
115</html>

Solo para los más rudos

skip_previous skip_next