I. grid 2

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 2</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 font-family: sans-serif;
14 }
15
16 ol {
17 list-style-type: none;
18 margin: 0;
19 padding: 0.5rem;
20 display: grid;
21 gap: 0.5rem;
22 /* Las columnas se generan automáticamente con columnas que al menos deben
23 * tener 15rem de ancho y juntas todas las columnas se estiran uniformemente
24 * para llenar el ancho. */
25 grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
26 }
27
28 img {
29 max-width: 100%;
30 }
31 </style>
32
33</head>
34
35<body>
36
37 <h1>Grid 2</h1>
38
39 <nav>
40 <ol>
41
42 <li>
43 <figure>
44 <img alt="Lobo"
45 src="https://images.pexels.com/photos/397857/pexels-photo-397857.jpeg">
46 <figcaption>Lobo</figcaption>
47 </figure>
48 <p>
49 <a target="_blank" rel=”noreferrer”
50 href="https://www.pexels.com/es-es/foto/lobo-blanco-y-negro-397857/">
51 Foto de Steve en Pexels.</a>
52 </p>
53 </li>
54
55 <li>
56 <figure>
57 <img alt="Buho"
58 src="https://images.pexels.com/photos/3732453/pexels-photo-3732453.jpeg">
59 <figcaption>Buho</figcaption>
60 </figure>
61 <p>
62 <a target="_blank" rel=”noreferrer”
63 href="https://www.pexels.com/es-es/foto/foto-de-buho-ural-3732453/">
64 Foto de Erik Karits en Pexels.</a>
65 </p>
66 </li>
67
68 <li>
69 <figure>
70 <img alt="Perro"
71 src="https://images.pexels.com/photos/3978352/pexels-photo-3978352.jpeg">
72 <figcaption>Perro </figcaption>
73 </figure>
74 <p>
75 <a target="_blank" rel=”noreferrer”
76 href="https://www.pexels.com/es-es/foto/perro-de-pelo-corto-marron-y-blanco-acostado-3978352/">
77 Foto de Creative Workshop en Pexels.</a>
78 </p>
79 </li>
80
81 <li>
82 <figure>
83 <img alt="Gato"
84 src="https://images.pexels.com/photos/141496/pexels-photo-141496.jpeg">
85 <figcaption>Gato</figcaption>
86 </figure>
87 <p>
88 <a target="_blank" rel=”noreferrer”
89 href="https://www.pexels.com/es-es/foto/gatito-gris-en-bolsa-de-papel-plateada-141496/">
90 Foto de Vadim B en Pexels.</a>
91 </p>
92 </li>
93
94 <li>
95 <figure>
96 <img alt="León"
97 src="https://images.pexels.com/photos/2270848/pexels-photo-2270848.jpeg">
98 <figcaption>León</figcaption>
99 </figure>
100 <p>
101 <a target="_blank" rel=”noreferrer”
102 href="https://www.pexels.com/es-es/foto/leon-marron-2270848/">
103 Foto de Ralph en Pexels.</a>
104 </p>
105 </li>
106
107 <li>
108 <figure>
109 <img alt="Oso"
110 src="https://images.pexels.com/photos/35435/pexels-photo.jpg">
111 <figcaption>Oso</figcaption>
112 </figure>
113 <p>
114 <a target="_blank" rel=”noreferrer”
115 href="https://www.pexels.com/es-es/foto/oso-cafe-35435/">
116 Foto de Rasmus Svinding en Pexels.</a>
117 </p>
118 </li>
119
120 <li>
121 <figure>
122 <img alt="Coyote"
123 src="https://images.pexels.com/photos/10226903/pexels-photo-10226903.jpeg">
124 <figcaption>Coyote</figcaption>
125 </figure>
126 <p>
127 <a target="_blank" rel=”noreferrer”
128 href="https://www.pexels.com/es-es/foto/animal-perro-mono-hierba-10226903/">
129 Foto de Esteban Arango en Pexels.</a>
130 </p>
131 </li>
132
133 </ol>
134 </nav>
135
136</body>
137
138</html>
skip_previous skip_next