آشنایی با Css Grid Layout - قسمت اول

image post

آشنایی با Css Grid Layout - قسمت اول

آشنایی با Css Grid Layout :

ما همیشه از css برای ساخت layout وب سایت استفاده می کردیم اما css هیچ گاه راه حل دائمی به ما ارائه نکرده است

در ابتدا از table استفاده میکردیم سپس به سراغ float و position رفتیم اما همه این روش ها درواقع راه حل های غیر مستقیم بودند که با آنها ساختار وب سایت را شکل میدادیم , البته در سال های اخیر Flexbox هم کمک شایانی به ما کرد اما Flexbox برای ساخت ساختار های یک بعدی به کار می آمد نه ساختار های دو بعدی پیچیده در طراحی وب سایت ها اما Css Grid Layout یک راه حل نهایی و تمام عیار برای ساخت ساختار وب سایت می باشد و با استفاده از آن مستقیما به هدف خود میرسیم و درگیر پیچیدگی های float position و flex نمی شویم !

در Css Grid Layout دقیقا ساختار شبکه ای همانند فریم ورک بوت استرپ را داریم اما این ساختار بدون کد های اضافه css و با دستورات جدید بصورت مستقیم ایجاد میشوند !

برای مثال با دستور زیر یک container تعریف میکنیم :

display: grid

و با دستورات grid-template-columns و grid-template-rows سطرح ها و ستون های داخل container را ایجاد می نماییم !

برای ساخت فرزندان در row ها و columns ها از grid-column و grid-row استفاده می کنیم .

اگر دقت کنید با دستورات بالا میتوان بدون استفاده از فریم ورک ها و media query و دستورات اضافه یک سایت Responsive تمام عیار با چند خط کد ساده css بسازید !

پشتیبانی در مرورگر های مختلف :

Desktop

Google Chrome Mozilla Firefox Internet Explorer Opera Apple Safari
57 52 10* 44 10.

Mobile / Tablet

iOS Safari Android Opera Mobile Android Chrome Android Firefox
10. No No 57 52

شاید بسیاری از مرورگر ها از Css Grid Layout پشتیبانی نکنند اما بخاطر داشته باشید ممکن است زمان استفاده از آن در کار آینده باشد اما زمان یادگیری آن امروز است !

ساخت Grid Container :

در سیستم Grid یک تگ باید parent تمامی تگ های Grid باشد این تگ با دستور css زیر مشخص می گردد :

display: grid

نمونه کد از ساخت Container :

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid Item :

به فرزندان مستقیم Grid Container میگوییم Grid Item در مثال پایین تگ هایی با کلاس item درواقع grid Item محسوب میشوند اما تگ با کلاس sub-item چون فرزند مستقیم container نیست یک Grid Item به حساب نمی آید !

ادامه در قسمت دوم ...

 

دنیس ریچی : یونیکس بسیار ساده هست، تنها یک نابغه باید باشید تا بتوانید سادگی آن را درک کنید.