آشنایی با CSS Grid

آنچه یاد خواهید گرفت:

• بررسی Grid
• چگونه از ویژگی‌های مختلفی که به یک parent grid container اعمال می‌شوند، استفاده کنید؟
• چگونه از ویژگی‌های مختلفی که به یک child grid item اعمال می‌شوند، استفاده کنید؟
• چگونه از اصول Grid برای طراحی یک صفحه وب HTML استفاده کنید؟

پیش نیازهای دوره

• درک اولیه از HTML و CSS
• یک مرورگر وب مورد نیاز است. ما از گوگل کروم استفاده خواهیم کرد و اغلب از ابزارهای توسعه‌دهنده کروم بهره خواهیم برد.
• یک ویرایشگر کد مورد نیاز است. ما از VS Code با افزونه Live Server استفاده خواهیم کرد.

توضیحات دوره

هدف این دوره کمک به شما در ارتقای طراحی صفحات وب HTML خود با اعمال بسیاری از ویژگی‌های ارائه شده توسط مدل طرح‌بندی Grid است. در این دوره، ما هم ویژگی‌هایی را که می‌توانند به یک parent grid container اعمال شوند و هم ویژگی‌هایی را که می‌توانند به یک child grid item اعمال شوند، بررسی خواهیم کرد.

ویژگی‌های parent grid container که در این دوره به آن‌ها پرداخته خواهد شد عبارتند از:

• Grid Template Columns: بیاموزید چگونه با استفاده از این ویژگی، ستون‌های صریح را در Grid خود تعریف کنید.
• Grid Template Rows: بیاموزید چگونه با استفاده از این ویژگی، ردیف‌های صریح را در Grid خود تعریف کنید.
• Grid Auto Rows: درک کنید چگونه با استفاده از این ویژگی، ردیف‌های ضمنی ایجاد کنید.
• Grid Auto Columns: درک کنید چگونه با استفاده از این ویژگی، ستون‌های ضمنی ایجاد کنید.
• Grid Auto Flow: بیاموزید چگونه از این ویژگی برای کنترل جریان Grid استفاده کنید.
• Grid Column Gap: بیاموزید چگونه از این ویژگی برای افزودن فاصله بین ستون‌های داخل Grid استفاده کنید.
• Grid Row Gap: بیاموزید چگونه از این ویژگی برای افزودن فاصله بین ردیف‌های داخل Grid استفاده کنید.
• Grid Gap: درک کنید چگونه از این ویژگی مختصر برای تعریف فاصله بین ردیف‌ها و ستون‌های داخل Grid استفاده کنید.
• Grid Template Areas: کشف کنید چگونه مناطق را در طرح‌بندی Grid خود تعریف کنید.
• Grid Template: کشف میانبری برای اعمال ویژگی‌های grid-template-rows و grid-template-columns و grid-template-areas
• Grid: کشف میانبری برای اعمال تمام ویژگی‌های ضمنی و صریح در یک اعلان واحد
• Justify Items: درک کنید چگونه آیتم‌های Grid را به صورت افقی در داخل یک سلول Grid قرار دهید.
• Align Items: درک کنید چگونه آیتم‌های Grid را به صورت عمودی در داخل یک سلول Grid قرار دهید.
• Place Items: کشف میانبری برای اعمال ویژگی‌های justify-items و align-items در یک اعلان واحد
• Justify Content: بیاموزید چگونه ستون‌ها را به صورت افقی در داخل ظرف Grid قرار دهید.
• Align Content: بیاموزید چگونه ردیف‌ها را به صورت عمودی در داخل ظرف Grid قرار دهید.
• Place Content: کشف میانبری برای اعمال ویژگی‌های justify-content و align-content در یک اعلان واحد

ویژگی‌های child grid item که در این دوره به آن‌ها پرداخته خواهد شد عبارتند از:

• Grid Column Start And End: کشف کنید چگونه با تعیین مقادیر شروع و پایان ستون Grid، اندازه آیتم‌های Grid را تعیین کنید.
• Grid Row Start And End: کشف کنید چگونه با تعیین مقادیر شروع و پایان ردیف Grid، اندازه آیتم‌های Grid را تعیین کنید.
• Grid Row/Grid Column: بررسی ویژگی‌های مختصر grid-row و grid-column
• Grid Area: بیاموزید چگونه از این ویژگی برای تعریف مکان و اندازه آیتم Grid استفاده کنید.
• Justify Self: درک کنید چگونه از این ویژگی برای تراز کردن افقی یک آیتم Grid در داخل یک سلول Grid استفاده کنید.
• Align Self: درک کنید چگونه از این ویژگی برای تراز کردن عمودی یک آیتم Grid در داخل یک سلول Grid استفاده کنید.
• Order: بیاموزید چگونه از این ویژگی برای کنترل ترتیب آیتم‌های Grid در داخل یک Grid استفاده کنید.

این دوره همچنین به ریاضیات مربوط به استفاده از ویژگی‌هایی مانند grid-template-columns و grid-template-rows خواهد پرداخت تا شما دقیقاً بدانید که چگونه اندازه‌های مسیری که برای این ویژگی‌ها تعریف می‌کنید بر اندازه آیتم‌های Grid شما تأثیر می‌گذارد.

این دوره برای چه کسانی مناسب است؟

• توسعه‌دهندگانی که می‌خواهند دانش CSS خود را با یادگیری CSS Grid گسترش دهند.
• توسعه‌دهندگانی که می‌خواهند صفحات وب HTML خود را با استفاده از مدل طرح‌بندی CSS Grid طراحی کنند.