دوره grid در css

چیدمان عناصر پایه و اساس طراحی وب و رابط های کاربری می باشد. grid یک سیستم شبکه ‌ای دو بُعدی را برای CSS فراهم می ‌کند که جهت طرح بندی یا Layout بندی عناصر در یک صفحه وب بکار می رود. هدف اصلی گرید این است که شما بتوانید تگ ها را در یک صفحه وب به بهترین و راحت ترین حالت ممکن ایجاد نمایید.
یک Grid مجموعه ‌ای از خط‌ های افقی و عمودی متقاطع است که تعریف کننده سطرها و ستون‌ها هستند. می ‌توان در داخل این سطرها و ستون‌ها عنصرهایی را قرار داد و جانمایی کرد.
بطور کلی ماژول css grid این قابلیت را در اختیار طراح می گذارد تا عناصر موجود در سند را یکی بصورت افقی در قالب سطر ها ( rows ) و دیگری بصورت عمودی در قالب ستون ها ( columns ) به راحتی با هر طول و عرضی قرار دهد بدون اینکه مشکلی در نمایش صحیح آنها بوجود آید.
خوشبختانه پشتیبانی از این ماژول اخیرا توسط مرورگرهای محبوبی همچون کروم، فایرفاکس و سافاری آغاز شده است. این یکی از دلایلی است که تمام توسعه دهنده گان front-end باید هر چه زودتر به سراغ فراگیری آموزش grid در cssبروند.

اولین مرورگری که شروع به پیاده سازی گرید کرد IE10 بود و سپس این کار در IE11 نیز ادامه پیدا کرد. و چون در آن زمان استاندارهای گرید با نسخه فعلی آن متفاوت بودند در نتیجه برخی از ویژگی ها در این دو مرورگر پشتیبانی نمی شدند. همچنین سینتکس برخی از ویژگی ها نیز متفاوت می باشد و نیاز به پیشوند نیز برای بعضی ویژگی ها وجود دارد که در این دو مورد آخر Autoprefixer می تواند به شما کمک کند.

پشتیبانی گوگل کروم از CSS Grid

نسخه‌های ۴ تا ۲۸ مرورگر گوگل کروم از قالب ‌بندی CSS Grid پشتیبانی نمی‌ کنند. در نسخه‌های ۲۹ تا ۵۶ کروم، قابلیت CSS Grid به طور پیش ‌فرض فعال نیست. اما می‌ توان با فعال‌ سازی پرچم «experimental Web Platform features» (قابلیت‌های آزمایشی توسعه وب) در آدرس «chrome://flags» از طرح‌ بندی CSS Grid استفاده کرد. از نسخه ۵۷ به بعد، گوگل کروم از طرح‌ بندی CSS Grid پشتیبانی می ‌کند.

پشتیبانی فایرفاکس از CSS Grid

پشتیبانی CSS Grid در نسخه‌های ۲ تا ۳۹ مرورگر فایرفاکس ارائه نشده است. همچنین از نسخه ۴۰ تا ۵۱ پشتیبانی از قابلیت ‌های CSS Grid در موزیلا فایرفاکس به صورت پیش ‌فرض فعال نیست، اما می‌ توان آن را به صورت دستی فعال کرد. نسخه‌های ۵۲ به بعد فایرفاکس از CSS Grid پشتیبانی می ‌کنند. اگرچه چند باگ در خصوص ایجاد سربار در برخی از نسخه‌ ها شناسایی شده ‌اند.

پشتیبانی سافاری از CSS Grid

مرورگر سافاری نسخه‌های ۳.۱ تا ۱۰ از طرح‌ بندی CSS Grid پشتیبانی نمی‌ کنند. از نسخه ۱۰ به بعد مرورگر سافاری به طور کامل از CSS Grid Layout پشتیبانی می‌ کند.

پشتیبانی مایکروسافت اج از CSS Grid

مرورگر Microsoft Edge نیز از نسخه ۱۲ تا ۱۵ به طور ناقص از قالب ‌بندی CSS Grid پشتیبانی می ‌کند. اما از نسخه ۱۶ به بعد، پشتیبانی از CSS Grid در مایکروسافت اج به طور کامل ارائه شده است.

پشتیبانی اوپرا از CSS Grid

تا نسخه ۲۷ از CSS Grid در مرورگر Opera به طور پیش ‌فرض پشتیبانی نمی‌ شود. اما می ‌توان طرح‌ بندی CSS Grid را در مرورگر اوپرا نسخه‌ های ۲۸ تا ۴۳ فعال کرد. نسخه ‌های ۴۴ به بعد مرورگر اوپرا نیز از CSS Grid پشتیبانی می ‌کنند.