گالری تصویر با CSS

سلام دوستان! امروز می‌خواهیم درباره‌ی ساخت یک گالری تصویر ساده با استفاده از CSS صحبت کنیم. گالری‌ها مکان مناسبی برای نمایش تصاویر به شکلی زیبا و جذاب هستند و می‌توانند تجربه‌ی کاربری را بهبود بخشند. در این آموزش، می‌خواهیم مراحل ساخت یک گالری تصویر شیک و کاربردی را به زبان فارسی و در قالبی ساده توضیح دهیم.

اول از همه باید بدانید که ساخت یک گالری تنها با CSS کار خیلی سختی نیست. با کمی تمرین و درک درست از نحوه‌ی استفاده از Flexbox یا CSS Grid، خیلی راحت می‌توانید یک گالری خوب درست کنید. اما قبل از اینکه وارد جزئیات کد نویسی شویم، بگذارید درباره اهمیت یک گالری تصویر خوب کمی صحبت کنیم. گالری‌ها می‌توانند تصاویر را سازماندهی کرده و دسترسی آسان‌تری به آنها بدهند. همچنین، طراحان وب از آنها برای نمایش نمونه کارها یا محصولاتی که می‌خواهند کاربران ببینند، استفاده می‌کنند.

حالا که با اهمیت گالری‌های تصویر آشنا شدید، بیایید نگاهی به کدی بیندازیم که می‌تواند به شما کمک کند تا یک گالری تصویر زیبا با CSS بسازید. این مثال از CSS Grid استفاده می‌کند اما شما می‌توانید با Flexbox هم به نتیجه مشابهی برسید.

نمونه کد CSS برای ساخت گالری تصویر

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
</style>

توضیحات کد به خط به خط