Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Beispiel:CSS-grid-square-gallery-1.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:Grundlayout.css"> <title>Bilderwand</title> <style> .square-container { 

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 grid-auto-rows: 1fr;
 grid-auto-flow: dense;

max-width: 60em; }

.square-container > * { 

 background: rgb(0 0 0 / 0.1);
 border: thin solid transparent;

aspect-ratio: 1 / 1; }

.square-container > *:focus, .square-container > *:hover { 

 border: thin solid blue;
 opacity: .75;

}

.square-container img { 

 object-fit: cover; 
 width:100%; 
 height: 100%;

vertical-align: top; }

  1. blog,
  2. kontakt {
 background: url(https://upload.wikimedia.org/wikipedia/commons/a/a1/Niccolo_de_Niccoli_italic_handwriting.jpg);
 background-size:cover;
 display:flex; 
 align-items:center; 
 justify-content:center;
 font: 3rem bold; 
 text-decoration: none;
 color: red;
}
  1. kontakt {
 grid-column: -2 / -1;  
}
  • , ::before, ::after { 
 box-sizing: border-box;

}


</style> </head> <body>

Bilderwand

<a data-id="blog" href="#"> Blog </a> 

   <a data-id="kontakt" href="#">

Kontakt </a>

<a data-id="machupicchu" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Machu_Picchu%2C_Per%C3%BA%2C_2015-07-30%2C_DD_60.JPG&width=320" alt="Machu Picchu (Peru)" > </a>

<a data-id="chichenitza" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Chichen-Itza-Castillo-Seen-From-East.JPG&width=320" alt="Chichen Itza (Mexiko)" > </a>

<a data-id="empire" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Empire_State_Building_by_David_Shankbone.jpg&width=320" alt="Empire State Building (New York, USA)"> 

   </a>

<a data-id="chinwall" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/The_Great_Wall_of_China_at_Jinshanling-edit.jpg&width=320" alt="Chinesische Mauer (China)"> 

   </a>

<a data-id="christus" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Christ_the_Redeemer_-_Cristo_Redentor.jpg&width=320" alt="Christus-Statue (Rio, Brasilien)" > </a>

<a data-id="colosseo" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg&width=320" alt="Colosseum (Rom, Italien)"> 

   </a>

<a data-id="petra" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Petra_Jordan_BW_43_Edit_Alchemist-hp.jpg&width=320" alt="Petra (Jordanien)"> 

   </a>

<a data-id="taj mahal" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Taj_Mahal%2C_Agra%2C_India_edit3.jpg&width=320" alt="Taj Mahal (Indien)"> </a>

<a data-id="pyramide" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Great_Sphinx_of_Giza_-_20080716a.jpg&width=320" alt="Sphinx + Pyramiden (Ägypten)"> 

   </a>

<a data-id="atomium" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Atomium_bruxelles.jpg&width=320" alt="Atomium (Brüssel, Belgien)"> </a>

<a data-id="uluru" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Uluru%2C_helicopter_view.jpg&width=320" alt="Uluru (Australien)"> </a>

<a data-id="Neuschwanstein" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Schwangau_-_Schloss_Neuschwanstein_(b).JPG&width=320" alt="Neuschwanstein (Deutschland)"> </a> <a data-id="machupicchu" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Machu_Picchu%2C_Per%C3%BA%2C_2015-07-30%2C_DD_60.JPG&width=320" alt="Machu Picchu (Peru)" > </a>

<a data-id="chichenitza" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Chichen-Itza-Castillo-Seen-From-East.JPG&width=320" alt="Chichen Itza (Mexiko)" > </a>

<a data-id="empire" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Empire_State_Building_by_David_Shankbone.jpg&width=320" alt="Empire State Building (New York, USA)"> 

   </a>

<a data-id="chinwall" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/The_Great_Wall_of_China_at_Jinshanling-edit.jpg&width=320" alt="Chinesische Mauer (China)"> 

   </a>

<a data-id="christus" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Christ_the_Redeemer_-_Cristo_Redentor.jpg&width=320" alt="Christus-Statue (Rio, Brasilien)" > </a>

<a data-id="colosseo" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg&width=320" alt="Colosseum (Rom, Italien)"> 

   </a>

<a data-id="petra" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Petra_Jordan_BW_43_Edit_Alchemist-hp.jpg&width=320" alt="Petra (Jordanien)"> 

   </a>

<a data-id="taj mahal" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Taj_Mahal%2C_Agra%2C_India_edit3.jpg&width=320" alt="Taj Mahal (Indien)"> </a>

<a data-id="pyramide" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Great_Sphinx_of_Giza_-_20080716a.jpg&width=320" alt="Sphinx + Pyramiden (Ägypten)"> 

   </a>

<a data-id="uluru" href="#"> <img src="https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Uluru%2C_helicopter_view.jpg&width=320" alt="Uluru (Australien)"> </a>

</body> </html>

Abgerufen am 24.03.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-grid-square-gallery-1.html"