سلام خدمت شما دوستان
CSS Grid یک روش جدید برای ایجاد طرح‌بندی در وب است. برای اولین بار ما یک سیستم چیدمان مناسب را به صورت بومی در مرورگر در دسترس داریم که مزایای زیادی به ما می دهد.
این مزایا به ویژه اگر CSS Grid را با محبوب ترین فریمورک همه آنها مقایسه کنید .نه تنها میتوانید طرح‌بندی‌هایی ایجاد کنید که قبلاً بدون معرفی جاوا اسکریپت امکان‌پذیر نبود، بلکه حفظ و درک کد شما آسان‌تر خواهد بود.
در این مقاله قصد دارم دلیل آن را توضیح دهم.
حالا بیایید به سه دلیل اصلی من نگاه کنیم که چرا فکر می کنم css می آید و Grid Bootstrap را شکست می دهد
اول : نشانه گذاری شما ساده تر خواهد بود
تعویض Bootstrap با CSS Grid HTML شما را پاک‌تر می‌کند. در حالی که این مهمترین مزیت نیست، احتمالاً اولین مزیتی است که متوجه آن خواهید شد.
برای مثال، من یک طرح ساختگی برای یک وب سایت ایجاد کرده ام تا بتوانیم کد مورد نیاز برای دو نسخه را با هم مقایسه کنیم. ایناهاش:
Bootstrap :
بیایید ابتدا به نشانه گذاری مورد نیاز برای ایجاد این وب سایت در بوت استرپ نگاه کنیم.
دو نکته وجود دارد که می خواهم در اینجا به آن توجه کنید:
1- هر ردیف باید تگ <div> خودش باشد.
2- شما باید از نام کلاس ها برای تعیین طرح بندی استفاده کنید (col-xs-2).
3- با افزایش پیچیدگی این طرح، HTML نیز افزایش می یابد.
اگر این یک وب سایت واکنش گرا بود، معمولاً برچسب ها حتی بدتر به نظر می رسید:
CSS Grid :
اگر این یک وب سایت واکنش گرا بود، معمولاً برچسب ها حتی بدتر به نظر می رسید:
من می‌توانستم از عناصر معنایی در اینجا استفاده کنم، اما من ترجیح می‌دهم از div استفاده کنم تا مقایسه با مثال Bootstrap را آسان‌تر کنم.
ما فوراً می توانیم ببینیم که این نشانه گذاری ساده تر است. نام کلاس های زشت و تگ های div اضافی مورد نیاز برای هر ردیف از بین رفته است. این فقط یک ظرف برای شبکه و موارد داخل آن است.
با این حال، در حالی که مثال Bootstrap نیازی به اضافه کردن CSS ندارد، مثال CSS Grid البته به این نیاز دارد. به طور خاص شما باید این را اضافه کنید:
و این ممکن است برای برخی افراد به نفع Bootstrap باشد: برای ایجاد یک شبکه ساده، لازم نیست نگران CSS باشید، زیرا به سادگی طرح‌بندی را در HTML تعریف می‌کنید.
اما همانطور که در نکته بعدی متوجه خواهید شد، این جفت بین نشانه گذاری و چیدمان در واقع یک ضعف در مورد انعطاف پذیری است.
دوم: انعطاف بسیار بیشتر
فرض کنید می خواهید چیدمان خود را با توجه به اندازه صفحه تغییر دهید. به عنوان مثال، وقتی منو در تلفن همراه مشاهده می شود، منو را به ردیف بالا بکشید.
به عبارت دیگر، طرح را از این تغییر دهید:
در این مورد:
CSS Grid:
انجام این کار با CSS Grid بسیار ساده است. ما فقط یک پرس و جو رسانه اضافه می کنیم، و هر طور که می خواهیم موارد را به هم می زنیم:
این واقعیت که میتوانید طرح‌بندی را به این صورت تنظیم کنید، بدون اینکه نگران نحوه نگارش HTML باشید، استقلال سفارش منبع نامیده می‌شود و این یک پیروزی بزرگ برای توسعه‌دهندگان و طراحان است.
CSS Grid به شما اجازه می دهد تا HTML را به آنچه که قرار است باشد تبدیل کنید. نشانه گذاری محتوا. نه تصاویری که به CSS تعلق دارند
Bootstrap:
اگر بخواهیم همین کار را در Bootstrap انجام دهیم، در واقع باید HTML را تغییر دهیم. ما باید برچسب منو را به ردیف بالا منتقل کنیم، علاوه بر هدر، زیرا منو در ردیف دوم به دام افتاده است.
انجام این کار بر اساس درخواست رسانه ای بی اهمیت نیست. این کار را نمی توان تنها با استفاده از HTML و CSS انجام داد، بنابراین باید شروع به سر زدن به جاوا اسکریپت کنید.
این مثال بزرگترین مزیتی را که تا کنون با CSS Grid تجربه کرده ام را نشان می دهد.
دیگر محدودیت 12 ستونی وجود ندارد
این مشکل بزرگی نیست، اما چندین بار آزار دهنده بوده است. از آنجایی که شبکه بوت استرپ به دوازده ستون تقسیم می شود، اگر طرح بندی پنج ستونی می خواهید به مشکل برخواهید خورد. یا هفت. یا نه. یا هر چیزی که جمع آن دوازده نباشد.
با CSS Grid، این مورد نیست. می توانید کاری کنید که شبکه شما دقیقاً به همان مقدار ستونی که می خواهید داشته باشد. در اینجا یک شبکه هفت ستونی وجود دارد.
این کار با تنظیم grid-template-columns برای تکرار (7, 1fr)، مانند زیر انجام می شود:
اکنون ممکن است راهی برای هک کردن Bootstrap وجود داشته باشد و این کار را نیز انجام دهید.
و من می‌دانم که Bootstrap 4 از Flexbox استفاده می‌کند، که این امکان را نیز فراهم می‌کند، اما هنوز از نسخه بتا خارج نشده است.
پشتیبانی از مرورگر :
قبل از پایان، البته باید در مورد پشتیبانی مرورگر نیز صحبت کنیم. در زمان نگارش این مقاله، 75 درصد از ترافیک وب سایت جهانی از CSS Grid پشتیبانی می کند.
منبع : از این لینک میتوانید به منبع مقاله مراجعه فرمایید