آموزش CSS Grid

آموزش CSS Grid

گرید یک سیستم صفحه آرایی دو بعدی است که برای رفع مشکلات صفحه آرایی در طراحی واسط کاربری ساخته شده است.

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

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

گرید توانایی های جدیدی برای ما دارد که از مهمترین آنها می توان به مدیریت صفحه آرایی در دو بعد افقی و عمودی به صورت همزمان اشاره کرد.

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

سرفصل های دوره : 

معرفی دوره

ابزارهای مورد نیاز

شروع Css grid

Creating a Grid - grid-template-columns - repeat() - Gap Spacing

Row Height - grid-auto-rows - minmax()-grid-template-rows- Align & Justify

Grid Column Span - Grid Row Span-

شروع به طراحی پروژه نهایی