منتشر شده: ۱۹ سپتامبر ۲۰۲۴، آخرین بهروزرسانی: ۱۳ فوریه ۲۰۲۶
گروه کاری CSS دو پیشنهاد مربوط به masonry در CSS را در قالب یک پیشنویس مشخصات ترکیب کرده است. این گروه امیدوار است که این امر مقایسه این دو و تصمیمگیری نهایی را آسانتر کند. تیم کروم هنوز معتقد است که یک سینتکس masonry جداگانه بهترین راه برای ادامه کار خواهد بود. در حالی که بزرگترین مشکل عملکردی که در پست قبلی ما ذکر شد حل شده است، هنوز نگرانیهایی در مورد سینتکس، مقادیر اولیه و میزان سهولت یادگیری نسخهای که با grid ترکیب شده است، وجود دارد.
با این حال، برای آزمایش فرضیات خود، چند مثال را بررسی کردهایم تا نشان دهیم که چگونه masonry با هر نسخه کار میکند. به مثالهای این پست نگاهی بیندازید و نظرات خود را با ما در میان بگذارید تا بتوانیم تصمیمی بگیریم و این ویژگی را ادامه دهیم.
این پست تمام موارد استفاده ممکن را پوشش نمیدهد، با این حال واضح است که جداسازی چیدمان masonry از grid منجر به عدم کارایی این ویژگی نمیشود. در واقع، عکس این قضیه ممکن است صادق باشد. همانطور که در این پست خواهید دید، نسخه display: masonry فرصتهای جدید و سینتکس سادهتری ایجاد میکند. علاوه بر این، بسیاری از توسعهدهندگان نگرانیهایی را در مورد احتمال مرتبسازی مجدد آیتمها با چیدمان masonry که باعث ایجاد مشکلات دسترسی میشود، مطرح کردهاند. این موضوع نیز برای هر دو نسخه از سینتکس، از طریق ویژگی پیشنهادی reading-flow ، در حال بررسی است.
یک طرح اولیه بنایی
این طرحبندیای است که اکثر مردم هنگام فکر کردن به چیدمان بنایی تصور میکنند. آیتمها در ردیفها نمایش داده میشوند و پس از قرار گرفتن ردیف اول، آیتمهای بعدی به فضای باقیمانده از آیتمهای کوتاهتر منتقل میشوند.
با display: masonry
برای ایجاد یک طرحبندی بنایی، از مقدار masonry برای ویژگی display استفاده کنید. این یک طرحبندی بنایی با مسیرهای ستونی که شما تعریف میکنید (یا توسط محتوا تعریف میشوند) و masonry در محور دیگر ایجاد میکند. اولین مورد در ابتدای بلوک و درونخطی نمایش داده میشود (بنابراین در انگلیسی بالا سمت چپ است) و موارد در جهت درونخطی نمایش داده میشوند.
برای تعریف مسیرها از masonry-template-tracks با مقادیر فهرست مسیر مطابق با طرحبندی شبکهای CSS استفاده کنید.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
با display: grid
برای ایجاد یک طرحبندی بنایی (masonry)، ابتدا با استفاده از مقدار grid برای ویژگی display ، یک طرحبندی شبکهای ایجاد کنید. ستونها را با ویژگی grid-template-columns تعریف کنید، سپس به grid-template-rows مقدار masonry بدهید.
این کار، طرحی مانند طرحبندی مورد انتظار از آیتمهای شبکهای خودکار ایجاد میکند، با این حال آیتمهای هر ردیف از طرحبندی بنایی استفاده میکنند و طوری مرتب میشوند که فضای خالی مانده از آیتمهای کوچکتر در ردیف قبلی را اشغال کنند.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
نکاتی که باید بین دو گزینه در نظر گرفته شوند
یک تفاوت قابل توجه بین این روشها این است که با نسخه display: masonry ، حتی اگر هیچ مسیری را با masonry-template-tracks مشخص نکنید، یک طرحبندی masonry دریافت میکنید. بنابراین display: masonry ممکن است تمام چیزی باشد که نیاز دارید. دلیل این امر این است که مقدار اولیه masonry-template-tracks repeat(auto-areas, auto) است. این طرحبندی به تعداد دلخواه مسیر با اندازه خودکار ایجاد میکند که در کانتینر جا شود.
جریان معکوس با مصالح بنایی
این مشخصات شامل روشهایی برای تغییر جهت جریان بنایی است. برای مثال، میتوانید جریان نمایش را از انتهای بلوک به بالا تغییر دهید.
با display: masonry
یک طرحبندی بنایی با display: masonry ایجاد کنید، سپس masonry-direction با مقدار column-reverse استفاده کنید.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
با display: grid
با استفاده از display: grid و grid-template-rows: masonry یک طرحبندی بنایی ایجاد کنید. سپس از ویژگی grid-auto-flow با مقدار جدید row-reverse استفاده کنید تا آیتمها از انتهای بلوک کانتینر شبکه، طرحبندی شوند.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
نکاتی که باید بین دو گزینه در نظر گرفته شوند
نسخه display: masonry بسیار شبیه به نحوه کار flexbox است. جهت ستونها را با استفاده از ویژگی masonry-direction با مقدار column-reverse تغییر دهید.
نسخه CSS grid grid-auto-flow استفاده میکند. همانطور که در حال حاضر تعریف شده است grid-auto-flow: row-reverse و grid-auto-flow: column-reverse اثر یکسانی دارند. این میتواند گیجکننده باشد، زیرا ممکن است انتظار داشته باشید که آنها کار متفاوتی انجام دهند.
سنگ تراشی برای ردیف ها
همچنین میتوانید جهت را برای تعریف ردیفها تغییر دهید.
با display: masonry
یک طرحبندی بنایی با display: masonry ایجاد کنید، سپس مقدار masonry-direction را روی row تنظیم کنید. مگر اینکه بخواهید ردیفهای شما اندازه بلوک خاصی داشته باشند، نیازی به تعیین اندازه مسیر ندارید زیرا پیشفرض auto است، بنابراین مسیرها متناسب با محتوایی که دارند، اندازه خواهند گرفت.
.masonry {
display: masonry;
masonry-direction: row;
}
با display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
نکاتی که باید بین دو گزینه در نظر گرفته شوند
همانند جریان معکوس، تغییر نسخه display: masonry از columns به rows، به معنای تغییر مقدار masonry-direction است. در نسخه grid، باید مقادیر ویژگیهای grid-template-columns و grid-template-rows را تغییر دهید. یا اگر از خلاصهنویسی استفاده میکنید، ترتیب سینتکس را تغییر دهید.
با هر دو مثال از تغییر جریان، نسخه display: masonry حس شهودیتری دارد. یک ویژگی واحد به masonry-direction وجود دارد که جریان را کنترل میکند و یکی از مقادیر زیر را میگیرد:
-
row -
column -
row-reverse -
column-reverse
سپس هرگونه اطلاعات اندازه مورد نیاز را به masonry-template-tracks اضافه میکنید، با فرض اینکه مقدار پیشفرض auto چیزی نیست که نیاز دارید.
با استفاده از grid، برای انجام جهت معکوس، باید از ویژگی grid-auto-flow استفاده کنید و برای تغییر row masonry، مقدار ویژگیهای grid-template-* را تغییر دهید. همچنین در سینتکس فعلی grid نمیتوان مقدار محور grid را تعریف نشده گذاشت. شما همیشه باید ویژگیهای grid-template-* را روی محوری که مقدار masonry ندارد، مشخص کنید.
موقعیت آیتمها
در هر دو نسخه میتوانید آیتمها را با استفاده از روش قرارگیری مبتنی بر خط که در طرحبندی شبکهای با آن آشنا خواهید شد، به طور صریح موقعیتیابی کنید. در هر دو نسخه، فقط میتوانید آیتمها را در محور شبکهای ، محوری با مسیرهای از پیش تعریف شده، موقعیتیابی کنید. نمیتوانید آیتمها را روی محوری که طرحبندی بنایی را انجام میدهد، قرار دهید.
با display: masonry
CSS زیر یک طرحبندی masonry با چهار ستون تعریف میکند. بنابراین محور شبکه، columns است. آیتم با کلاس a از خط ستون اول تا خط ستون سوم قرار میگیرد و دو مسیر را با ویژگیهای جدید masonry-track-* پوشش میدهد. این همچنین میتواند به عنوان خلاصهای از masonry-track: 1 / 3; تعریف شود.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
با display: grid
CSS زیر یک طرحبندی بنایی با چهار ستون تعریف میکند. بنابراین محور شبکه، ستونها است. آیتم با کلاس a از خط ستون اول تا خط ستون سوم قرار میگیرد و دو مسیر را با ویژگیهای grid-column-* پوشش میدهد. این همچنین میتواند به عنوان خلاصهای از grid-column: 1 / 3; تعریف شود.
اگر محور شبکه ستونها باشد، ویژگیهای grid-row-* نادیده گرفته میشوند و اگر محور شبکه ردیفها باشد، ویژگیهای grid-columns-* نادیده گرفته میشوند.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
شما میتوانید از خطوط نامگذاری شده با هر دو سینتکس استفاده کنید. مثالهای زیر یک جدول با دو خط ستونی به نامهای a را نشان میدهند.
با display: masonry
خطوط نامگذاری شده در مقدار فهرست مسیر masonry-template-tracks تعریف شدهاند. این آیتم را میتوان بعد از هر خطی با نام a قرار داد.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
با display: grid
خطوط نامگذاری شده در مقدار فهرست مسیر grid-template-columns تعریف شدهاند. آیتم بعد از اولین خط با نام a قرار میگیرد. اگر ویژگی grid-row تعریف شده باشد، نادیده گرفته خواهد شد.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
همچنین میتوانید از نواحی نامگذاری شده در هر دو سینتکس استفاده کنید. مثالهای زیر یک شبکه با سه مسیر با نامهای "a"، "b" و "c" را نشان میدهند.
با display: masonry
این مسیرها با مقدار masonry-template-areas نامگذاری شدهاند. از آنجا که هیچ اندازه مسیری تعریف نشده است، هر سه به طور پیشفرض روی اندازه auto تنظیم شدهاند. آیتم در مسیر "a" قرار میگیرد.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
این روش چه در حال تعریف ردیفها و چه در حال تعریف ستونها باشد، یکسان عمل میکند؛ تنها تفاوت، ویژگی masonry-direction خواهد بود.
با display: grid
برای columns ، سینتکس اساساً یکسان است. به طور مشابه، از آنجایی که هیچ اندازه مسیری تعریف نشده است، هر سه به طور پیشفرض روی اندازه auto قرار دارند، اما شما هنوز هم باید صریحاً بگویید که محور دیگر masonry است:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
با این حال، برای rows ، مقدار باید به طور متفاوتی نوشته شود، زیرا grid-template-areas در واقع یک ناحیه دو بعدی را تعریف میکند و هر ردیف به صورت یک رشته جداگانه نوشته میشود:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
نکاتی که باید بین دو گزینه در نظر گرفته شوند
با هر موقعیتیابی، سینتکس display: masonry در مورد تغییر جهت بهتر عمل میکند. از آنجایی که ویژگی masonry-track-* در هر جهتی که محور شبکه باشد کار میکند، تنها کاری که برای تغییر جهت باید انجام دهید تغییر مقدار masonry-direction است. با نسخه شبکه، حداقل به ویژگیهای اضافی برای فعال کردن تغییر جهت نیاز خواهید داشت. با این حال، برای روشهای دیگری که تغییر جهت با نسخه شبکه پیچیدهتر است، به مثالهای قبلی مراجعه کنید.
خلاصه نویسی
در این پست از longhands برای روشنتر شدن اینکه کدام ویژگیها مورد استفاده قرار میگیرند استفاده شده است، با این حال هر دو نسخه display: masonry و display: grid را میتوان با استفاده از shorthands تعریف کرد.
با display: masonry
خلاصهسازی display: masonry از کلمه کلیدی masonry استفاده میکند. برای ایجاد طرحبندی اولیه masonry از CSS زیر استفاده کنید:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
برای ایجاد یک طرح بندی ساده مبتنی بر ردیف در ماسونری:
.masonry {
display: masonry;
masonry: row;
}
برای تعریف آهنگها و یک طرحبندی مبتنی بر ردیف با استفاده از روش مختصرنویسی:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
با display: grid
برای ایجاد طرح اولیهی بنایی با استفاده از خلاصهنویسی grid .
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
برای ایجاد یک طرح بندی ساده مبتنی بر ردیف در ماسونری:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
در مثالهای پیچیدهتر، از آنجا که سینتکس کلی display:masonry سادهتر است، میتوان ویژگیهای بیشتری را بدون اینکه بیش از حد پیچیده شود، در قالب مختصرنویسی جای داد.
برای مثال، تصور کنید که سه ستون با نامهای "a"، "b" و "c" ایجاد کردهاید که از پایین به بالا پر شدهاند.
با display:masonry
در display: masonry ، هر سه مورد را میتوان در قالب خلاصهنویسی با هم تنظیم کرد:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
از آنجا که اندازه آنها به صورت خودکار تنظیم میشود، نیازی به مشخص کردن اندازهها ندارید، اما اگر به جای آن اندازه خاصی میخواستید، میتوانید آن را اضافه کنید. برای مثال: masonry: column-reverse 50px 100px 200px "ab c"; .
همچنین، هر کامپوننت را میتوان آزادانه مرتب کرد؛ هیچ ترتیب خاصی وجود ندارد که لازم باشد به خاطر بسپارید. و اگر میخواهید به جای آن از row استفاده کنید، تنها کاری که باید انجام دهید این است که column-reverse با row یا row-reverse عوض کنید؛ بقیهی ساختار به همان شکل باقی میماند.
با display: grid
در display: grid ، این سه جنبه باید جداگانه تنظیم شوند:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
مانند مثال masonry، این باعث میشود اندازه همه ستونها auto ، اما اگر میخواهید اندازههای صریح را ارائه دهید، میتوانید این کار را انجام دهید:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
یا اگر میخواستید از «grid» برای تنظیم اندازهها و نام ناحیهها با هم استفاده کنید:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
در هر دوی این مثالها، ترتیب کاملاً الزامی است و اگر به جای آن ردیف میخواستید، ترتیب متفاوت است. برای مثال، تغییر به ردیفها به این صورت است:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
یا، برای اینکه همه آنها را در یک خلاصه نویسی قرار دهیم:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
نکاتی که باید بین دو گزینه در نظر گرفته شوند
با توجه به اینکه اختصار display: masonry نسبتاً سرراست است، احتمالاً بهطور گسترده مورد استفاده قرار خواهد گرفت. در بسیاری از موارد، برای یک طرحبندی masonry «استاندارد»، فقط تعاریف مسیر را تنظیم میکنید؛ سایر مقادیر میتوانند پیشفرض در نظر گرفته شوند.
نسخه display: grid از اختصار grid موجود استفاده میکند که یک اختصار نسبتاً پیچیده است و به تجربه ما کمتر توسط توسعهدهندگان استفاده میشود. همانطور که در مثالهای قبلی نشان داده شد، حتی زمانی که برای طرحبندیهای ساده masonry استفاده میشود، هنگام تنظیم ترتیب مقادیر نیاز به دقت دارد.
ملاحظات دیگر
این پست به برخی از موارد استفاده رایج امروزی میپردازد، با این حال ما نمیدانیم آینده چه چیزی را برای grid یا masonry در نظر دارد. یک استدلال بزرگ برای استفاده از سینتکس جداگانه display: masonry این است که به این دو اجازه میدهد در آینده از هم جدا شوند. به ویژه با مقادیر اولیه - مانند مقادیر masonry-template-tracks - ممکن است انجام کاری متفاوت در masonry نسبت به grid مفید باشد. اگر از نسخه display: grid استفاده کنیم، نمیتوانیم پیشفرضهای grid را تغییر دهیم، این میتواند کارهایی را که ممکن است بخواهیم در آینده انجام دهیم محدود کند.
در این مثالها، میتوانید مکانهایی را ببینید که مرورگر مجبور است ویژگیهایی را که در grid معتبر هستند، در صورت استفاده از masonry نادیده بگیرد. برای مثال grid-template-areas ، که در آن بیشتر مقادیر از بین میروند زیرا یک طرحبندی grid دوبعدی را تعریف میکند، در masonry ما فقط یک جهت را به طور کامل تعریف میکنیم.
بازخورد خود را ارائه دهید
به این مثالها و همچنین پیشنویس مشخصات که هر نسخه را در کنار دیگری قرار میدهد، نگاهی بیندازید. با نظر دادن در شماره ۹۰۴۱، نظرات خود را با ما در میان بگذارید یا اگر ترجیح میدهید در وبلاگ خود یا در رسانههای اجتماعی پستی بنویسید، حتماً در X یا لینکدین به ما اطلاع دهید.