ساخت گالری تصاویر ماسونری (Masonry Layout) با ستون‌های متغیر در CSS

رفیق برنامه‌نویس، تا حالا شده بخوای یه گالری عکس بسازی که مثل دیوار سنگی‌های قدیمی، همه تصاویرش چفت و بست بخورن و هیچ فضای خالی ناخوشایندی بینشون نمونه؟ همون چیزی که بهش می‌گیم Masonry Layout یا چیدمان ماسونری. این نوع چیدمان، مخصوصاً برای گالری تصاویر با ابعاد مختلف، یه راهکار بصری فوق‌العاده جذابه. اما خب، چطور می‌تونیم این چیدمان رو به صورت پویا و با ستون‌های متغیر، فقط با CSS و بدون دردسرهای جاوااسکریپت پیاده کنیم؟ آماده‌ایم که بریم سراغش و یه گالری درست و حسابی و مدرن بسازیم. قبل از اینکه وارد جزئیات بشیم، اگه دنبال ابزارهای حرفه‌ای برای کدنویسی و بهینه‌سازی پروژه‌هات هستی، حتماً یه سر به فروشگاه ابزارهای ما بزن. مطمئنم که چیزای بدردبخوری اونجا پیدا می‌کنی که سرعت کارت رو چندبرابر می‌کنه!

چیدمان ماسونری (Masonry Layout) چیست؟

چیدمان ماسونری، که گاهی اوقات به آن “شبکه شانه‌ای” یا “شبکه آجری” هم می‌گویند، یک الگوی طراحی وب است که در آن آیتم‌ها (معمولاً تصاویر یا کارت‌های محتوا) با ارتفاع‌های متفاوت، به گونه‌ای مرتب می‌شوند که فضای عمودی بینشان به حداقل برسد. تصور کن یک دیوار آجری که هر آجرش ابعاد خاص خودش را دارد اما بنا آنقدر ماهر است که همه را بدون فضای خالی اضافی کنار هم چیده. دقیقاً همین اتفاق در چیدمان ماسونری می‌افتد. به جای اینکه آیتم‌ها در هر سطر به خاطر بلندترین آیتم آن سطر هم‌اندازه شوند و کلی فضای خالی پایین آیتم‌های کوتاه‌تر باقی بماند، آیتم‌های بعدی به بالا شیفت پیدا می‌کنند و فضاهای خالی را پر می‌کنند. نتیجه این کار، یک چیدمان بسیار جذاب و کارآمد از نظر بصری است که به خصوص برای نمایش محتوای تصویری مثل پینترست (Pinterest) خیلی کاربرد دارد.

چرا از چیدمان ماسونری استفاده کنیم؟

• بهبود تجربه کاربری (UX): این چیدمان از فضای صفحه به شکل بهینه استفاده می‌کند و به کاربر اجازه می‌دهد محتوای بیشتری را در یک نگاه ببیند.
• جذابیت بصری: تنوع ارتفاعی آیتم‌ها، یک ظاهر دینامیک و هنری ایجاد می‌کند که از یک چیدمان شبکه‌ای سنتی و خشک خیلی جذاب‌تر است.
• مناسب برای محتوای متنوع: ایده‌آل برای گالری‌های تصویری، پورتفولیوها، فیدهای خبری یا هر جایی که آیتم‌های مختلفی با ابعاد متفاوت دارید.

روش‌های پیاده‌سازی ماسونری: از JS تا CSS خالص

تا چند سال پیش، پیاده‌سازی یک چیدمان ماسونریِ واقعی عمدتاً نیازمند جاوااسکریپت بود. کتابخانه‌هایی مثل Isotope.js یا Masonry.js با دستکاری موقعیت آیتم‌ها در DOM، این چیدمان را شبیه‌سازی می‌کردند. این روش‌ها کارساز بودند، اما با خودشان سربار عملکردی و پیچیدگی جاوااسکریپت را به همراه داشتند. خوشبختانه، با پیشرفت‌های اخیر در CSS، مخصوصاً با ظهور CSS Grid، حالا می‌توانیم این کار را به صورت بومی و فقط با CSS انجام دهیم، که هم عملکرد بهتری دارد و هم کدنویسی ساده‌تری!

چرا CSS Grid بهترین انتخاب است؟

CSS Grid Layout یک سیستم چیدمان دو بعدی (سطر و ستون) است که کنترل بی‌نظیری روی محل قرارگیری و اندازه آیتم‌ها به ما می‌دهد. در حالی که Flexbox برای چیدمان‌های یک بعدی (سطر یا ستون) عالی است، Grid برای چیدمان‌های پیچیده‌تر و شبکه‌ای مثل ماسونری، حرف اول را می‌زند. قابلیت‌هایی مثل `grid-template-columns` با `repeat()`, `minmax()`, و `auto-fit` یا `auto-fill` به همراه `grid-row-end: span X` به ما اجازه می‌دهند تا به سادگی یک چیدمان ماسونری پویا و رسپانسیو بسازیم.

شروع کار: ساختار HTML گالری

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

ساختار پایه

کد HTML زیر، یک ساختار ساده را برای گالری ما نشان می‌دهد. یک `div` با کلاس `masonry-gallery` به عنوان کانتینر و چندین `div` با کلاس `gallery-item` به عنوان آیتم‌های گالری. هر آیتم شامل یک تگ `img` و یک `div` برای اطلاعات بیشتر است.

<div class="masonry-gallery">
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x450/2980b9/ffffff?text=Image+1" alt="تصویر ۱">
        <div class="item-info">عنوان تصویر ۱</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x300/e74c3c/ffffff?text=Image+2" alt="تصویر ۲">
        <div class="item-info">عنوان تصویر ۲</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x600/2ecc71/ffffff?text=Image+3" alt="تصویر ۳">
        <div class="item-info">عنوان تصویر ۳</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/f39c12/ffffff?text=Image+4" alt="تصویر ۴">
        <div class="item-info">عنوان تصویر ۴</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x500/9b59b6/ffffff?text=Image+5" alt="تصویر ۵">
        <div class="item-info">عنوان تصویر ۵</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x350/1abc9c/ffffff?text=Image+6" alt="تصویر ۶">
        <div class="item-info">عنوان تصویر ۶</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x400/34495e/ffffff?text=Image+7" alt="تصویر ۷">
        <div class="item-info">عنوان تصویر ۷</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x250/7f8c8d/ffffff?text=Image+8" alt="تصویر ۸">
        <div class="item-info">عنوان تصویر ۸</div>
    </div>
</div>

function copyCode(button) {
const codeBlock = button.closest(‘div’).nextElementSibling.querySelector(‘code’);
const range = document.createRange();
range.selectNode(codeBlock);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand(‘copy’);
window.getSelection().removeAllRanges();
button.textContent = ‘کپی شد!’;
setTimeout(() => {
button.textContent = ‘کپی کد’;
}, 2000);
}

دقت کن که تگ `img` داخل هر `gallery-item` قرار گرفته. این برای ما حیاتیه چون می‌خوایم ارتفاع هر آیتم رو بر اساس ارتفاع تصویرش تنظیم کنیم.

جادوی CSS Grid: ستون‌های متغیر و ارتفاع‌های پویا

خب، رسیدیم به بخش اصلی! اینجا قراره با CSS Grid یه چیدمان ماسونری بسازیم که هم ستون‌هایش متغیر باشن و هم آیتم‌هاش خودشون رو با ارتفاع متفاوت تصاویر وفق بدن.

گام اول: تعریف Grid Container

اولین قدم اینه که کانتینر اصلی گالری رو به یک Grid Container تبدیل کنیم و ستون‌هایش رو به شکل داینامیک تعریف کنیم. از خاصیت `display: grid` و `grid-template-columns` استفاده می‌کنیم. اینجا جادوی `repeat(auto-fit, minmax(250px, 1fr))` رخ می‌دهد:

• `display: grid;`: این کانتینر را به یک Grid Container تبدیل می‌کند.
• `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`:
  • `repeat()`: این تابع به ما اجازه می‌دهد ستون‌ها را تکرار کنیم.
  • `auto-fit`: به Grid می‌گوید که تا جایی که امکان دارد، ستون‌ها را در فضای موجود جای دهد. اگر فضای کافی نباشد، ستون‌ها را کمتر می‌کند. این تفاوت اصلیش با `auto-fill` هست که همیشه سعی میکنه ستون‌ها رو به تعداد حداکثری نگه داره حتی اگر خالی باشن.
  • `minmax(250px, 1fr)`: هر ستون حداقل 250 پیکسل عرض دارد، اما اگر فضای بیشتری باشد، به صورت متناسب (با `1fr`) گسترش می‌یابد تا کل فضای موجود را پر کند.
• `gap`: فاصله بین سطرها و ستون‌ها را مشخص می‌کند.

.masonry-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 10px; /* این مقدار بسیار مهمه! توضیحش رو پایین‌تر می‌دم */
    gap: 15px;
    padding: 20px;
    max-width: 1200px;
    margin: 30px auto;
    background-color: #f4f7f6;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

نکته حیاتی: خاصیت grid-auto-rows: 10px; رو دست کم نگیر! این خط، پایه و اساس چیدمان ماسونری ماست. ما سطرها رو با ارتفاع ثابت (مثلاً ۱۰ پیکسل) تعریف می‌کنیم. این به هر آیتم گالری اجازه می‌ده تا چندین سطر گرید رو اشغال کنه و به این ترتیب، ارتفاع واقعی تصویرش حفظ بشه. به این ۱۰ پیکسل می‌گیم “واحد پایه” یا “بیسلاین” ارتفاعی. هرچه این عدد کوچکتر باشه، دقت ما در پر کردن فضاهای خالی بیشتر میشه، اما ممکنه کمی پیچیدگی محاسباتی رو زیاد کنه.

گام دوم: استایل‌دهی آیتم‌های گالری و محاسبه ارتفاع

حالا باید آیتم‌های گالری رو استایل بدیم و کاری کنیم که ارتفاعشان متناسب با ارتفاع تصویرشان باشد.

.gallery-item {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden; /* مهم برای تصاویر */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    break-inside: avoid; /* برای مرورگرهایی که از multi-column layout استفاده می‌کنند */
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* مطمئن می‌شویم تصویر فضای موجود را پر می‌کند */
}

.item-info {
    padding: 10px 15px;
    font-size: 0.9em;
    color: #555;
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
}

تا اینجا، Grid ستون‌ها را به درستی می‌سازد، اما آیتم‌ها هنوز ارتفاع خودشان را به درستی تنظیم نکرده‌اند. اینجا نیاز به یک ترفند جاوااسکریپتی داریم. بله، گفتیم CSS خالص، اما برای اینکه Grid بتواند ارتفاع ردیف‌ها را بر اساس ارتفاع محتوا تنظیم کند، باید به آن بگوییم هر آیتم چند سطر Grid را اشغال کند. این کار را با محاسبه ارتفاع هر آیتم و تقسیم آن بر `grid-auto-rows` (که ۱۰ پیکسل تعیین کردیم) انجام می‌دهیم.

گام سوم: جاوااسکریپت برای محاسبه `grid-row-end`

اینجا تنها جایی است که نیاز به کمی جاوااسکریپت داریم تا Grid ما واقعاً به یک ماسونری داینامیک تبدیل شود. این اسکریپت ارتفاع هر آیتم را محاسبه کرده و بر اساس آن، خاصیت `grid-row-end` را برای آن آیتم تنظیم می‌کند.

<script>
document.addEventListener("DOMContentLoaded", function() {
    const gallery = document.querySelector('.masonry-gallery');
    const items = gallery.querySelectorAll('.gallery-item');
    const rowHeight = parseInt(getComputedStyle(gallery).gridAutoRows);
    const rowGap = parseInt(getComputedStyle(gallery).gap);

    function setItemHeight(item) {
        const itemImg = item.querySelector('img');
        
        // اطمینان حاصل می‌کنیم تصویر لود شده است
        if (itemImg.complete) {
            const itemHeight = itemImg.offsetHeight + item.querySelector('.item-info').offsetHeight;
            const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
            item.style.gridRowEnd = `span ${rowSpan}`;
        } else {
            // در صورتی که تصویر هنوز لود نشده باشد، بعد از لود شدن اجرا شود
            itemImg.addEventListener('load', () => {
                const itemHeight = itemImg.offsetHeight + item.querySelector('.item-info').offsetHeight;
                const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
                item.style.gridRowEnd = `span ${rowSpan}`;
            });
        }
    }

    items.forEach(item => {
        setItemHeight(item);
    });

    // برای تغییر سایز پنجره یا اضافه شدن آیتم‌های جدید
    window.addEventListener('resize', () => {
        items.forEach(item => {
            setItemHeight(item);
        });
    });
});
</script>

این کد جاوااسکریپت:

• در زمان بارگذاری DOM (و در صورت تغییر اندازه پنجره) اجرا می‌شود.
• `rowHeight` و `rowGap` را از استایل‌های محاسبه شده Grid Container می‌خواند.
• برای هر `gallery-item`:
  • ارتفاع کل آیتم (تصویر + اطلاعات) را محاسبه می‌کند.
  • با استفاده از فرمول Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap)) تعداد سطرهایی که آیتم باید اشغال کند را به دست می‌آورد.
  • این تعداد سطر را به خاصیت grid-row-end آیتم اضافه می‌کند (مثلاً grid-row-end: span 15;).

با این ترفند، گرید دقیقاً می‌فهمد که هر آیتم چقدر فضا اشغال می‌کند و آن‌ها را مانند آجرها، بدون فضای خالی، کنار هم می‌چیند. این یک راه حل قوی و کارآمده که ترکیب قدرت Grid CSS با یک اسکریپت کوچک JS برای محاسبات داینامیک ارتفاع هست.

برای یادگیری بیشتر در مورد جاوااسکریپت و کدهای آماده، می‌تونی به صفحه اسنیپت‌های JS ما سر بزنی.

رسپانسیو کردن گالری ماسونری برای همه دستگاه‌ها

یک گالری خوب باید روی هر دستگاهی، از موبایل گرفته تا تلویزیون‌های بزرگ، عالی به نظر برسد. خوشبختانه، با رویکردی که در پیش گرفتیم، رسپانسیو بودن گالری ماسونری ما بسیار ساده است.

مدیریت ستون‌ها با `minmax` و `auto-fit`

همانطور که قبلاً دیدیم، استفاده از `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` به طور خودکار تعداد ستون‌ها را بر اساس عرض صفحه تنظیم می‌کند. این یعنی در صفحات کوچکتر (مثل موبایل)، تعداد ستون‌ها کمتر و در صفحات بزرگتر (مثل لپ‌تاپ یا تلویزیون) بیشتر می‌شود. این قابلیت، بخش عمده‌ای از کار رسپانسیو را برای ما انجام می‌دهد.

استفاده از Media Queries برای تنظیمات دقیق‌تر

برای کنترل دقیق‌تر، مثلاً تغییر حداقل عرض ستون‌ها یا فاصله (gap) بین آن‌ها در اندازه‌های مختلف صفحه، می‌توانیم از Media Queries استفاده کنیم.

/* برای موبایل‌های کوچک (عرض کمتر از 480px) */
@media (max-width: 480px) {
    .masonry-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* ستون‌های باریک‌تر */
        gap: 10px;
        padding: 10px;
    }
}

/* برای تبلت‌ها (عرض بین 481px و 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .masonry-gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* دو یا سه ستون */
        gap: 12px;
        padding: 15px;
    }
}

/* برای لپ‌تاپ و دسکتاپ‌های بزرگتر (بالای 1200px) */
@media (min-width: 1201px) {
    .masonry-gallery {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* ستون‌های پهن‌تر */
        gap: 20px;
    }
}

با این مدیا کوئری‌ها، می‌توانی تجربه کاربری را برای هر دستگاه بهینه کنی و مطمئن بشی که گالری تصاویرت همیشه عالی به نظر می‌رسد.

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

تصاویر قلب یک گالری هستند. اما اگه بهینه نشن، می‌تونن سرعت سایتت رو به شدت پایین بیارن.

• فرمت مناسب: از فرمت‌های مدرن مثل WebP استفاده کن که فشرده‌سازی بهتری دارند.
• فشرده‌سازی: تصاویر را قبل از آپلود فشرده‌سازی کن تا حجمشان کم شود.
• Lazy Loading: با استفاده از loading="lazy" در تگ img، فقط تصاویری را لود کن که در viewport کاربر قرار دارند. این کار به خصوص برای گالری‌های بزرگ خیلی مفیده.
• Aspect Ratio: با تنظیم `padding-bottom` بر اساس نسبت ابعاد تصویر در یک کانتینر، از شیفت خوردن لی‌اوت (CLS) جلوگیری کن.

<div class="gallery-item">
    <div class="image-wrapper" style="padding-bottom: 150%;"> <!-- برای تصویر 300x450، 450/300 * 100% = 150% -->
        <img src="path/to/image1.webp" alt="توصیف تصویر" loading="lazy">
    </div>
    <div class="item-info">عنوان تصویر</div>
</div>

.image-wrapper {
    position: relative;
    width: 100%;
    /* padding-bottom بر اساس نسبت ابعاد تصویر تنظیم می‌شود */
    /* مثلاً برای تصویر 300x450: (450/300) * 100% = 150% */
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

با این تکنیک‌ها، می‌تونی مطمئن باشی که هم سایتت سریع لود میشه و هم بهترین تجربه رو به کاربر ارائه می‌دی. اگر به کدهای HTML و طراحی صفحات علاقه داری، حتماً از بخش اسنیپت‌های HTML ما دیدن کن.

عیب‌یابی سریع: مشکلات رایج و راه‌حل‌ها

هیچ پروژه‌ای بدون چالش نیست، و چیدمان ماسونری هم از این قاعده مستثنی نیست. اینجا به چند مشکل رایج و نحوه رفع آن‌ها اشاره می‌کنیم:

۱. فضاهای خالی بزرگ و ناهماهنگ

• مشکل: گالری به درستی چیده نشده و فضاهای خالی عمودی زیادی بین آیتم‌ها وجود دارد.
• راه‌حل:
  • `grid-auto-rows`: مطمئن شو که این خاصیت در Grid Container تنظیم شده باشد (مثلاً `grid-auto-rows: 10px;`). اگر مقدار آن خیلی بزرگ باشد، ممکن است فضاهای خالی بیشتری ایجاد کند.
  • جاوااسکریپت: بررسی کن که کد جاوااسکریپت برای محاسبه `grid-row-end` به درستی کار می‌کند و بعد از لود شدن تصاویر اجرا می‌شود. ممکن است تصاویر هنوز لود نشده باشند و اسکریپت ارتفاع‌های نادرست را محاسبه کند. استفاده از `itemImg.complete` و `itemImg.addEventListener(‘load’, …)` در JS برای اطمینان از لود کامل تصویر بسیار مهم است.
  • `gap` (اشکال املایی عمدی): مطمئن شو که مقدار `gap` در CSS به درستی محاسبه می‌شود و در فرمول JS هم در نظر گرفته شده. اگر `گپ` رو در نظر نگیری، محاسبات ارتفاع ممکنه اشتباه دربیاد.

۲. آیتم‌ها روی هم می‌افتند یا جابجا می‌شوند

• مشکل: آیتم‌ها به درستی در Grid قرار نمی‌گیرند و گاهی اوقات روی هم می‌افتند یا جایگاهشان بهم می‌ریزد.
• راه‌حل:
  • `overflow: hidden` در `gallery-item`: مطمئن شوید که آیتم‌های گالری دارای `overflow: hidden` هستند تا محتوای اضافی از لبه‌ها بیرون نزند.
  • `object-fit: cover` در `img`: این خاصیت به تصویر کمک می‌کند تا فضای موجود را پر کند بدون اینکه نسبت ابعادش تغییر کند و احتمالا باعث مشکلات ارتفاع شود.
  • بارگذاری تصاویر: اگر تصاویر با تأخیر لود می‌شوند (مثلاً با Lazy Loading), اسکریپت JS باید منتظر بماند تا تصویر کامل لود شود. همانطور که در کد جاوااسکریپت بالا نشان دادیم، استفاده از `itemImg.addEventListener(‘load’, …)` برای این منظور ضروری است.

۳. عدم واکنش‌گرایی در تغییر اندازه پنجره

• مشکل: با تغییر اندازه پنجره مرورگر، چیدمان ستون‌ها به درستی تغییر نمی‌کند یا آیتم‌ها بهم می‌ریزند.
• راه‌حل:
  • `minmax` و `auto-fit`: مطمئن شوید که `grid-template-columns` به درستی با `repeat(auto-fit, minmax(WIDTH, 1fr))` تعریف شده باشد.
  • `window.addEventListener(‘resize’, …)`: در جاوااسکریپت، تابع محاسبه ارتفاع آیتم‌ها باید در رویداد `resize` پنجره فراخوانی شود تا با هر تغییر اندازه، چیدمان دوباره تنظیم شود.

این‌ها فقط چند نمونه از مشکلات احتمالی هستند. همیشه بهترین کار، استفاده از ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای بررسی Grid Layout و فهمیدن اینکه چرا آیتم‌ها آنطور که انتظار دارید رفتار نمی‌کنند.

نتیجه‌گیری

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

موفق باشی رفیق! اگه سوالی داشتی یا نیاز به راهنمایی بیشتر پیدا کردی، حتماً از طریق شماره 09202232789 با ما در تماس باش. ما همیشه اینجا هستیم تا بهت کمک کنیم.