تاریخ انتشار: ۲۳ ژوئیه ۲۰۲۵، آخرین به‌روزرسانی: ۱۳ فوریه ۲۰۲۶
تیم‌های Microsoft Edge و Google Chrome با خوشحالی اعلام می‌کنند که CSS masonry برای آزمایش اولیه توسعه‌دهندگان از Chrome و Edge 140 آماده است.
باوجود مسائل حل‌نشده پیرامون مشخصات و نحو CSS masonry، بازخورد شما برای کمک به ما در تثبیت شکل نهایی API بسیار مهم است. این ویژگی را امتحان کنید و نظرتان را به ما بگویید.
امروز CSS Masonry را در Chromium آزمایش کنید
برای آزمایش CSS Masonry امروز:
- از Chrome یا Edge نسخه ۱۴۰ یا جدیدتر (یا مرورگر مبتنی بر Chromium دیگری با نسخه مشابه) استفاده کنید.
- در برگه جدیدی به
about:flagsبروید. - «CSS Masonry Layout» را جستجو کنید.
- پرچم را فعال کنید.
- مرورگر را بازراه‌اندازی کنید.
وقتی این ویژگی فعال باشد، می‌توانید با بررسی نسخه‌های نمایشی Microsoft Edge (مشاهده کد منبع نسخه‌های نمایشی) آن را در عمل ببینید، یا برای کسب اطلاعات بیشتر درباره این ویژگی و نحو موجود، به خواندن ادامه دهید.
بنایی چیست؟
CSS masonry یک حالت چیدمان است که به شما امکان می‌دهد چیدمانی شبیه به آجر از موارد ایجاد کنید، به گونه‌ای که با CSS grid، flexbox، یا چیدمان چندستونی به‌راحتی قابل دستیابی نیست.
از CSS masonry می‌توان برای چیدن موارد در قالب ستون یا ردیف استفاده کرد، به‌طوری‌که موارد در آن ستون‌ها یا ردیف‌ها به‌صورت جمع‌شده قرار می‌گیرند.
Masonry را مثل بزرگراهی درنظر بگیرید که تنها محدودیت آن تعداد و اندازه لاین‌های رانندگی مختلف است. در این ردیف‌ها، خودروها می‌توانند هر طولی که می‌خواهند داشته باشند و همیشه سعی می‌کنند تا حد امکان به مقصدشان نزدیک باشند، که همان شروع چیدمان آجری است.
Your layout items are only constrained in one direction and can freely breathe along the other, irrespective of other items that are close-by. masonry is different from grid in that its tracks are only defined in a single direction.
در چیدمان آجری، ترتیب دیداری موارد اهمیت کمتری نسبت‌به طراحی نهایی دارد. «آجرچینی» به شما امکان می‌دهد از فضای دردسترس بیشترین استفاده را ببرید، هر موردی که داشته باشید. این امر آن را به انتخابی عالی برای صفحاتی تبدیل می‌کند که ازنظر بصری فشرده هستند و ترتیب بصری محتوا به اندازه نتیجه نهایی اهمیت ندارد.
One interesting aspect of masonry is that it also allows items to span multiple tracks, just like with grid. وقتی این اتفاق می‌افتد، موارد همچنان به‌گونه‌ای قرار می‌گیرند که تا حد امکان فضای دردسترس را پر کنند.
این رفتار جای‌گذاری خودکار می‌تواند به نتایج بسیار جالبی منجر شود که وب طراحان مدت‌هاست تلاش می‌کنند به آن دست یابند. برای مثال، نمونه گالری عکس نیویورک را ببینید که نشان می‌دهد چگونه عکس‌ها می‌توانند به‌صورت فشرده در چند ستون نمایش داده شوند، درحالی‌که به برخی موارد (عنوان در این مثال) اجازه می‌دهد در چند ستون گسترش یابند:
در اینجا چند نمونه دیگر از کاربردهای چیدمان آورده شده است.
چیدمان وبلاگ، که ریزعکس و شرح هر پست را نشان می‌دهد.
یک سایت خبری که مقاله‌ها در ستون‌هایی ظاهر می‌شوند و برخی مقاله‌ها پهن‌تر از بقیه هستند و نگاره‌های اصلی کل پهنای صفحه را می‌پوشانند.
مجموعه‌ای از عکس‌ها با اندازه‌های ستون متفاوت و عکس‌های خاصی که در چند ستون گسترده شده‌اند.
راه‌حل‌های موقت و محدودیت‌های آن‌ها
برای پیاده‌سازی این الگوی طراحی در وب امروزی، باید از کتابخانه‌های جاوا اسکریپت یا راه‌حل‌های جایگزین استفاده کنید که از CSS grid، flexbox، یا چندستونی استفاده می‌کنند. بااین‌حال، انجام این کار می‌تواند معایبی داشته باشد، ازجمله:
- عملکرد ضعیف‌تر: تکیه بر کتابخانه‌های JavaScript یا کد سفارشی برای تقلید از CSS masonry با معاوضه‌های عملکردی همراه است که می‌تواند منجر به تجربه‌های منفی کاربر شود.
- پیچیدگی بیشتر کد:
- تضمین قرارگیری صحیح موارد و توزیع فضا در CSS grid، flexbox، یا multi-column برای تقلید از چیدمان CSS masonry دشوار است.
- مدیریت ویژگی‌های خاص مانند مواردی که بیش از یک ستون یا ردیف را دربرمی‌گیرند، سفارشی‌سازی ترتیب موارد، یا تنظیم با نمای دید نیز می‌تواند به پیچیدگی و محدودیت منجر شود.
- بار نگهداری بیشتر: کد جاوا اسکریپت یا CSS سفارشی پیچیده برای نگهداری دشوارتر است.
شبکه CSS یک حالت چیدمان شگفت‌انگیز است که بسیار انعطاف‌پذیر است و به شما امکان می‌دهد سبک‌های مختلفی از چیدمان را ایجاد کنید، چه برای کل صفحه وب، چه برای یک جزء، یا فقط برای تراز کردن موارد فردی. بااین‌حال، ویژگی‌های آن با آجرکاری یکسان نیست.
در شبکه CSS، ردیف‌ها و ستون‌ها به‌طور دقیق تعریف شده‌اند و موارد فقط می‌توانند در سلول‌های شبکه وجود داشته باشند. اگر می‌خواهید موارد را در امتداد یکی از محورها بسته‌بندی کنید، اما اندازه موارد برای قرار گرفتن در سلول‌های مربوطه مناسب نیست، باید بین باقی گذاشتن فاصله بین موارد یا کشیدن آن‌ها برای پر کردن فضای خالی یکی را انتخاب کنید.
درست مانند بنایی، flexbox فقط به یک جهت اهمیت می‌دهد و به موارد اجازه می‌دهد فضایی را که می‌خواهند در جهت دیگر اشغال کنند، تصمیم بگیرند. این یعنی می‌توانید بااستفاده از flexbox، چیدمانی شبیه به چیدمان بنایی داشته باشید، به‌شرطی که راضی باشید موارد در جهت بلوک، هر بار یک ستون، چیده شوند. The flex container will also need a defined block-size or height, to cause the items to wrap onto a new flex line, thus creating a new column.
چیدمان چندستونی همچنین می‌تواند چیدمانی شبیه به آجرچینی ایجاد کند که در آن نیز موارد در ستون‌ها مرتب می‌شوند. به‌علاوه، چندستونی به شما اجازه نمی‌دهد اندازه هرکدام از ستون‌ها را متفاوت تنظیم کنید. همه آن‌ها اندازه یکسانی دارند، درحالی‌که چیدمان آجری انعطاف‌پذیری زیادی در تعریف ردیف‌هایی که موارد در آن‌ها بسته‌بندی می‌شوند ارائه می‌دهد.
نکته‌ای که باید در اینجا به‌خاطر بسپارید این نیست که شبکه‌بندی، flexbox، یا چندستونی چیدمان‌های بدتری نسبت‌به masonry هستند. این‌ها انواع عالی چیدمان هستند که موارد استفاده زیادی دارند. نکته این است: اگر آنچه می‌خواهید یک چیدمان بنایی است، پس CSS masonry است چیزی که آن را به شما می‌دهد.
وضعیت CSS masonry
«گروه کاری CSS» درحال پیش‌نویس کردن چیدمان آجری در مشخصات CSS Grid Level
3 است. این مشخصات هنوز درحال ساخت است و به‌طور موقت شامل دو نحو پیشنهادی متفاوت است. اولی از کلیدواژه جدیدی برای ویژگی display استفاده می‌کند،
درحالی‌که در دومی، masonry مستقیماً در طرح‌بندی CSS grid ادغام شده است.
استفاده از display: masonry
این نحو CSS masonry را به‌عنوان نوع display خودش معرفی می‌کند. جزئیات بیشتر درباره این رویکرد و انگیزه آن را می‌توانید در پست وبلاگ بازخورد لازم است: چگونه باید CSS masonry را تعریف کنیم؟ از تیم Google Chrome و همچنین در بخش باقی‌مانده این پست پیدا کنید. نمونه اولیه فعلی در Chromium براساس این پیشنهاد است.
display: grid; grid-template-*: masonry;
در این نحو، CSS masonry مستقیماً در CSS grid ادغام شده است. حالت آجرچینی با اعمال کلیدواژه masonry به تعریف grid-template-columns در چیدمان آجرچینی ردیفی، یا به تعریف grid-template-rows در چیدمان آجرچینی ستونی فعال می‌شود.
جزئیات بیشتر درباره این پیشنهاد و انگیزه آن را می‌توانید در پست WebKit به ما کمک کنید تا نحو نهایی Masonry را در CSS انتخاب کنیم پیدا کنید.
توجه داشته باشید که جایگزین این پیشنهاد، ویژگی item-pack و کلیدواژه collapse است که به‌جای استفاده از یکی از دو ویژگی الگوی شبکه‌ای، CSS masonry را راه‌اندازی می‌کند.
از زمان انتشار پست‌ها توسط تیم‌های Chrome و WebKit، CSSWG به بحث‌های خود درباره نحو کلی برای پیشبرد ادامه داده است. بازخورد شما می‌تواند به توسعه بیشتر در این تالارهای گفتمان کمک کند.
برای جزئیات بیشتر درباره وضعیت فعلی بحث‌ها، به مسئله 11593 مراجعه کنید که مجموعه فعلی موضوعات بحث درباره نحو بنایی را شرح می‌دهد، و برای خلاصه‌ای از بحث‌های مربوط به نحو تا کنون، به مسئله 11243 مراجعه کنید.
چیدمان CSS masonry خودتان را بسازید
بیایید کمی تفریح کنیم و یک چیدمان CSS masonry ایجاد کنیم.
اگرچه نحو CSS masonry هنوز درحال بحث است، اما پیاده‌سازی ما از این ویژگی را می‌توان امروز در Chromium با فعال کردن پرچم CSS Masonry Layout همان‌طور که در آزمایش CSS Masonry امروز توضیح داده شده است، آزمایش کرد. مثال‌های زیر نشان می‌دهد چه چیزهایی در نسخه آزمایشی توسعه‌دهنده دردسترس است.
ایجاد محفظه بنایی
برای ایجاد اولین محفظه آجرچینی ستون‌محور، از 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;
}
همان‌طور که ممکن است متوجه شده باشید، این نحو کمی با پیشنهاد اولیه Google متفاوت است. صرف‌نظر از راه‌انداز استفاده‌شده برای CSS Masonry، گروه کاری CSS تصمیم گرفت از ویژگی‌های اندازه‌گذاری و جای‌گذاری الگوی شبکه در چیدمان CSS Masonry مجدداً استفاده کند.
اگرچه این کار امکان استفاده مجدد از ویژگی‌های بیشتری را بین انواع چیدمان فراهم می‌کند، ممکن است
برای شما گیج‌کننده باشد و ما دوست داریم نظرتان را دراین‌باره بشنویم. ممکن است ایجاد نام‌های مستعار عمومی‌تر برای ویژگی‌هایی مانند grid-template-columns و grid-template-rows، مانند template-columns یا template-rows را بررسی کنیم که می‌توانند برای هر دو طرح شبکه‌ای و آجری استفاده شوند.
استفاده از اندازه قطعه پیش‌فرض
با نوع نمایش جدید، فرصتی برای بازنگری در پیش‌فرض‌های دارایی فراهم می‌شود.
در شبکه، grid-template-columns و grid-template-rows به‌طور پیش‌فرض روی none تنظیم شده‌اند
که، طبق تعریف فعلی، معمولاً به یک ستون یا ردیف منجر می‌شود. برای
چیدمان آجری، این پیش‌فرض در بیشتر مواقع منجر به چیدمان نامطلوب
می‌شود.
پیاده‌سازی در Chromium تعریف جدید
پیشنهادی را برای
none اضافه می‌کند که جایگزین اندازه پیش‌فرض قطعه در CSS masonry خواهد شد. این اندازه قطعه پیش‌فرض جدید مقدار repeat(auto-fill, auto) است. این مقدار یک
چیدمان آجری زیبا ایجاد می‌کند بدون اینکه اصلاً نیازی به تعریف اندازه‌های قطعه باشد:
.masonry {
display: masonry;
gap: 10px;
}
همان‌طور که در تصویر نشان داده شده است، محفظه آجرچینی به تعداد لازم ستون با اندازه خودکار ایجاد می‌کند تا در فضای دردسترس جا شود.
With CSS grid, all items are placed before the tracks are sized, which means that this track auto sizing definition is not possible. اما با CSS masonry، این محدودیت دیگر اعمال نمی‌شود، زیرا جای‌گذاری و اندازه‌بندی درهم‌تنیده و ساده شده‌اند. با برداشته شدن این محدودیت، می‌توانیم اندازه پیش‌فرض مفیدتری برای چیدمان‌های آجری ارائه دهیم.
خصوصیت خلاصه masonry را امتحان کنید
همان‌طور که قبلاً ذکر شد، پیاده‌سازی فعلی در Chromium به ویژگی‌های grid-template-* برای تعریف ردیف آجرچینی در چیدمان شما متکی است.
بااین‌حال، چون چیدمان آجری فقط یک بعد دارد، ویژگی خلاصه masonry را نیز پیاده‌سازی کرده‌ایم که می‌توانید از آن برای تعریف جهت چیدمان آجری و تعریف قطعه به‌طور هم‌زمان استفاده کنید، بدون اینکه نیاز به ویژگی پیشوندی گیج‌کننده grid- باشد.
برای مثال، دو تکه‌کد زیر محفظه‌های CSS masonry معادل ایجاد می‌کنند.
.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 هنوز توسط CSS Working Group درحال بحث است. امروز آن را امتحان کنید و نظرتان را به ما بگویید.
استفاده از اندازه‌های سفارشی مسیر
When it comes to defining track sizes, masonry is as flexible as grid in letting you fine tune the number and sizes of the layout tracks. همچنین لازم نیست همه قطعه‌های Masonry هم‌اندازه باشند، برای مثال:
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
در این مثال، دو قطعه اول 3rem را تعریف می‌کنیم، سپس تعداد متغیری قطعه 5rem، و سپس یک قطعه 12rem.
چندین قطعه را دربرمی‌گیرد
در چیدمان آجری، موارد لازم نیست به دسته‌های هدفی که در آن‌ها قرار گرفته‌اند محدود شوند زیرا درصورت نیاز می‌توانند چندین دسته هدف را دربرگیرند. این ویژگی زمانی بسیار مفید است که برخی‌از موارد مهم‌تر از بقیه باشند و به فضای بیشتری نیاز داشته باشند.
برای مثال:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
همچنین می‌توانید از این قابلیت برای پوشش دادن چندین قطعه استفاده کنید تا موارد خاصی را به طول کامل محفظه تبدیل کنید:
.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; را در محفظه‌تان اعمال کنید تا تنوع در جای‌گذاری مورد را سفارشی‌سازی کنید:
.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 دارید، با نظر دادن درباره مشکل 11243 به ما اطلاع دهید یا اگر ترجیح می‌دهید پستی در وبلاگ خود یا در رسانه‌های اجتماعی بنویسید، حتماً در X یا LinkedIn به ما اطلاع دهید.
CSS masonry هنوز در Chromium درحال پیاده‌سازی است. اگر آن را آزمایش کردید، توجه داشته باشید که ما همچنان به‌طور فعال روی آن کار می‌کنیم و ممکن است با مواردی مواجه شوید که طبق انتظار عمل نکند. برخی‌از محدودیت‌های فعلی عبارت‌اند از بسته‌بندی متراکم، جای‌گذاری معکوس، پشتیبانی از زیرشبکه، پشتیبانی از خارج از جریان، پشتیبانی از خط مبنا، پشتیبانی از DevTools، پشتیبانی از تکه‌تکه‌سازی، پشتیبانی از تزئین فاصله، و غیره.
اگر هنگام آزمایش کردن این ویژگی با اشکالی مواجه شدید، با باز کردن اشکال جدید Chromium، بازخوردتان را هم‌رسانی کنید.