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

Patrick Brosset

Alison Maher

تاریخ انتشار: ۲۳ جولای ۲۰۲۵

تیم‌های Microsoft Edge و Google Chrome با هیجان اعلام می‌کنند که سنگ تراشی CSS برای آزمایش اولیه توسعه‌دهندگان از کروم و Edge 140 آماده است.

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

امروز CSS Masonry را در Chromium تست کنید

برای تست CSS Masonry امروز:

1. از Chrome یا Edge 140 یا جدیدتر (یا مرورگر دیگری مبتنی بر Chromium با نسخه مشابه) استفاده کنید.
2. در یک برگه جدید به about:flags بروید.
3. "CSS Masonry Layout" را جستجو کنید.
4. پرچم را فعال کنید
5. مرورگر را مجددا راه اندازی کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نکته ای که در اینجا باید به خاطر داشت این نیست که شبکه، فلکس باکس یا چند ستون چیدمان بدتری نسبت به سنگ تراشی هستند. آنها انواع بسیار خوبی از طرح بندی هستند که موارد استفاده زیادی دارند. نکته این است: اگر چیزی که می خواهید یک طرح بنایی است، پس سنگ تراشی CSS چیزی است که آن را به شما می دهد.

وضعیت سنگ تراشی CSS

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

استفاده از display: masonry

این نحو، سنگ تراشی CSS را به عنوان نوع display خود معرفی می کند. جزئیات بیشتر در مورد رویکرد و انگیزه آن را می توان در پست وبلاگ یافت بازخورد مورد نیاز: چگونه باید سنگ تراشی CSS را تعریف کنیم؟ از تیم Google Chrome و همچنین در بخش باقی مانده از این پست. نمونه اولیه فعلی در Chromium بر اساس این پیشنهاد است.

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

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

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

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

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

برای جزئیات بیشتر در مورد وضعیت کنونی بحث ها، به شماره 11593 ، که مجموعه فعلی مباحث بحث نحو بنایی را مشخص می کند، و شماره 11243 را برای خلاصه ای از بحث نحوی تا کنون ببینید.

طرح بندی سنگ تراشی CSS خود را ایجاد کنید

بیایید کمی سرگرم شویم و یک طرح بندی سنگ تراشی CSS ایجاد کنیم.

اگرچه نحو برای سنگ تراشی CSS هنوز مورد بحث است، پیاده سازی این ویژگی را می توان امروز در Chromium با فعال کردن پرچم CSS Masonry Layout همانطور که در Test 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 می‌شود. این اندازه آهنگ پیش‌فرض جدید، مقدار repeat(auto-fill, auto) است. این مقدار بدون نیاز به تعیین اندازه آهنگ، یک طرح بنایی زیبا ایجاد می کند:

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

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

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

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

همانطور که قبلاً ذکر شد، پیاده‌سازی فعلی در Chromium به ویژگی‌های grid-template-* برای تعریف مسیر سنگ‌تراشی در طرح‌بندی شما متکی است. با این حال، از آنجایی که سنگ تراشی فقط یک بعد دارد، ما ویژگی مختصر 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 هنوز توسط کارگروه CSS در دست بحث است . امروز آن را امتحان کنید و نظر خود را با ما در میان بگذارید.

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

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

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

در این مثال، ما دو تراک 3 ریمتری اول را تعریف می کنیم، به دنبال آن تعداد متفاوتی از تراک های 5 ریمتری و به دنبال آن یک تراک 12 ریمتری منفرد را تعریف می کنیم.

چند آهنگ را بپوشانید

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

به عنوان مثال:

.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، آیتم‌ها در ستون یا ردیفی قرار می‌گیرند که کوتاه‌ترین موقعیت اجرا را دارد.

یک ظرف بنایی دو ستونی را تصور کنید. اگر کانتینر یک آیتم با ارتفاع 110 پیکسل در ستون اول و یک آیتم با ارتفاع 100 پیکسل در ستون دوم داشته باشد، آیتم سوم در ستون دوم قرار می گیرد، جایی که 10 پیکسل به شروع جهت سنگ تراشی نزدیک تر است.

اگر تفاوت 10 پیکسلی در موقعیت اجرا را برای کیس خود به اندازه کافی کوچک در نظر می گیرید و ترجیح می دهید مورد سوم به جای آن در ستون اول قرار گیرد، برای مطابقت بهتر با ترتیب منبع، از ویژگی 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 را هنگام ایجاد چیدمان سنگ تراشی خود تجربه کنید.

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

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

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

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

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

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