نوشته نوانی ویکتوری✏️
هنگام طراحی صفحه ای با محتوایی که در ویوپورت پر شده است، یک راه غیرمستقیم برای آموزش کاربران برای ادامه پیمایش، نمایش بخشی از محتوای جدید است. یکی از این رویکردها، چیدمان بنایی است که عناصر را درون خط قرار می دهد و به آنها اجازه می دهد تا برای پر کردن فضاهای خالی به سمت بالا حرکت کنند.
در این آموزش، طرح‌بندی آزمایشی سنگ‌تراشی اضافه‌شده به مشخصات شبکه سطح 3 CSS را بررسی می‌کنیم. ما همچنین راه های مشابه دیگری را برای تکرار طرح سنگ تراشی با CSS در نظر خواهیم گرفت.
پرش به جلو:
قبل از شروع ساخت، اجازه دهید کمی وقت بگذاریم تا بفهمیم مفهوم چیدمان به سبک بنایی چگونه به وجود آمد.
آشنایی با چیدمان بنایی
همانطور که از نام آن پیداست، چیدمان سنگ تراشی مربوط به صنایع بنایی است که در آن کارگرانی به نام سنگ تراشی، آجرها را برای ساختن دیوارهای بتنی می چیدند.
در تمرین هنر خود، سنگ‌تراش‌ها اغلب آجرها را با استفاده از الگوی باند برانکارد روی هم می‌چسبانند، به این معنی که آجرها به اندازه نصف روی هم قرار می‌گرفتند. علاوه بر ثبات و جذابیت زیبایی شناختی، الگوی باند برانکارد همچنین ضایعات مواد را کاهش می دهد، زیرا نیازی به نصف کردن آجرها در هر اتصال وجود نداشت.
وقتی صحبت از توسعه جلویی به میان می آید، چیدمان سنگ تراشی ثابت کرده است که روشی موثر برای نمایش چندین آیتم در یک شبکه با افشای جزئی محتوا است. این طرح به طور گسترده توسط پلتفرم هایی مانند Pinterest مورد پذیرش و محبوبیت قرار گرفته است.
بدون پشتیبانی از شبکه CSS بومی برای چیدمان های سنگ تراشی، توسعه دهندگان به استفاده از کتابخانه هایی مانند Masonry.js یا Brick.js برای تکرار این طرح بصری متکی بودند. این کتابخانه‌ها می‌توانند با استفاده از جاوا اسکریپت برای دستکاری DOM، و سپس قرار دادن هر عنصر در فضاهای مناسب، طرح‌بندی‌های سبک بنایی را بدون CSS انجام دهند.
با این حال، گزارش شده است که این کتابخانه ها تأثیر شدیدی بر عملکرد دارند. آنها مجبور بودند محاسبات پرهزینه مکرر را برای یافتن مناطق موجود در طرح انجام دهند که در نتیجه یک تجربه اسکرول تاخیری ایجاد می شد.
به سرعت به سال‌های اخیر بروید – اکنون که مشخصات CSS بهبود یافته و قوی‌تر شده‌اند، آیا توسعه‌دهندگان می‌توانند تنها با استفاده از CSS به چیدمان‌های سنگ‌تراشی دست یابند؟ بیایید نحوه ایجاد یک طرح بندی سنگ تراشی در CSS با ساخت صفحه خوراک یک وب سایت نمونه وبلاگ را بررسی کنیم.
ایجاد نمونه پروژه CSS سنگ تراشی
بیایید یک صفحه برای نمایش پست های وبلاگ ایجاد کنیم. هر عنصر پست حاوی یک تصویر جلد، عنوان و توضیحاتی است که در نمونه اولیه زیر نشان داده شده است: 
برای شروع، یک دایرکتوری برای ذخیره فایل های HTML و CSS برای وب سایتی که قرار است ساخته شود ایجاد کنید.
در دایرکتوری جدید خود، یک را ایجاد کنید index.html فایل و محتوای بلوک کد زیر را به فایل اضافه کنید. برای سهولت استفاده، تصاویر درون کد از راه دور در یک سطل در Cloudinary ذخیره شده اند:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Masonry Playground</title>
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<div class="container">
<div>
<h1>CSS Masonry Playground</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A recusandae
sunt perspiciatis magnam neque, quae aliquid cupiditate dignissimos
omnis adipisci praesentium et maiores vero corporis atque ipsum harum
quisquam iusto.
</p>
</div>
<div class="gallery-container">
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674371886/logrocket-css-masonry/10.jpg"
alt="blog post one"
/>
<h2>One Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344289/logrocket-css-masonry/8.jpg"
alt="blog post two"
/>
<h2>Two Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674373487/logrocket-css-masonry/window.jpg"
alt="blog post three"
/>
<h2>Three Blog Title Here</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</p>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344282/logrocket-css-masonry/4.jpg"
alt="blog post four"
/>
<h2>Four Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344280/logrocket-css-masonry/7.jpg"
alt="blog post five"
/>
<h2>Five Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344279/logrocket-css-masonry/6.jpg"
alt="blog post six"
/>
<h2>Six Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344278/logrocket-css-masonry/1.jpg"
alt="blog post seven"
/>
<h2>Seven Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344277/logrocket-css-masonry/9.jpg"
alt="blog post eight"
/>
<h2>Eight Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
<figure>
<img
src="https://res.cloudinary.com/dkfptto8m/image/upload/v1674344276/logrocket-css-masonry/3.jpg"
alt="blog post nine"
/>
<h2>Nine Blog Title Here</h2>
<figcaption>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta eos
expedita quis perspiciatis dicta qui magni?
</figcaption>
</figure>
</div>
</div>
</body>
</html>
در این مرحله، وب سایت ساخته شده است. با این حال، هیچ سبکی ندارد زیرا /index.css فایل ایجاد نشده است
بیایید به اضافه کردن یک ظاهر طراحی در بخش بعدی ادامه دهیم.
اضافه کردن سبک های اولیه به پروژه سنگ تراشی CSS ما
در پوشه پروژه، یک فایل ایجاد کنید و نام آن را بگذارید index.css برای ذخیره شیوه نامه های CSS.
کد CSS زیر را به آن اضافه کنید index.css فایل فقط برای استایل دادن به div و img عناصر داخل صفحه:
.container {
max-width: 1224px;
margin: 0 auto;
}
img {
width: 500px;
object-fit: contain;
border-radius: 15px;
}
figure {
margin: 0;
}
همانطور که در تصویر زیر نشان داده شده است، والد div حاوی لیستی از تصاویر برای دستیابی به چیدمان سنگ تراشی سبک نشده است: 
در بخش‌های فرعی بعدی، راه‌های مختلفی برای ایجاد نمای سنگ‌تراشی در ماژول‌های مختلف طرح‌بندی CSS را بررسی خواهید کرد. اجازه دهید با پشتیبانی آزمایشی سنگ تراشی شبکه CSS شروع کنیم.
دستیابی به یک طرح بنایی با ویژگی تجربی شبکه CSS
باز کن index.css فایل و اضافه کنید .gallery-container انتخابگر به انتخابگرهای موجود که در مرحله قبل اضافه کردید:
.gallery-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem 3rem;
grid-template-rows: masonry;
}
کلمه جادویی درون .gallery-container انتخابگر بالا است masonry ارزش ارائه شده به grid-template-rows ویژگی.
به‌عنوان یک ویژگی که در حال حاضر هنوز در وضعیت پیش‌نویس است، طرح‌بندی سنگ‌تراشی شبکه‌ای فقط در مرورگری با پشتیبانی از ویژگی‌های بتا کار می‌کند. از این رو grid-template-rows هنگامی که وب سایت وبلاگ را از طریق مرورگرهای پایدار مانند Chrome، Mozilla یا Safari باز می کنید، ویژگی اعمال نخواهد شد.
تصویر زیر طرح‌بندی وبلاگ‌هایی را نشان می‌دهد که از طریق مرورگر کروم در حال مشاهده هستند. توجه داشته باشید که تصاویر به صورت شبکه ای چیده شده اند، اما نه شبکه ای به سبک سنگ تراشی. ستون ها دارای یک محور دقیق هستند که باعث ایجاد فضای خالی در زیر پست های وبلاگ با یک تصویر کوچکتر می شود: 
برای دیدن چیدمان سنگ تراشی، وب سایت را با استفاده از ساخت فایرفاکس نایتی دانلود و باز کنید، به شما امکان می دهد ویژگی های نسل بعدی وب را که هنوز منتشر نشده است، تجربه کنید: 
توجه داشته باشید که مرورگر گوگل کروم و مرورگر موزیلا فایرفاکس نیز به شما امکان می‌دهند با تنظیم پرچم‌ها برای این ویژگی‌های آزمایشی، ویژگی‌های آزمایشی را آزمایش کنید.
در این مرحله، شما یاد گرفتید که چگونه با استفاده از CSS آزمایشی یک طرح بندی سنگ تراشی ایجاد کنید grid-template-rows ویژگی. با توجه به اینکه این ویژگی هنوز با پشتیبانی کامل مرورگر منتشر نشده است، نمی‌توانید هنگام ساخت برای عموم از آن استفاده کنید.
بیایید راه حل دیگری در مورد نحوه ایجاد یک طرح بنایی با استفاده از طرح چند ستونی در نظر بگیریم.
تقلید یک طرح بنایی با استفاده از ستون ها
این رویکرد از طرح چند ستونی CSS CSS با یک طرح تعریف شده استفاده می کند column-count به مرورگر بفهمد که چگونه عناصر را در ستون ها بدون ارتفاع دقیق مرتب کند، بنابراین یک طرح بنایی ایجاد می کند.
قوانین را جایگزین کنید .gallery-container و figure انتخاب کنندگان کلاس در index.css فایل با کد زیر:
.gallery-container {
column-count: 3;
column-gap: 20px 20px;
width: 1200px;
}
figure {
margin: 0;
display: inline-block;
margin-bottom: 0px;
width: 100%;
}
قوانین جدید CSS در بالا، پست های وبلاگ را به صورت طرح بندی سه ستونی بدون یک محور عمودی تعریف شده استایل می دهد. این باعث می شود که عناصر فضای عمودی موجود را پر کنند و از نظر بصری شبیه به یک طرح بنایی به نظر برسد: 
همانطور که در تصویر بالا اشاره شد، ترتیب و ترتیب پست‌های وبلاگ به جای نمایش افقی از چپ به راست، عمودی است – از بالا به پایین. این باعث قطع ارتباط بین ترتیب بصری همانطور که توسط کاربران مشاهده می شود و سفارش DOM می شود.
قبل از اتخاذ این رویکرد برای ایجاد یک چیدمان به سبک سنگ تراشی با استفاده از CSS، مهم است که تأثیری را که فقدان ترتیب بصری بر روی کاربران خواهد داشت، به ویژه آنهایی که به ویژگی های دسترسی به وب وابسته هستند، در نظر بگیرید.
بدون متن یا عنصر بصری برای توضیح ترتیب عناصر، کاربران انتظار دارند که عناصر از چپ به راست مرتب شوند. کسانی که برای پیمایش در فهرست به صفحه کلید خود متکی هستند، این موضوع بسیار گیج کننده خواهد بود، زیرا با فشار دادن کلید تب، آنها را در میان محتوا از بالا به پایین حرکت می دهد، نه از راست به چپ همانطور که از نظر بصری انتظار می رود.
نتیجه
بابت تکمیل این آموزش به شما تبریک می گویم!
در ابتدای آموزش، ما تصمیم گرفتیم در مورد چیدمان سنگ تراشی و نحوه دستیابی به آن تنها با استفاده از CSS بیشتر بیاموزیم. برای دستیابی به هدف خود، ما عمیق‌تر به منشأ طرح‌بندی سنگ‌تراشی پرداختیم و صفحه پست پست یک وب‌سایت HTML وانیلی را با استفاده از دو رویکرد مختلف با CSS ایجاد کردیم.
همانطور که انتظار انتشار کلی طرح شبکه CSS سنگ تراشی را دارید، می توانید بررسی کنید که آیا مرورگر کاربر از آن پشتیبانی می کند یا خیر. CSS.supports() روش. با انجام این کار، می توانید پس از پشتیبانی، هک های سنگ تراشی خود را با اجرای طرح بندی ساده شده بنایی جایگزین کنید.
اگر از یادگیری ویژگی های آزمایشی سنگ تراشی برای چیدمان شبکه لذت بردید، برخی از مقالات را در مورد سایر ویژگی های جدید CSS، مانند پشتیبانی LCH و LAB، بررسی کنید.
آیا ظاهر شما به CPU کاربران شما توجه دارد؟
همانطور که صفحات وب به طور فزاینده ای پیچیده می شوند، ویژگی های حریص منابع بیشتر و بیشتر از مرورگر طلب می کنند. اگر علاقه مند به نظارت و ردیابی استفاده از CPU سمت مشتری، استفاده از حافظه و موارد دیگر برای همه کاربران خود در تولید هستید، LogRocket را امتحان کنید.
LogRocket مانند یک دستگاه DVR برای برنامه های وب است که هر چیزی را که در برنامه وب یا سایت شما اتفاق می افتد ضبط می کند. به‌جای حدس زدن چرایی مشکلات، می‌توانید معیارهای کلیدی عملکرد frontend را جمع‌آوری و گزارش دهید، جلسات کاربر را به همراه وضعیت برنامه پخش کنید، درخواست‌های شبکه را ثبت کنید و به‌طور خودکار همه خطاها را نشان دهید.
نحوه اشکال زدایی برنامه های وب را مدرن کنید — نظارت را به صورت رایگان شروع کنید.
