Vorlage:GridBox
<style>
/* Container für die Boxen */
.gallery-row {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
margin: 1em 0;
}
/* Jede Box */
.gallery-box {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
width: 200px; /* Breite der Box */
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Bild in der Box */
.gallery-box img {
width: 100%;
height: auto;
display: block;
}
/* Titel */
.gallery-box .title {
font-weight: bold;
margin: 0.5em 0 0.2em 0;
}
/* Beschreibung */
.gallery-box .description {
font-size: 0.9em;
color: #555;
padding: 0 0.5em 0.5em 0.5em;
}
</style>
<div class="gallery-row">
<div class="gallery-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="First Image">
<div class="title">First Image</div>
<div class="description">This is the description for the first image.</div>
</div>
<div class="gallery-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="Second Image">
<div class="title">Second Image</div>
<div class="description">This is the description for the second image.</div>
</div>
<div class="gallery-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg" alt="Third Image">
<div class="title">Third Image</div>
<div class="description">This is the description for the third image.</div>
</div>
</div>
