Beispiel:CSS-grid-ausrichtung-2.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">
  <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>
  <h1>Responsive Bildergalerie - mittig angeordnet</h1>

  <div class="gallery">
    <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>    
   </div>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-2.html&oldid=99555“