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: 1fr ajusta a llenar ancho.
21 * columna 3: 20vw de amcho. */
22 grid-template-columns: 20vw 1fr 20vw;
23 /* Declara 3 renglones:
24 * remglón 1: auto ajusta al contenido.
25 * remglón 2: 1fr ajusta a llenar altura.
26 * remglón 3: auto ajusta al contenido. */
27 grid-template-rows: auto 1fr auto;
28 /* Indica como se llena el grid
29 * en 2 dimensiones usando el nombre
30 * asignado en la propiedad grid-area. */
31 grid-template-areas:
32 "head head head"
33 "nav main aside"
34 "foot foot foot";
35 }
36
37 h1 {
38 grid-area: head;
39 /* El elemento se centra
40 * horizontalmente dentro de su
41 * grupo de celdas. */
42 justify-self: center
43 }
44
45 main {
46 grid-area: main;
47 overflow: auto;
48 }
49
50 nav {
51 grid-area: nav;
52 overflow: auto;
53 }
54
55 aside {
56 grid-area: aside;
57 overflow: auto;
58 }
59
60 footer {
61 grid-area: foot;
62 justify-self: center
63 }
64 </style>
65
66</head>
67
68<body>
69
70 <h1>Grid 1</h1>
71
72 <main>
73 <p>
74 Este ejemplo usa display: grid
75 para una página principal.
76 </p>
77 <p>
78 Lorem ipsum dolor sit amet
79 consectetur adipisicing elit.
80 Omnis, eius. Quaerat alias
81 facilis recusandae, voluptate
82 cumque quod tenetur
83 necessitatibus exercitationem
84 beatae cupiditate iste
85 voluptatum, optio debitis
86 deserunt laboriosam placeat
87 odit?.
88 </p>
89 </main>
90
91 <nav>
92 <h2>Navegación</h2>
93 <p>
94 <a href="https://facebook.com"
95 target="_blank"
96 rel="noreferrer">
97 Facebook</a>
98 </p>
99 </nav>
100
101 <aside>
102 <h2>Aside</h2>
103 <p>
104 Este es un aside.
105 </p>
106 </aside>
107
108 <footer>
109 <p>
110 © 2025
111 Gilberto Pacheco Gallegos
112 </p>
113 </footer>
114
115</body>
116
117</html>

Solo para los más rudos

skip_previous skip_next