ساخت گرید تصاویر با ارتفاع ثابت برای هر سطر

وقتی صحبت از نمایش تصاویر به صورت گرید می‌شود، اغلب به دنبال راهی برای مرتب کردن عکس‌ها با ارتفاع ثابت و تنظیم خودکار عرض آنها هستیم تا هم تصاویر به‌درستی نمایش داده شوند و هم تجربه بصری خوبی ایجاد شود. به عنوان مثال، فرض کنید در حال ایجاد یک سایت گالری عکس هستید یا می‌خواهید یک نمایشگاه آنلاین طراحی کنید. در این‌گونه موارد، استفاده از گریدهای با ارتفاع ثابت برای هر سطر می‌تواند بسیار کارآمد باشد.

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

قبل از اینکه به کدنویسی بپردازیم، باید بدانیم که داشتن یک اندازه ثابت برای ارتفاع تصاویر ممکن است باعث کراپ شدن بخشی از تصویر‌ها شود. بنابراین در برخی موارد باید نسبت‌های طول و عرض عکس‌ها را تنظیم کنیم تا به بهترین نتیجه برسیم.

همچنین، یکی از مواردی که در این نوع طراحی باید به آن توجه کرد، میزان فضای بین تصاویر است که باعث می‌شود طراحی گرید جذاب‌تر و منظم‌تر به‌نظر برسد. این فضا با استفاده از خواص margin یا gap در CSS قابل کنترل است.

نمونه کد HTML و CSS برای ایجاد گرید تصاویر

<style>
  .photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .photo-grid img {
    height: 200px;
    object-fit: cover;
    width: calc((100% / 3) - 10px);
  }
</style>

<div class="photo-grid">
  <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>

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