یکی از قابلیت‌های جذاب و قدرتمند CSS Grid، امکان پیاده‌سازی چیدمان‌های متفاوت و انعطاف‌پذیر است. اگر دوست دارید آلبوم عکس‌ها یا کارت‌های مختلفی را در وبسایت خود نمایش دهید و به دنبال چیدمانی مشابه با یک دیوار آجری یا یک روزنامه باکس گذاری شده باشید، CSS Grid می‌تواند به شما در ایجاد چنین چیدمانی کمک کند. این نوع چیدمان به «ماسونی» یا «Masonry» معروف است.
چیدمان ماسونی به شما اجازه می‌دهد تا محتوای نامنظم و دارای اندازه‌های مختلف را به طور زیبا و منظم نمایش دهید. معمولاً در بلاگ‌ها، گالری‌ها و صفحات محصول استفاده می‌شود. در این چیدمان، المان‌ها به صورت طبیعی جریان می‌یابند و سعی می‌کنند که فضای خالی کمتری باقی بگذارند، مشابه به ریختن آجرها در یک دیوار.
CSS Grid ابزار مناسبی برای پیاده‌سازی چیدمان ماسونی است. با استفاده از ویژگی‌های مختلف Grid Layout مانند grid-template-columns و grid-auto-rows می‌توان چیدمان‌های پیچیده و پویا را به سادگی پیاده‌سازی کرد. شما حتی می‌توانید با ترکیب جاوا اسکریپت کاری کنید که چیدمان به صورت خودکار بر اساس اندازه‌ی صفحه تغییر کند.
در مثال زیر ما یک چیدمان ماسونی ساده را با استفاده از CSS Grid پیاده‌سازی می‌کنیم. ابتدا موتور مربوط به Grid را تنظیم کرده سپس. عناصر مورد نظر را در بخش‌های مختلف قرار خواهیم داد. با استفاده از grid-area مشخصات مکان هر عنصر را تنظیم می‌کنیم و در نهایت یک چیدمان ماسونی ایجاد می‌کنیم.
با یادگیری این تکنیک، شما قادر خواهید بود که صفحات وب خود را بیش از پیش حرفه‌ای و جذاب طراحی کنید!
کد نمونه برای چیدمان ماسونی با CSS Grid
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>مینی لرن - چیدمان ماسونی با CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 150px;
gap: 10px;
}
.grid-item {
background-color: #EEE;
border: 1px solid #DDD;
padding: 10px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
توضیح خط به خط کد
<!DOCTYPE html>
این دستور اعلام می‌کند که سند HTML از نوع HTML5 است.
<html lang="fa">
عنصر root HTML برای تعیین زبان به فارسی.
<meta charset="UTF-8">
برای تنظیم نمایش کاراکترها به صورت یونیکد.
<style>
برای نگارش استایل‌های CSS داخلی درون سند HTML.
.grid-container
این کلاس شامل تنظیمات اصلی grid می‌باشد که چیدمان شبکه‌ای را ایجاد می‌کند.
display: grid;
تعیین می‌کند که کانتینر به صورت grid نمایش داده شود.
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
این خط تعیین می‌کند که ستون‌ها به صورت خودکار پر شده و با عرض حداقلی 150 پیکسل تعریف شوند.
gap: 10px;
فاصله بین هر آیتم grid به اندازه 10 پیکسل است.
.grid-item
استایل‌های اعمال شده بر هر آیتم درون grid را تعیین می‌کند مانند رنگ زمینه و حاشیه.
<div class="grid-item">1</div>
هر آیتم با این کلاس داخل grid قرار گرفته است.