Beispiel:Grid-ausrichtung-2.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(auto-fill, minmax(6em, 1fr)); gap: .5em; grid-auto-flow: dense;
align-items: center; }
.gallery figure { border: thin solid #ccc; position: relative; margin: 0; /* figure hat sonst einen browsereigenen Abstand! */ } .gallery figure.portrait, .gallery figure.landscape {
grid-column-end: span 2;
}
.gallery figure.panorama {
grid-column-end: span 3;
}
.gallery figure img {
display: block; object-fit: cover; width: 100%;
}
</style> </head>
<body>
Responsive Bildergalerie - mittig angeordnet
<figure class="portrait"><img src="https://wiki.selfhtml.org/images/f/f1/Fr%C3%BChling.png" width="133" height="200" alt="placeholder"></figure> <figure class="landscape"><img src="https://wiki.selfhtml.org/images/thumb/6/61/Dummy-6.jpg/320px-Dummy-6.jpg" alt="placeholder"></figure> <figure class="portrait"><img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" width="133" height="200" alt="placeholder"></figure> <figure class="panorama"><img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="placeholder"></figure> <figure class="landscape"><img src="https://wiki.selfhtml.org/images/thumb/e/e7/Dummy-2.jpg/320px-Dummy-2.jpg" alt="placeholder"></figure> <figure class="landscape"><img src="https://wiki.selfhtml.org/images/1/1c/Dummy-5.jpg" alt="placeholder"></figure> <figure class="panorama"><img src="https://wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="placeholder"></figure> <figure class="portrait"><img src="https://wiki.selfhtml.org/images/5/59/Herbst.png" width="133" height="200" alt="placeholder"></figure> <figure class="portrait"><img src="https://wiki.selfhtml.org/images/a/a7/Winter.png" width="133" height="200" alt="placeholder"></figure> <figure class="landscape"><img src="https://wiki.selfhtml.org/images/thumb/8/80/Dummy-1.jpg/320px-Dummy-1.jpg" alt="placeholder"></figure>
</body> </html>
