آجر به آجر: به ما در ساختن CSS Masonry کمک کنید

Patrick Brosset

Alison Maher

منتشر شده: ۲۳ ژوئیه ۲۰۲۵، آخرین به‌روزرسانی: ۱۳ فوریه ۲۰۲۶

هشدار: سینتکس قدیمی: نمونه‌های کد موجود در این پست بر اساس پیش‌نویس اولیه‌ای از چیزی است که اکنون به عنوان "طرح‌بندی خطوط شبکه‌ای" شناخته می‌شود. برای آخرین نسخه از این سینتکس به مشخصات css-grid-3 مراجعه کنید.

تیم‌های مایکروسافت اج و گوگل کروم با هیجان اعلام می‌کنند که CSS masonry برای آزمایش اولیه توسعه‌دهندگان از کروم و اج ۱۴۰ آماده است.

با توجه به اینکه هنوز مسائل مربوط به مشخصات و سینتکس CSS masonry باقی مانده است، بازخورد شما برای کمک به ما در شکل‌دهی نهایی API بسیار مهم است. این ویژگی را امتحان کنید و نظرات خود را با ما در میان بگذارید.

امروز CSS Masonry را در Chromium آزمایش کنید

برای آزمایش CSS Masonry امروز:

1. از کروم یا اج ۱۴۰ یا بالاتر (یا یک مرورگر مبتنی بر کرومیوم دیگر با نسخه‌ای منطبق) استفاده کنید.
2. در یک برگه جدید به about:flags بروید.
3. عبارت «طرح‌بندی بنایی CSS» را جستجو کنید.
4. پرچم را فعال کنید.
5. مرورگر را مجدداً راه اندازی کنید.

با فعال بودن این ویژگی، می‌توانید با بررسی دموهای مایکروسافت اج (مشاهده کد منبع دموها ) آن را در عمل مشاهده کنید، یا برای کسب اطلاعات بیشتر در مورد این ویژگی و سینتکس موجود، به خواندن ادامه دهید.

سنگ تراشی چیست؟

چیدمان بنایی در CSS یک حالت چیدمان است که به شما امکان می‌دهد چیدمانی آجری از آیتم‌ها ایجاد کنید، به روشی که با CSS grid، flexbox یا چیدمان چند ستونی به راحتی قابل دستیابی نیست.

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

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

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

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

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

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

در اینجا چند نمونه دیگر از کاربردهای سنگ تراشی آورده شده است.

طرح‌بندی وبلاگ، که تصویر کوچک و توضیحات هر پست را نشان می‌دهد.

دموی وبلاگ را اینجا ببینید .

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

دموی سایت خبری را اینجا ببینید .

مجموعه‌ای از عکس‌ها، با اندازه ستون‌های مختلف، و عکس‌های خاص که چندین ستون را در بر می‌گیرند.

دموی طبیعت را اینجا ببینید .

راه حل ها و محدودیت های آنها

پیاده‌سازی این الگوی طراحی در وب امروزی نیازمند استفاده از کتابخانه‌های جاوا اسکریپت یا راه‌حل‌هایی است که از CSS grid، flexbox یا multi-column استفاده می‌کنند. با این حال، انجام این کار می‌تواند معایبی داشته باشد، از جمله:

• عملکرد ضعیف‌تر : تکیه بر کتابخانه‌های جاوا اسکریپت یا کد سفارشی برای تقلید از چیدمان CSS با کاهش عملکرد همراه است که می‌تواند منجر به تجربیات منفی کاربر شود.
• پیچیدگی کد بالاتر :
  • تضمین قرارگیری صحیح آیتم‌ها و توزیع فضا در CSS grid، flexbox یا multi-column به منظور تقلید از طرح‌بندی masonry در CSS، کاری دشوار است.
  • مدیریت ویژگی‌های خاص مانند مواردی که بیش از یک ستون یا ردیف را در بر می‌گیرند، مرتب‌سازی سفارشی موارد یا تنظیم با نمای دید نیز می‌تواند منجر به پیچیدگی و محدودیت شود.
• بار نگهداری بیشتر : نگهداری کدهای CSS یا جاوا اسکریپت سفارشی پیچیده دشوارتر است.

CSS grid یک حالت طرح‌بندی شگفت‌انگیز است که بسیار انعطاف‌پذیر است و به شما امکان می‌دهد سبک‌های مختلفی از طرح‌بندی‌ها را ایجاد کنید، چه برای کل صفحه وب، چه برای یک جزء، یا فقط برای ترازبندی موارد جداگانه. با این حال، ویژگی‌های مشابه masonry را ندارد.

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

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

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

نکته‌ای که باید در اینجا به خاطر داشته باشید این نیست که grid، flexbox یا multi-column طرح‌بندی‌های بدتری نسبت به masonry هستند. آن‌ها انواع بسیار خوبی از طرح‌بندی هستند که موارد استفاده زیادی دارند. نکته این است: اگر چیزی که می‌خواهید یک طرح‌بندی masonry است، پس css masonry چیزی است که آن را به شما می‌دهد.

وضعیت CSS masonry

گروه کاری CSS در حال تهیه پیش‌نویس masonry در مشخصات CSS Grid سطح ۳ است. این مشخصات هنوز در دست ساخت است و به طور موقت شامل دو سینتکس پیشنهادی مختلف است. اولین مورد از یک کلمه کلیدی جدید برای ویژگی display استفاده می‌کند، در حالی که در دومی masonry مستقیماً در طرح‌بندی شبکه CSS ادغام می‌شود.

استفاده display: masonry

این سینتکس، CSS masonry را به عنوان نوع display خود معرفی می‌کند. جزئیات بیشتر در مورد این رویکرد و انگیزه آن را می‌توانید در پست وبلاگ «بازخورد مورد نیاز: چگونه باید CSS masonry را تعریف کنیم؟» از تیم گوگل کروم و همچنین در بخش باقی‌مانده این پست بیابید. نمونه اولیه فعلی در کرومیوم بر اساس این پیشنهاد است.

display: grid; grid-template-*: masonry;

در این سینتکس، CSS masonry مستقیماً در CSS grid ادغام شده است. حالت masonry با اعمال کلمه کلیدی masonry به تعریف grid-template-columns در مورد طرح‌بندی masonry مبتنی بر سطر، یا به تعریف grid-template-rows در مورد طرح‌بندی masonry مبتنی بر ستون، فعال می‌شود.

جزئیات بیشتر در مورد این پیشنهاد و انگیزه آن را می‌توانید در پست WebKit با عنوان «به ما در انتخاب سینتکس نهایی برای Masonry در CSS کمک کنید» بیابید.

توجه داشته باشید که یک جایگزین برای این پیشنهاد، ویژگی item-pack و کلمه کلیدی collapse است که به جای استفاده از یکی از دو ویژگی قالب شبکه، باعث ایجاد ساختار CSS می‌شود.

از زمان انتشار پست‌های تیم‌های کروم و وب‌کیت، CSSWG به بحث در مورد سینتکس کلی برای پیشرفت ادامه داده است. بازخورد شما می‌تواند به توسعه بیشتر در این انجمن‌ها کمک کند.

برای جزئیات بیشتر در مورد وضعیت فعلی بحث‌ها، به شماره ۱۱۵۹۳ مراجعه کنید که مجموعه فعلی مباحث مربوط به نحو بنایی را تشریح می‌کند، و برای خلاصه‌ای از بحث نحو تاکنون به شماره ۱۱۲۴۳ مراجعه کنید .

طرح بندی بنایی CSS خود را ایجاد کنید

بیایید کمی خوش بگذرانیم و یک طرح‌بندی بنایی CSS ایجاد کنیم.

اگرچه هنوز در مورد نحو (syntax) مربوط به بنایی CSS بحث وجود دارد، پیاده‌سازی این ویژگی توسط ما می‌تواند امروز در Chromium با فعال کردن پرچم طرح‌بندی بنایی CSS، همانطور که در بخش «آزمایش بنایی CSS امروز» توضیح داده شده است، آزمایش شود. مثال‌های زیر نشان می‌دهند که چه چیزهایی در نسخه آزمایشی توسعه‌دهندگان در دسترس است.

یک ظرف بنایی ایجاد کنید

برای ایجاد اولین کانتینر بنایی مبتنی بر ستون، از display:masonry استفاده کنید و اندازه ستون‌های خود را با استفاده از grid-template-columns تعریف کنید. از آنجایی که masonry-direction به طور پیش‌فرض روی column تنظیم شده است، تنظیم این ویژگی اختیاری است.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

نسخه نمایشی ستون‌های هم اندازه را اینجا ببینید

برای یک کانتینر بنایی مبتنی بر ردیف، از display:masonry استفاده کنید، اندازه ردیف‌های خود را با استفاده از grid-template-rows تعریف کنید و سپس masonry-direction:row را تنظیم کنید.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

نسخه نمایشی ردیف‌های هم اندازه را اینجا ببینید

همانطور که ممکن است متوجه شده باشید، این سینتکس کمی با پیشنهاد اصلی گوگل متفاوت است. صرف نظر از تریگر مورد استفاده برای CSS Masonry، گروه کاری CSS تصمیم گرفت از ویژگی‌های اندازه و قرارگیری قالب شبکه در طرح CSS Masonry دوباره استفاده کند .

اگرچه این امکان استفاده مجدد از ویژگی‌ها را بین انواع طرح‌بندی فراهم می‌کند، اما ممکن است برای شما گیج‌کننده باشد و ما دوست داریم در این مورد از شما بشنویم. ما ممکن است ایجاد نام‌های مستعار عمومی‌تری برای ویژگی‌هایی مانند grid-template-columns و grid-template-rows ، مانند template-columns یا template-rows ، که می‌توانند هم برای grid و هم برای masonry استفاده شوند، را بررسی کنیم.

از اندازه آهنگ پیش‌فرض استفاده کنید

با یک نوع نمایش جدید، فرصتی برای تجدید نظر در مورد پیش‌فرض‌های ویژگی‌ها به وجود می‌آید.

در حالت شبکه‌ای، مقادیر پیش‌فرض grid-template-columns و grid-template-rows روی none است که طبق تعریف فعلی، معمولاً منجر به یک ستون یا ردیف می‌شود. برای چیدمان بنایی، این پیش‌فرض، اغلب منجر به یک طرح‌بندی نامطلوب می‌شود.

پیاده‌سازی در Chromium تعریف جدید پیشنهادی برای none را اضافه می‌کند که جایگزین اندازه پیش‌فرض مسیر در CSS masonry خواهد شد. این اندازه پیش‌فرض جدید مسیر، مقدار repeat(auto-fill, auto) است. این مقدار بدون نیاز به تعریف اندازه مسیر، یک طرح‌بندی زیبای masonry ایجاد می‌کند:

.masonry {
  display: masonry;
  gap: 10px;
}

نسخه آزمایشی اندازه آهنگ پیش‌فرض را اینجا ببینید

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

با استفاده از CSS grid، تمام آیتم‌ها قبل از اینکه اندازه مسیرها مشخص شود، قرار می‌گیرند، به این معنی که تعریف اندازه خودکار مسیر امکان‌پذیر نیست. با این حال، با CSS masonry، این محدودیت دیگر اعمال نمی‌شود، زیرا قرارگیری و اندازه‌گذاری در هم تنیده و ساده شده‌اند. با برداشته شدن این محدودیت، به ما امکان می‌دهد اندازه پیش‌فرض مسیر مفیدتری را برای طرح‌بندی‌های masonry ارائه دهیم.

ویژگی مختصر نویسی masonry را امتحان کنید

همانطور که قبلاً ذکر شد، پیاده‌سازی فعلی در Chromium برای تعریف مسیر masonry در طرح‌بندی شما به ویژگی‌های grid-template-* متکی است. با این حال، از آنجا که masonry فقط یک بُعد دارد، ما ویژگی مختصر masonry را نیز پیاده‌سازی کرده‌ایم که می‌توانید از آن برای تعریف جهت masonry و تعریف مسیر به صورت یکجا، بدون ویژگی گیج‌کننده‌ی grid- استفاده کنید.

برای مثال، دو قطعه کد زیر، کانتینرهای بنایی CSS معادلی ایجاد می‌کنند.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

نسخه آزمایشی خلاصه نویسی masonry را اینجا ببینید

خلاصه‌نویسی masonry هنوز توسط گروه کاری CSS در دست بررسی است . همین امروز آن را امتحان کنید و نظرتان را با ما در میان بگذارید.

با اندازه‌های آهنگ سفارشی پیش بروید

وقتی صحبت از تعریف اندازه مسیرها می‌شود، masonry به اندازه grid انعطاف‌پذیر است و به شما امکان می‌دهد تعداد و اندازه مسیرهای طرح‌بندی را به دقت تنظیم کنید. مسیرهای masonry هم لازم نیست همه اندازه یکسانی داشته باشند، برای مثال:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

نسخه آزمایشی اندازه‌های سفارشی مسیر را اینجا مشاهده کنید

در این مثال، ما دو مسیر اول ۳ رمی را تعریف می‌کنیم، و پس از آن تعداد متغیری مسیر ۵ رمی و در نهایت یک مسیر ۱۲ رمی قرار می‌دهیم.

چندین مسیر را پوشش دهید

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

برای مثال:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

دموی span multiple tracks را اینجا ببینید

همچنین می‌توانید از این قابلیت برای گسترش چندین مسیر استفاده کنید تا موارد خاصی در کل طول کانتینر قرار گیرند:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

این همان چیزی است که نسخه آزمایشی سایت خبری برای نمایش آگهی اشتراک در مقالات استفاده می‌کند.

تنظیم دقیق قرارگیری آیتم‌های بنایی

در CSS Masonry، آیتم‌ها در ستون یا ردیفی قرار می‌گیرند که کوتاه‌ترین موقعیت اجرا را دارد.

یک کانتینر بنایی دو ستونی را تصور کنید. اگر کانتینر یک آیتم با ارتفاع ۱۱۰ پیکسل در ستون اول و یک آیتم با ارتفاع ۱۰۰ پیکسل در ستون دوم داشته باشد، آنگاه آیتم سوم در ستون دوم قرار می‌گیرد، جایی که ۱۰ پیکسل به ابتدای جهت بنایی نزدیک‌تر خواهد بود.

اگر اختلاف ۱۰ پیکسلی در موقعیت اجرا را برای مورد خود به اندازه کافی کوچک می‌دانید و ترجیح می‌دهید آیتم سوم در ستون اول قرار گیرد، برای تطابق بهتر با ترتیب منبع، از ویژگی item-tolerance استفاده کنید.

ویژگی جدید item-tolerance حساسیت در قرارگیری آیتم را کنترل می‌کند.

در مثال قبلی، می‌توانید item-tolerance: 10px; را به container خود اعمال کنید تا تنوع در قرارگیری آیتم‌ها را سفارشی کنید:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

نسخه نمایشی تلرانس کالا را اینجا ببینید

توجه داشته باشید که پیش‌نویس مشخصات، این ویژگی را item-slack می‌نامد. گروه کاری CSS اخیراً تصمیم گرفته است که به جای آن item-tolerance به عنوان نام استفاده کند و مشخصات به زودی به‌روزرسانی خواهد شد.

سایر املاک موجود

شما می‌توانید از همان ویژگی‌های اندازه‌بندی و قرارگیری الگو برای اندازه‌بندی و قرار دادن موارد در محور شبکه یک ظرف بنایی مانند CSS Grid استفاده کنید، مانند grid-row ، grid-column ، grid-area ، grid-template-areas یا order . هنگام ایجاد طرح بنایی خود، قدرت کامل CSS grid را تجربه کنید.

برای بازخورد تماس بگیرید

بی‌صبرانه منتظریم تا شما با CSS masonry آشنا شوید، خلاقیت به خرج دهید و قابلیت‌های جدیدی را که می‌تواند به شما در باز کردن قفل آن‌ها کمک کند، کشف کنید. یک راه عالی برای شروع، بررسی نسخه‌های نمایشی ما و کد منبع آن‌ها و شروع به ساخت مثال‌های خودتان در Chromium است (به یاد داشته باشید که ابتدا پرچم را فعال کنید ).

بازخورد شما در کمک به ما برای شکل‌دهی به API و بررسی اینکه آیا برای رفع نیازهای شما در وب طراحی شده است یا خیر، مهم است. قالب‌بندی را امتحان کنید و نظرات خود را با ما در میان بگذارید!

اگر در مورد شکل API نظر یا بازخوردی دارید، با نظر دادن در شماره ۱۱۲۴۳ به ما اطلاع دهید یا اگر ترجیح می‌دهید در وبلاگ خود یا در رسانه‌های اجتماعی پستی بنویسید، حتماً در X یا لینکدین به ما اطلاع دهید.

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

اگر هنگام آزمایش این ویژگی با اشکالی مواجه شدید، با باز کردن یک بخش جدید باگ کرومیوم ، بازخورد خود را به اشتراک بگذارید.