Vytvorenie galérie obrázkov s HTML a CSS

Úvod

V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke. Galérie sú skvelý spôsob, ako prezentovať fotografie alebo produkty pre používateľov.

1. HTML štruktúra galérie

 <div class="gallery"> <div class="gallery-item"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="gallery-item"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="gallery-item"><img src="obrazok3.jpg" alt="Obrázok 3"></div> <!-- pridaj ďalšie obrázky podľa potreby --> </div> 

2. CSS štýly galérie

 .gallery { display: flex; flex-wrap: wrap; gap: 10px; }

.gallery-item {
flex: 1 1 200px;
overflow: hidden;
}

.gallery-item img {
width: 100%;
display: block;
border-radius: 10px;
}

@media (max-width: 768px) {
.gallery {
flex-direction: column;
}
.gallery-item {
margin: 5px 0;
}
}

Záver

Takto vytvorená galéria je responzívna a prispôsobí sa rôznym zariadeniam. Môžeš ju rozšíriť o lightbox efekt alebo filtrovanie obrázkov pre lepší používateľský zážitok.