گرید در CSS (Grid) — مقدمه
در این صفحه با «گرید در CSS (Grid)» آشنا می شوید؛ سیستمی مبتنی بر سطر و ستون که چیدمان های پیچیده را ساده می کند. بنابراین، بدون استفاده از float یا position می توانید لایه بندی واکنش گرا بسازید.
گرید در CSS چیست؟
طبق منبع، «CSS Grid Layout» یک سیستم شبکه ای با سطرها و ستون ها است. این ماژول ایجاد چیدمان های پیچیده وب را آسان می کند و در مرورگرهای مدرن پشتیبانی می شود. همچنین، فلکس باکس برای چیدمان یک بعدی و گرید برای چیدمان دوبعدی مناسب است.
اجزای اصلی گرید
هر گرید از دو جزء تشکیل می شود: 1) Grid Container یعنی عنصر والد، 2) Grid Items یعنی فرزندان مستقیم کانتینر. تمام فرزندان مستقیم به صورت خودکار آیتم گرید می شوند.
ایجاد Grid Container
یک عنصر زمانی «Grid Container» است که ویژگی display آن روی grid یا inline-grid تنظیم شود.
.container { display: grid; } .inlineContainer { display: inline-grid; }نکته: پس از تبدیل به کانتینر، همه فرزندان مستقیم آن به «Grid Items» بدل می شوند و می توانید آن ها را در سطرها و ستون ها جای دهید.
گرید در CSS: ساختار پایه
نمونه ای از کانتینر گرید با چند آیتم را در نظر بگیرید. در منبع تأکید شده که تنها کافی است کانتینر را گرید کنید؛ آیتم ها به طور خودکار در شبکه قرار می گیرند. سپس می توانید با ویژگی های گرید ستون ها، سطرها و فاصله ها را تعریف کنید.
.grid-container { display: grid; /* ردیف ها و ستون ها را در فصل های بعدی تعریف می کنیم */ }هشدار: اگر آیتم ها به درستی چیدمان نمی شوند، بررسی کنید که فرزندان مستقیم کانتینر باشند؛ عناصر تو در تو بدون تبدیل به فرزند مستقیم، آیتم گرید محسوب نمی شوند.
گرید در CSS: تفاوت با فلکس
طبق بخش «Grid vs. Flexbox» در منبع: گرید برای چیدمان دوبعدی است (سطر و ستون)، اما فلکس باکس برای چیدمان یک بعدی است (سطر یا ستون). بنابراین، برای صفحات با ناحیه های متعدد، «گرید در CSS» انتخاب بهتری است.
ادامه مسیر یادگیری
برای واکنش گرایی می توانید از کوئری های رسانه ای کمک بگیرید یا الگوهای فلکس واکنش گرا را مرور کنید. در گام بعد، فصل «ستون ها و ردیف ها» از گرید را مطالعه کنید.
برای مرجع سریع، این منابع مفیدند: MDN: CSS Grid Layout و MDN: display.