Beispiel:CSS-mehrspaltige Layouts-5.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" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
.grid {
  --n: 3;
  display: grid;
  max-width: 20em;
  gap: .5em;
  border: medium dashed #337599;
  margin-bottom:1em;
}
.horizontal {
  grid-auto-flow: column;
}
.grid img:first-child {
  grid-area: span var(--n) / span var(--n);
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


  </style>
  <title>Bildergalerie</title>
</head>
<body>
<h1>Bilder-Galerie im Grid Layout</h1>

<div class="grid" style="--n:4">
    <img src="https://wiki.selfhtml.org/images/f/f1/Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/f/f1/Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/f/f1/Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/f/f1/Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/f/f1/Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
</div>

<div class="grid horizontal" style="--n:3">
    <img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
    <img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">    
</div>

<p>Dieses Beispiel verzichtet auf feste Angaben von Spalten und Reihen. Über eine <em>custom property</em> wird nur die Größe für das erste Bild festgelegt: <code>grid-area: span var(--n) / span var(--n);</code></p>  
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mehrspaltige_Layouts-5.html&oldid=86406“