بازخورد مورد نیاز: چگونه باید سنگ تراشی CSS را تعریف کنیم؟

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

تاریخ انتشار: 19 سپتامبر 2024

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

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

این پست همه موارد استفاده ممکن را پوشش نمی‌دهد، با این حال واضح است که جدا کردن سنگ‌تراشی از طرح‌بندی شبکه‌ای منجر به عدم عملکرد این ویژگی نمی‌شود. در واقع ممکن است برعکس باشد. همانطور که در این پست خواهید دید، نسخه display: masonry فرصت های جدید و نحو ساده تری ایجاد می کند. علاوه بر این، بسیاری از توسعه دهندگان نگرانی هایی را در مورد پتانسیل سفارش مجدد اقلام با سنگ تراشی که باعث مشکلات دسترسی می شود، مطرح کرده اند. این نیز برای هر دو نسخه از نحو، از طریق ویژگی reading-flow پیشنهادی بررسی می شود.

یک طرح بنایی اولیه

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

با display: masonry

برای ایجاد یک طرح بنایی از مقدار masonry برای ویژگی display استفاده کنید. این یک طرح بنایی با مسیرهای ستونی ایجاد می کند که شما تعریف می کنید (یا با محتوا تعریف می شوند) و سنگ تراشی در محور دیگر. اولین مورد در بلوک و شروع درون خطی نمایش داده می شود (بنابراین در بالا سمت چپ در انگلیسی)، و موارد در جهت درون خطی قرار می گیرند.

برای تعریف آهنگ‌ها، از masonry-template-tracks با مقادیر فهرست آهنگ همانطور که در طرح‌بندی شبکه CSS استفاده می‌شود، استفاده کنید.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

دارای display: grid

برای ایجاد یک طرح بنایی، ابتدا با استفاده از مقدار 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 مشخص نکنید، یک طرح بنایی دریافت می کنید. بنابراین 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 and 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 بسیار شبیه به نحوه کار فلکس باکس است. جهت جریان ستون ها را با استفاده از ویژگی masonry-direction با مقدار column-reverse تغییر دهید.

نسخه شبکه CSS از 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 از ستون به ردیف، به معنای تغییر مقدار masonry-direction است. با نسخه گرید، باید مقادیر ویژگی های grid-template-columns و grid-template-rows تغییر دهید. یا در صورت استفاده از مختصر، ترتیب نحو را تغییر دهید.

با هر دوی این نمونه های جریان سوئیچینگ، display: masonry بصری تر به نظر می رسد. یک ویژگی منفرد وجود دارد که masonry-direction را کنترل می کند، یکی از مقادیر زیر را می گیرد:

• row
• column
• row-reverse
• column-reverse

سپس با فرض اینکه مقدار خودکار پیش‌فرض آن چیزی نیست که شما نیاز دارید، اطلاعات مربوط به اندازه مورد نیاز را به masonry-template-tracks اضافه می‌کنید.

با grid، برای انجام جهت معکوس باید از ویژگی grid-auto-flow استفاده کنید، و برای انجام سوئیچ row masonry مقدار ویژگی grid-template-* را انجام دهید. همچنین در نحو شبکه فعلی نمی توان مقدار محور شبکه را تعریف نشده باقی گذاشت. شما همیشه باید ویژگی های grid-template-* را در محوری که مقداری از masonry ندارد مشخص کنید.

موقعیت اقلام

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

با display: masonry

CSS زیر یک طرح بنایی را با چهار ستون تعریف می کند. بنابراین، محور شبکه، ستون است. آیتم با کلاس 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

برای ستون ها ، نحو اساساً یکسان است. به طور مشابه، چون هیچ اندازه مسیری تعریف نشده است، هر سه به طور پیش‌فرض روی اندازه auto هستند، اما همچنان باید به صراحت بگویید که محور دیگر بنایی است:

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

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

کوتاه نویسی

در این پست از خط‌های بلند استفاده شده است تا مشخص شود که کدام ویژگی‌ها مورد استفاده قرار می‌گیرند، اما هر دو نسخه display: masonry و display: grid می‌توان با استفاده از خلاصه‌نویسی تعریف کرد.

با display: masonry

display: 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"; .

همچنین، هر جزء را می توان آزادانه دوباره مرتب کرد. هیچ ترتیب خاصی وجود ندارد که باید به خاطر بسپارید. و اگر می‌خواهید به جای آن ردیف‌ها را انجام دهید، تنها کاری که باید انجام دهید این است که 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;
}

مانند نمونه سنگ تراشی، این کار باعث می شود همه ستون ها auto اندازه شوند، اما اگر می خواهید اندازه های واضح را ارائه دهید، می توانید این کار را انجام دهید:

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

یا اگر می‌خواهید از «شبکه» برای تنظیم اندازه‌ها و نام‌های مناطق با هم استفاده کنید:

.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 به طور گسترده استفاده می شود. در بسیاری از موارد، برای یک چیدمان بنایی "استاندارد"، شما فقط تعاریف مسیر را تنظیم می کنید. همه مقادیر دیگر می توانند پیش فرض را در نظر بگیرند.

نسخه display: grid از خلاصه‌نویسی grid موجود استفاده می‌کند که یک اختصار نسبتاً پیچیده است و در تجربه ما کمتر توسط توسعه‌دهندگان استفاده می‌شود. همانطور که در مثال‌های قبل نشان داده شد، حتی زمانی که برای چیدمان‌های ساده سنگ‌تراشی استفاده می‌شود، در تنظیم ترتیب مقادیر به دقت نیاز دارد.

ملاحظات دیگر

این پست به برخی از موارد استفاده رایج امروزی می پردازد، با این حال نمی دانیم که آینده چه چیزی برای شبکه یا سنگ تراشی ممکن است داشته باشد. یک استدلال بزرگ برای استفاده از display: masonry این است که اجازه می دهد این دو در آینده از هم جدا شوند. به ویژه در مورد مقادیر اولیه - مانند مقادیر مربوط به masonry-template-tracks ممکن است انجام کاری متفاوت از شبکه در سنگ تراشی مفید باشد. ما نمی‌توانیم پیش‌فرض‌های شبکه را تغییر دهیم، اگر از display: grid ، این می‌تواند کارهایی را که ممکن است بخواهیم در آینده انجام دهیم محدود کند.

در این مثال‌ها، می‌توانید مکان‌هایی را ببینید که در صورت استفاده از سنگ‌تراشی، مرورگر باید ویژگی‌هایی را که در شبکه معتبر هستند، نادیده بگیرد. به‌عنوان مثال، grid-template-areas ، که در آن بیشتر مقادیر از بین می‌روند، زیرا یک طرح شبکه دو بعدی را تعریف می‌کند، در بنایی ما فقط یک جهت را به طور کامل تعریف می‌کنیم.

بازخورد خود را ارائه دهید

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