Beispiel:Display:grid.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>mehrere Bilder mit Grid nebeneinander positionieren</title>
<style>
img {
width: 100%;
}
figure {
border: thin solid #ccc;
}
body {
display: grid; grid-template-columns: repeat(3, 1fr); max-width: 60em; border: thin dotted #337599;
}
h1 { grid-column: 1 / -1; }
</style>
</head>
<body>
mehrere Bilder mit Grid nebeneinander positionieren
<figure> <img src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>
Lauf an der Pegnitz
Nürnberger Tor
</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz"> <figcaption> Lauf an der Pegnitz
Brücke über die Pegnitz </figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor"> <figcaption> Lauf an der Pegnitz
Mauermühle und Judenturm </figcaption>
</figure>
</body>
</html>
