طراحی گالری Masonry با CSS

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

چرا Masonry؟ چه کاربردهایی دارد

• نمایش مجموعه‌ای از تصاویر با نسبت‌های متفاوت (پورتفولیو، محصولات، بلاگ)
• استفاده در گالری‌های خبری یا شبکه‌های اجتماعی شبیه Pinterest
• افزایش جذابیت بصری بدون نیاز به کراپ کردن تمام تصاویر

روش‌های رایج پیاده‌سازی

• روش CSS Columns (بدون جاوااسکریپت) — ساده و پرکاربرد
• روش JavaScript Masonry (کتابخانه‌ها مثل Masonry یا Isotope) — کنترل و ترتیب‌دهی دقیق
• روش CSS Grid «ماسنری» (experimental) — فعلاً در برخی مرورگرها آزمایشی

روش 1 — CSS Columns (ساده و سریع)

/* basic masonry using CSS columns */.gallery {
  column-count: 3;
  column-gap: 1rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.gallery-item img {
  width: 100%;
  display: block;
  height: auto;
}

این کد یک گالری Masonry با سه ستون ایجاد می‌کند. با استفاده از column-count مرورگر عناصر را به ستون‌ها تقسیم می‌کند و break-inside: avoid از شکست یک آیتم بین ستون‌ها جلوگیری می‌کند. روش سریع و سازگار با موبایل است اما ترتیب آیتم‌ها به صورت عمودی در ستون‌ها انجام می‌شود (از بالا به پایین و سپس ستون بعدی).

نکات تکمیلی برای CSS Columns

• برای ریسپانسیو از media queries استفاده کنید و column-count را تغییر دهید.
• برای جلوگیری از شکست در صفحات چاپ یا برخی مرورگرها break-inside را با vendor prefixes بررسی کنید.
• در صورت نیاز به کنترل ترتیب افقی از JS یا روش‌های دیگر استفاده کنید.

روش 2 — JavaScript Masonry (کنترل بیشتر)

// HTML structure remains simple:
//
<div class="grid">
//
<div class="grid-item">...</div>
// ... //
</div>
// initialize Masonry (using Masonry.pkgd.js) var msnry = new Masonry('.grid', { itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true, gutter: 16 });

این مثال نشان می‌دهد چطور با کتابخانه Masonry گریدی پویا و با کنترل دقیق‌تر ستون‌ها، فضا (gutter) و چیدمان بسازیم. Masonry عناصر را به طور هوشمند در ستون‌ها جاگذاری می‌کند تا کمترین فضای خالی باقی بماند. برای کار با تصاویر باید بعد از بارگذاری تصاویر layout مجدداً اجرا شود (یا از imagesLoaded استفاده کنید).

// with imagesLoaded to ensure correct layout
imagesLoaded( '.grid', function() {
  msnry.layout();
});

این قطعه نشان می‌دهد که پس از لود کامل تصاویر، چیدمان صحیح انجام شود؛ در غیر این صورت ارتفاع تصاویر تغییر کرده و گرافیک گسسته می‌شود.

روش 3 — CSS Grid Masonry (آزمایشی)

/* experimental, only some browsers support */.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: masonry;
  gap: 1rem;
}

این ویژگی در برخی مرورگرها به‌صورت آزمایشی وجود دارد. استفاده از آن به دلیل عدم پشتیبانی گسترده توصیه نمی‌شود مگر برای پروژه‌های داخلی یا با fallback مناسب. همیشه یک fallback مبتنی بر CSS Columns یا JS در نظر بگیرید.

مقایسه روش‌ها

بهینه‌سازی عملکرد و تجربه کاربری

• از تصاویر واکنش‌گرا (srcset، sizes) استفاده کنید تا عرض مناسب بارگزاری شود.
• Lazy-loading را با loading=”lazy” فعال کنید تا مصرف پهنای باند کاهش یابد.
• ابعاد تصویر یا aspect-ratio را مشخص کنید تا صفحه دچار layout shift نشود.
• برای بارگزاری اولیه از placeholder یا skeleton استفاده کنید تا تجربه بهتر شود.

<img src="small.jpg"
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     loading="lazy"
     alt="شرح تصویر">

این مثال نشان می‌دهد چگونه با srcset، sizes و loading=lazy تصاویر را بهینه کنیم. مرورگر مناسب‌ترین تصویر را بر اساس اندازه صفحه انتخاب می‌کند و تنها در صورت نیاز تصویر بزرگتر بارگذاری می‌شود.

دسترس‌پذیری (Accessibility)

• همیشه از alt مناسب برای تصاویر استفاده کنید.
• در صورت استفاده از آیتم‌های قابل کلیک، از نقش‌ها، tabindex و کلیدهای کیبورد پشتیبانی کنید.
• اطمینان حاصل کنید ترتیب منطقی در DOM حفظ شده تا کاربران صفحه‌خوان تجربه قابل قبولی داشته باشند.

نمونه ترکیبی: ستون‌ها با ریسپانسیو و fallback

/* css */.gallery {
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 600px) {
  .gallery { column-count: 2; }
}
@media (min-width: 900px) {
  .gallery { column-count: 3; }
}
.gallery-item { break-inside: avoid; margin-bottom: 1rem; }

این قطعه یک fallback ساده و ریسپانسیو با CSS Columns را نمایش می‌دهد که در همه مرورگرها کار می‌کند و با استفاده از media query تعداد ستون‌ها را تغییر می‌دهد.

جمع‌بندی و پیشنهادات عملی

برای پروژه‌های ساده و نیاز به کمترین وابستگی، روش CSS Columns بهترین انتخاب است. اگر نیاز به مرتب‌سازی، فیلتر یا انیمیشن‌های پیچیده دارید، از کتابخانه‌های Masonry یا Isotope استفاده کنید. هنگام کار روی پروژه‌های بزرگ همیشه به عملکرد، اندازه تصویر و دسترس‌پذیری توجه کنید و گزینه‌های fallback را برای مرورگرهای قدیمی در نظر داشته باشید.

اگر می‌خواهید برای پروژه‌تان نمونه کد سفارشی یا نسخه‌ای با lazy-loading و فیلتر ارائه دهم، مشخصات گالری (تعداد آیتم، نیاز فیلتر/سورت) را بفرستید تا نمونه عملی آماده کنم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال