css grid یادگیری کامل و اسان

گرید یک سیستم صفحه آرایی دو بعدی است که برای رفع مشکلات صفحه آرایی در طراحی واسط کاربری ساخته شده است. گرید ابزاری برای چیدمان است که بر روی یک عنصر اعمال شده و سپس جایگیری، اندازه و ترازبندی فرزندان عنصر را مدیریت می کند.

ما همیشه صفحه آرایی را بواسطه عناصر و ویژگی هایی که هدف آنها بوجود آوردن صفحه آرایی نبوده است انجام می دادیم. اول از همه عناصر در جدولHTML و بعد از آن ویژگی float بودند که صفحه آرایی را از طریق آنها انجام می دادیم اما این روش ها همه یک نوع هک به حساب می آمدند چرا که هدف این عناصر و ویژگی ها کار دیگری بود.

تا اینکه بالاخره ماژولی به نام فلکس باکس بوجود آمد. بعد از فلکس باکس ماژول دیگری نیز برای صفحه آرایی معرفی شد به نام CSS Grid که باعث شد تا قدرت ما در صفحه آرایی بیشتر شود و در کنار فلکس باکس بتوانیم برای چیدمان اجزا صفحه از آن نیز استفاده کنیم.

پشتیبانی ضعیف برای لایه گرید
پشتیبانی مرورگرها از لایه های گرید خیلی ضعیف است. هیچ کدام از مرورگرها به صورت پیش فرض از گریدها پشتیبانی نمی کنند و IE فقط دستورات قدیمی را مورد پشتیبانی قرار می دهد.
برای اینکه بتوانید از نکات گفته شده در این مقاله آموزشی طراحی سایت به درستی استفاده کنید، بهتر است که فلگ “ Experimental Web Platform features" در کروم و فلگ “layout.css.grid.enabled” را در فایرفاکس فعال کنید.

Grid Item

به فرزندان مستقیم عنصر نگهدارنده گرید آیتم های گرید گفته می شود. یعنی عناصری با کلاس نکته هایی که باید در مورد آیتم های گرید در نظر بگیرید این است که به محض اینکه سیستم گرید شکل می گیرد:

• ویژگی های float و clear روی این عناصر اعمال نمی شوند. • و ویژگی vertical-align نیز تاثیری بر روی آیتم های گرید نخواهد گذاشت.

معرفی auto-fill و auto-fit

می توانیم بجای اینکه درون تابع repeat تعیین کنیم چند تکرار می خواهیم از کلمه کلیدی auto-fill و auto-fit استفاده کنیم.

auto-fill: باعث تولید خودکار ترک ها به تعدادی که از گرید سرریز نکنند می شود.
auto-fit: مشابه auto-fill عمل می کند با این تفاوت که اندازه ترک های تکراری خالی را صفر در نظر می گیرد.

فرض کنید می خواهیم گریدی داشته باشیم که در آن ستون ها حداقل اندازه 40 پیکسل داشته باشند و حداکثر اندازه 1fr که این کار را توسط تابع minmax انجام می دهیم و تعداد ستون ها را به عهده این دو کلمه کلیدی می گذاریم.

تفاوت auto-fill و auto-fit

همانطور که در تصویر زیر پیداست چون ما فقط 15 آیتم درون HTML داریم که هر کدام حداقل 40 پیسکل فضا نیاز دارند زمانی که از کلمه کلیدی auto-fill استفاده می کنیم دست به فضای باقی مانده نمی زند و در واقع ادامه فضا را هم بصورت فرضی ستون های 40 پیکسلی می چیند و چون آیتم HTMLی وجود ندارد چیزی آنجا قابل مشاهده نیست.

اما اگر از کلمه کلیدی auto-fit استفاده کنیم می دانیم که این کلمه کلیدی عرض ستون های خالی را برابر با صفر در نظر می گیرد پس در نتیجه فضای خالی باقی مانده را بین 15 عنصر با توجه به مقدار ماکزیمم در تابع minmax توزیع می کند.



https://www.aparat.com/v/MxeDG