<!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>

Bildunterschriften so groß wie Bild - mittig angeordnet

1

2

   <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">

Diese Beschreibung kann auch schon mal fünf oder sechs Zeilen lang sein.

</figcaption>

   </figure>

   	<img src="https://wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="placeholder">

…

</figcaption>

   </figure>

</body> </html>

Beispiel:Grid-ausrichtung-5.html