یک بار که در حال بررسی انواع طرح‌بندی برای محتوای HTML بودم، متوجه شبکه‌های سنگ‌تراشی شدم. من برای اولین بار آن را در پینترست دیدم، و بسیار جالب و روان به نظر می رسید، مانند یک بازی تتریس برای تصاویر. من شروع به تحقیق کردم که چگونه می توان این کار را انجام داد، نمی تواند آنقدر سخت باشد، درست است؟ CSS به اندازه کافی قدرتمند بود که این کار را انجام دهد، درست است؟ خوب، نه کاملا.
سنگ تراشی چیست؟
چیدمان بنایی نوعی چیدمان شبکه ای است که در آن آیتم ها در جهت درونی قرار می گیرند. وقتی به خط بعدی می‌پیچند، آیتم‌ها به‌طور خودکار شکاف‌های باقی‌مانده از ردیف اول آیتم‌ها را پر می‌کنند. این در تضاد کامل با نحوه کار شبکه‌های CSS امروزی است، جایی که ردیف دوم آیتم‌ها به ردیف اول وارد نمی‌شوند.
راه حل شبکه CSS امروزی این توانایی را ندارد که آیتم ها را به صورت پویا در فضاهای باقی مانده در ردیف قبلی قرار دهد، حداقل بدون مقداری جاوا اسکریپت در این فرآیند. بنابراین، من راه حل تمام مشکلات فوق را به شما ارائه می کنم. ستون های CSS
یک راه حل
ستون های CSS مدت زیادی است که وجود داشته اند. و در حالی که این ویژگی بیشتر برای تایپوگرافی و محتوای متنی استفاده شده است، می توان از آن برای چیدمان تصاویر یا کارت ها به روش سنگ تراشی نیز استفاده کرد.
.masonry {
columns: 3;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
با این حال، برخی از هشدارها در مورد این روش وجود دارد. با استفاده از شبکه، آیتم ها در جهت درونی قرار می گیرند. با این حال، با ستون ها، موارد در جهت بلوک قرار می گیرند. به نظر می رسد یک چیدمان سنگ تراشی است، اما کاملاً مانند یک چیدمان عمل نمی کند. به یاد داشته باشید، چیدمان های سنگ تراشی هنوز هم قرار است در جهت درونی چیده شوند. از چپ به راست.
نتیجه
همانطور که می بینید، ما می توانیم با CSS خالص کاملاً به چیدمان های سنگ تراشی نزدیک شویم، و اگر شما فقط ظاهر تتریشی چیدمان سنگ تراشی را دوست دارید، به احتمال زیاد می توانید فقط از ستون های CSS استفاده کنید و مثل همیشه خوشحال باشید. . اما اگر به جریان خطی یک چیدمان سنگ تراشی واقعی وابسته هستید، فعلاً باید جاوا اسکریپت را درگیر کنید.
با این حال، برنامه‌هایی در حال انجام است تا طرح‌بندی‌های سنگ‌تراشی به‌طور بومی در CSS پشتیبانی شوند. این مشخصات در حال حاضر فقط در فایرفاکس پشتیبانی می‌شود، اما ما فقط می‌توانیم امیدوار باشیم که سایر مرورگرها به‌زودی به کار خود ادامه دهند.
