CSS کمک می کند ظاهر سایت خود را آنطور که دوست داریم بسازیم. برای این که اهمیت استفاده از CSS را درک کنید، باید یک سایت را که فقط با HTML خالی و بدون CSS نوشته شده مشاهده کنید. آن وقت متوجه می شوید که نبود CSS در صفحات وب به چه شکلی خودش را نشان خواهد داد. CSS مخفف Cascading Style Sheets بوده و اجازه می دهد اِلمان های مختلف صفحه را با توجه به طرحی که از قبل داریم داخل صفحه وب نمایش دهیم. CSS grid به کمک CSS به ما اجازه می دهد صفحات ریسپانسیو را به آسانی و با سرعت بالا طراحی کنیم. در این مطلب بررسی کردیم که CSS grid چیست و چه تفاوتی با flexbox دارد.
Css grid چیست؟
CSS grid layout یا CSS grid یک ماژول در CSS است که به توسعه دهندگان وب کمک می کند طرح های پیچیده مربوط به ریسپانسیو (Responsive) یا واکنش گرا بودن صفحات وب را بدون دردسر زیادی پیاده سازی کنند.
طراحی صفحات وب به کمک grid (شبکه) به ما کمک می کند به راحتی صفحات وب را به بخش های مختلف تقسیم کنیم. به شکلی که این بخش ها با هم تداخلی نداشته باشند. یکی از راه های پیاده سازی این نوع صفحات ریسپانسیو استفاده از CSS grid است.
البته به جز CSS grid متدهای دیگری هم برای کنترل لایه های مختلف صفحه وب وجود دارد، مثل جداول (tables)، Box model یا CSS flex box که هر کدام مزایا و معایب خودشان را دارند. البته دقت کنید که استفاده از table برای تقسیم صفحات وب مدت ها است که منسوخ شده و دیگر استفاده نمی شود.
CSS grid چه تفاوتی با flexbox دارد؟
قبل از هر چیز نباید فراموش کنید که هیچ کدام از این دو ماژول بر دیگری برتری ندارد و هر کدام در جای خود مناسب و کاربردی هستند. باید با توجه به نیاز خود و کاری که انجام می دهید، بهترین و مناسب ترین ماژول را انتخاب کنید. یکی از تفاوت های اصلی CSS grid با flexbox در مورد بعد است. ما در صفحه وب معمولا عناصر را به 2 حالت تک بعدی و دو بعدی در نظر می گیریم.
مثلا منو سایت ما را نگاه کنید، این منو به عنوان یک عنصر تک بعدی شناخته می شود، یعنی در یک مسیر یا یک جهت قرار گرفته است. برای پیاده سازی چنین چیزی بهتر است از flexbox استفاده کنیم، البته با CSS grid هم این کار شدنی است اما flexbox با کد کمتر و کیفیت بهتر این کار را انجام می دهد.
در طرف مقابل ساختار دو بعدی را داریم. مثلا منو با سایدبار یک سایت را کنار هم در نظر بگیرید. این بخش را به عنوان یک عنصر دوبعدی در نظر بگیرید. یعنی اِلمان ها در دو بعد یا دو جهت قرار گرفته اند. در این حالت استفاده از CSS grid توصیه می شود. چون سرعت کار را بالا برده و خروجی بهتری می دهد.
CSS grid جزء استانداردهای وب حساب می شود؟
هر چند CSS grid به عنوان یکی از استانداردهای وب شناخته نشده است، اما باز هم توسط بسیاری ازمرورگرهای مطرح مثل گوگل کروم، فایرفاکس، سافاری اپل، اپرا و غیره پشتیبانی می شود. W3C مسئولیت تدوین استانداردهای جدید وب را به عهده دارد و این کنسرسیوم استفاده از CSS grid را توصیه کرده است.
CSS grid نسبت به ابزارهای قبل از خود مثل float و position در CSS که قبلا به طور گسترده توسط طراحان وب استفاده میشد، طرح بندی نامتقارن تری ارائه می کند. همینطور css grid به شما اجازه می دهد کدهای استانداردتری بنویسید که در مرورگرهای مختلف به خوبی کار کنند. این ماژول به جای تمرکز روی راه حال های پیچیده یا استفاده از ترفندهایی مثل CSS Hacks روی شفافیت طراحی تمرکز دارد.
یکی از مشکلات رایج float این است که با اضافه کردن اِلمان و محتوای جدید به یک بخش از صفحه، ممکن است لایه بندی ما به هم ریخته و کل صفحه خراب شود. این اتفاق به خاطر این رخ می دهد که اِلمان های صفحه ما از ارتفاع های مختلفی برخوردار هستند و از آنجایی که flexbox از لایه های انعطاف پذیر پشتیبانی می کند، به شما اجازه می دهد صفحات پیچیده خود را به آسانی طراحی کنید، اما مشکلات خاصی هم دارد. در بسیاری از مواقع CSS grid منعطف تر بوده و استفاده از آن راحت تر می باشد، همینطور با نوشتن کدهای کمتر می توان کار بیشتر انجام داد.
CSS grid توسط کدام مرورگرها پشتیبانی می شود؟
از اکتبر سال 2017 به بعد مرورگرهای گوگل کروم، فایرفاکس، سافاری، اپرا و مایکروسافت اج همگی از CSS grid پشتیبانی می کنند. طبق معمول IE 10 و 11 کمی از غافله عقب مانده اند. این دو نسخه از مرورگر Internet Explorer با اینکه از CSS grid پشتیبانی می کنند، اما هنوز در نمایش بخش هایی از این ماژول مشکل دارند. در موبایل هم تمام مرورگرهای مدرن چه در اندروید و چه آیفون مشکلی در نمایش CSS grid ندارند. البته به جز دو مرورگر Opera Mini و UC Browser. برنامه نویسانی وب که دوست دارند قالب آنها حتی در مرورگرهای قدیمی مثل IE هم به خوبی نمایش داده شود، می توانند از Modernizr استفاده کنند. Modernizr یک کتابخانه جاوا اسکریپت برای نمایش درست HTML5 و CSS3 در مرورگرهای مختلف است.
جمع بندی
در این مطلب بررسی کردیم CSS grid چیست و چه کاربردهایی دارد. CSS grid layout قدرتمند ترین سیستم لایه بندی در CSS است. به کمک CSS grid می توانید لایه های دوبعدی را با به خوبی طراحی کنید. منظور از لایه دو بعدی این است که می توانید هم روی سطر کار کنید هم روی ستون. برخلاف flexbox که روی طراحی تک بعدی تمرکز دارد.
منبع: سون لرن