در منظره توسعه وب مدرن، ابزارهای کمی به عمق CSS Grid ساختاردهی محتوا را متحول کردهاند. در حالی که Flexbox در چیدمانهای یکبعدی عالی عمل میکند، CSS Grid یک سیستم دوبعدی قدرتمند ارائه میدهد که به توسعهدهندگان اجازه میدهد طراحیهای پیچیده و واکنشگرا را با دقت و سادگی بیسابقهای ایجاد کنند. این راهنما فراتر از تعاریف پایه میرود تا قابلیتهای پیشرفته و بهترین شیوههایی را که پیادهسازی حرفهای گرید را تعریف میکنند، بررسی کند.
درک معماری هسته
در پایه خود، CSS Grid از دو جزء اصلی تشکیل شده است: کانتینر گرید و آیتمهای گرید. برای فعالسازی زمینه گرید، شما display: grid (یا display: inline-grid) را به یک عنصر والد اعمال میکنید. فرزندان مستقیم سپس به عنوان آیتمهای گرید تبدیل شده و به طور خودکار بر اساس ردیفهای تعریف شده در گرید قرار میگیرند.
قدرت Grid در توانایی آن برای تعریف صریح ردیفها—ردیفها و ستونها—نهفته است. برخلاف تکنیکهای قدیمیتر مانند float یا inline-block، Grid جریان سند را از منطق چیدمان جدا میکند. این بدان معناست که شما میتوانید آیتمها را در هر جایی از گرید موقعیتدهی کنید، صرفنظر از ترتیب آنها در منبع HTML، که به معنای نشانهگذاری تمیزتر و نگهداری آسانتر است.
تعریف ردیفها و واحدهای اندازهگیری
ایجاد اسکلت چیدمان شما شامل تعریف اندازه ستونها و ردیفها است. ویژگیهای grid-template-columns و grid-template-rows انواع مختلفی از واحدها را میپذیرند. در حالی که پیکسلهای ثابت (px) و درصدها (%) برای محدودیتهای خاص مفید هستند، جادوی واقعی با واحدهای fr، auto و minmax() رخ میدهد.
واحد fr نمایانگر کسری از فضای موجود در کانتینر گرید است. برای مثال، 1fr 2fr به ترتیب یکسوم و دوسوم عرض را اختصاص میدهد. هنگام ترکیب با minmax()، میتوانید چیدمانهای سیالی ایجاد کنید که هرگز نمیشکنند. تابع minmax(min, max) یک محدوده اندازه را تنظیم میکند و اطمینان حاصل میکند که آیتمها تنها تا یک اندازه حداقل کوچک میشوند و سپس از overflow جلوگیری میکند.
.container {
display: grid;
/* سه ستون را تعریف میکند: 1 کسر، حداقل 200px/حداکثر auto، و یک کسر دیگر */
grid-template-columns: 1fr minmax(200px, auto) 1fr;
gap: 20px;
}قراردهی پیشرفته: خطوط، مناطق و نامگذاری
پس از تعریف ردیفها، موقعیتدهی آیتمها از طریق قراردهی مبتنی بر خط یا مناطق نامگذاری شده شهودی میشود. هر خط عمودی و افقی در گرید یک شماره نمایه دارد که از 1 شروع میشود. شما میتوانید یک آیتم را برای پوشش دادن چندین خط با استفاده از grid-column-start، grid-column-end و معادلهای کوتاه آنها قرار دهید.
با این حال، مقیاسپذیرترین رویکرد برای رابطهای پیچیده grid-template-areas است. این ویژگی به شما اجازه میدهد ساختار چیدمان خود را مستقیماً در CSS به صورت بصری نمایش دهید. با اختصاص نامهای رشتهای به سلولهای گرید، میتوانید رابط کاربری خود را مانند یک نقشه معماری ترسیم کنید و به وضوح مشخص کنید که عناصر چگونه با یکدیگر مرتبط هستند.
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }طراحی واکنشگرا بدون کوئریهای مدیا
یکی از قدرتمندترین ویژگیهای Grid auto-fit و auto-fill است. این کلمات کلیدی، در conjunction با minmax() استفاده میشوند، به گرید اجازه میدهند تا به طور خودکار تعداد ستونها را بر اساس عرض کانتینر محاسبه کند. این نیاز به کوئریهای مدیا متعدد را هنگام ساخت گریدهای کارت یا نوارهای ناوبری از بین میبرد.
.card-grid {
display: grid;
/* به تعدادی که جا میشود ستون ایجاد میکند، هر کدام حداقل 300px عرض */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}هنگام استفاده از auto-fit، ردیفهای خالی جمع میشوند و به آیتمها اجازه میدهند کشیده شوند و فضای خالی را پر کنند. در مقابل، auto-fill فضای ستونهای خالی را رزرو میکند که ممکن است در سناریوهای همترازی خاصی ترجیح داده شود. انتخاب بین آنها بستگی به این دارد که آیا میخواهید آیتمها در فضای خالی گسترش یابند یا در اسلات اصلی خود محدود بمانند.
نتیجهگیری
CSS Grid فقط یک ابزار استایلدهی دیگر نیست؛ بلکه یک تغییر پارادایم در طراحی چیدمان وب است. با تسلط بر اندازهگذاری ردیفها، مناطق نامگذاری شده و الگوریتمهای قراردهی خودکار، میتوانید رابطهایی بسازید که هم از نظر بصری خیرهکننده و هم از نظر فنی مقاوم باشند. هنگامی که Grid را در گردش کار خود ادغام میکنید، به یاد داشته باشید که اغلب Flexbox را تکمیل میکند تا اینکه جایگزین آن شود. از Grid برای چیدمان ماکرو و از Flexbox برای چیدمان میکرو در داخل کامپوننتها استفاده کنید. با این ترکیب، شما به جعبه ابزار کامل مورد نیاز برای توسعه فرانتاند مدرن و حرفهای مجهز هستید.