Beispiel:CSS-grid-ausrichtung-5.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive Bildergalerie</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5em;
border: thin dotted red;
}
.gallery figure {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2em;
margin: 0; /* sonst großer Rand wg. Default-Stylesheet */
}
.fullwidth {
grid-column: 1 / -1;
border: thin dotted hotpink;
}
.gallery figure > img,
.gallery figure >figcaption {
border: thin solid;
}
.gallery figure > img {
margin-left: 2em;
}
.gallery figure > figcaption {
align-self: center; /* oder stretch */
padding: 1em;
}
.gallery div {
background: pink;
text-align: center;
padding: 2em;
}
</style>
</head>
<body>
<h1>Bildunterschriften so groß wie Bild - mittig angeordnet</h1>
<div class="gallery">
<div>1</div>
<div>2</div>
<figure>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="placeholder">
<figcaption>Toskana</figcaption>
</figure>
<figure class="fullwidth">
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="placeholder">
<figcaption>
<h3>Toskana</h3>
<p>Diese Beschreibung kann auch schon mal fünf oder sechs Zeilen lang sein.</p>
<p><a href="CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items">mehr Info</a></p>
</figcaption>
</figure>
<figure class="fullwidth">
<img src="https://wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="placeholder">
<figcaption>
<h3>Abruzzen</h3>
<p>…</p>
</figcaption>
</figure>
</div>
</body>
</html>