سیستم CSS Grid نحوه ساخت طرحبندیهای وب را متحول کرده است. به عنوان یک سیستم طرحبندی دو بعدی، کنترل بینظیری بر سطرها و ستونها ارائه میدهد و به گزینهای ترجیحی برای ساختارهای پیچیده و واکنشگرا تبدیل شده است. این راهنما به مکانیکهای اصلی Grid میپردازد و فراتر از نحو پایه میرود تا تکنیکهای پیشرفتهای را که توسعهدهندگان حرفهای هر روز به آنها تکیه دارند، بررسی کند.
نحو طرحبندی پایه و قالبهای Grid
برای بهرهگیری از قدرت CSS Grid، باید ابتدا با ویژگیهای بنیادینی که یک کانتینر گرید را تعریف میکنند، آشنا شوید. این فرآیند با اعلام یک کانتینر با
display: grid آغاز میشود. این کار عناصر فرزند را به آیتمهای گرید تبدیل میکند تا آماده قرارگیری در مسیرهای تعریف شده توسط والد باشند.
مهمترین ویژگیها
grid-template-columns و
grid-template-rows هستند. این ویژگیها به شما امکان میدهند تعداد و اندازه ستونها و سطرها را تعریف کنید. اگرچه میتوانید مقادیر پیکسلی ثابت یا درصدها را مشخص کنید، اما واحد
fr (کسری) شاید قدرتمندترین ویژگی باشد. این واحد فضای موجود در کانتینر گرید را به واحدها تقسیم میکند و اطمینان حاصل میکند که طرحبندی سیال و واکنشگرا باقی بماند.
برای مثال، استفاده از
1fr 2fr 1fr سه ستون ایجاد میکند که ستون میانی دو برابر فضای ستونهای بیرونی را اشغال میکند. علاوه بر این، تابع
repeat() الگوهای تکراری را ساده میکند. کد زیر را برای یک طرحبندی داشبورد استاندارد در نظر بگیرید:
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 60px 1fr 40px;
gap: 20px;
}
این پیکربندی یک هدر، یک ناحیه محتوای اصلی و یک فوتر ایجاد میکند، با فاصلهگذاری یکسان بین تمام عناصر. ویژگی
gap نیاز به حاشیه (margin) برای آیتمهای منفرد را از بین میبرد، از مشکلات همپوشانی حاشیه جلوگیری میکند و فاصلهگذاری یکنواختی را در سراسر طرحبندی تضمین مینماید.
قرارگیری پیشرفته و نواحی Grid
پس از ایجاد ساختار گرید، قرارگیری دقیق آیتمها ضروری میشود. اگرچه الگوریتم Grid Auto Flow آیتمها را به صورت خودکار قرار میدهد، اما برای طرحبندیهای پیچیده اغلب به کنترل صریح نیاز است. ویژگیهای
grid-column و
grid-row به شما امکان میدهند دقیقاً مشخص کنید که یک آیتم باید روی کدام خطوط گرید گسترده شود.
برای کدی معناییتر و خواندنیتر، نواحی CSS Grid یک سیستم گرید نامگذاری شده ارائه میدهند. با تعریف نواحی در ویژگی
grid-template-areas، میتوانید طرحبندی خود را مستقیماً در CSS تجسم کنید. این رویکرد به ویژه برای طراحان و توسعهدهندگانی که روی یک پروژه همکاری میکنند مفید است، زیرا ساختار بصری صفحه را بازتاب میدهد.
در زیر مثال یک طرحبندی کلاسیک سبک روزنامه با استفاده از نواحی نامگذاری شده آمده است:
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
این روش نه تنها ساختار HTML را ساده میکند، بلکه مرتبسازی مجدد طرحبندی برای اندازههای صفحه نمایش مختلف را نیز با تغییر مجدد
grid-template-areas در کوئریهای مدیا (media queries) آسانتر میسازد.
طراحی واکنشگرا و بهترین شیوهها
طراحی واکنشگرا جایی است که CSS Grid واقعاً درخشش میکند. برخلاف Flexbox که عمدتاً یک بعدی است، Grid به شما امکان میدهد کل طرحبندیها را بر اساس عرض نمایه (viewport) بدون تغییر ترتیب HTML مجدداً ساختاردهی کنید. با ترکیب Grid با
minmax() و
auto-fit یا
auto-fill، میتوانید گریدهای پویایی ایجاد کنید که با هر اندازه صفحه نمایش سازگار میشوند.
تابع
minmax() یک اندازه حداقل و حداکثر را برای یک مسیر تعیین میکند و اطمینان حاصل میکند که آیتمها خوانا باقی بمانند در حالی که استفاده از فضا به حداکثر میرسد. به عنوان مثال،
repeat(auto-fit, minmax(300px, 1fr)) تا حد امکان ستونها را ایجاد میکند، به طوری که هر ستون حداقل ۳۰۰ پیکسل عرض داشته باشد. اگر صفحه کوچک شود، ستونها به طور طبیعی به خط بعد میروند؛ اگر بزرگ شود، برای پر کردن فضا رشد میکنند.
هنگام بهینهسازی برای عملکرد، از استفاده از حاشیههای منفی (negative margins) برای هل دادن آیتمها به داخل گرید خودداری کنید؛ همیشه از ویژگیهای Grid استفاده کنید. علاوه بر این، به یاد داشته باشید که آیتمهای Grid به طور پیشفرض سطح بلوک هستند، بنابراین به ندرت نیاز به تنظیم
display: block روی آنها دارید. در نهایت، طرحبندیهای خود را در ابزارهای توسعهدهنده مرورگر آزمایش کنید تا اطمینان حاصل کنید که گریدهای تو در تو و گسترشهای پیچیده در تمام مرورگرهای پشتیبانی شده به همان شکلی که انتظار میرود رفتار میکنند.
نتیجهگیری
CSS Grid یک ابزار ضروری برای توسعه فرانتاند مدرن است. با تسلط بر قالبهای گرید، قرارگیری صریح و الگوهای واکنشگرا، میتوانید طرحبندیهای وب قوی، قابل نگهداری و از نظر بصری خیرهکننده بسازید. شروع به ادغام این تکنیکها در پروژههای فعلی خود کنید تا منافع فوری رویکرد ساختاریافته و دو بعدی به طراحی را مشاهده نمایید.