Beispiel:CSS-grid-gallery.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>responsive Bildergalerie</title>
  <style>
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    gap: 10px;
    grid-auto-flow: dense;
}

.gallery figure {
    border: thin solid #ccc;
	position: relative;	
	margin: 0;   /* figure hat sonst einen browsereigenen Abstand! */
    counter-increment: posMarkup;	
}
.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%;
   height: 100%;
}

.gallery figure::after {
  content: counter(posMarkup, decimal);
  position: absolute;
  bottom: 0;
  left: 0.2em;
  color: red;
  font-size: 2em;
}


</style>
</head>
 
<body>
  <h1>responsive Bildergalerie mit auto-fill und dense</h1>

  <p>Durch <code>auto-fill</code> werden die Spalten auf den verfügbaren Platz verteilt. Der Wert <code>dense</code> füllt mögliche Lücken mit weiter hinten im Markup stehenden Elementen auf.
  <div class="gallery">
    <figure><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><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/5/54/Landscape.svg" alt="placeholder"></figure>
    <figure><img src="https://wiki.selfhtml.org/images/5/59/Herbst.png" width="133" height="200" alt="placeholder"></figure>
    <figure><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>    
   </div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-gallery.html&oldid=92903“