آموزش CSS: طرح‌بندی‌های پیشرفته با گرید

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

مقدمه Introduction

• آنچه شما باید بدانید What you should know

• به CSS Grid خوش آمدید Welcome to CSS Grid

• استفاده از GitHub Codespaces با این دوره Using GitHub Codespaces with this course

1. CSS Grid: مفاهیم اصلی 1. CSS Grid: Core Concepts

• CSS Grid چیست؟ What is CSS Grid?

• اصطلاحات شبکه Grid terminology

• خطوط شبکه نامگذاری شده است Named grid lines

• خطوط و واحدهای شبکه Grid lines and units

• شکاف شبکه Grid gap

• مناطق شبکه Grid areas

• تراز شبکه Grid alignment

• قرار دادن اقلام شبکه ای Placing grid items

• یک شبکه ایجاد کنید Create a grid

2. برنامه ریزی برای طرح بندی شبکه 2. Planning for Grid Layouts

• استفاده از ژنراتورهای شبکه Using Grid generators

• ملاحظات دسترسی Accessibility considerations

• رویکرد اول موبایل Mobile-first approach

• طراحی طرح بندی با قلم و کاغذ Drawing layouts with pen and paper

• چه زمانی از Grid استفاده کنیم؟ When to use Grid?

3. طرح چند ستونی 3. Multi-Column Layout

• امتیاز: Refactor با استفاده از مناطق شبکه Bonus: Refactor using grid areas

• قرار دادن آیتم در شبکه دستی Manual grid item placement

• آنچه شما ایجاد می کنید: یک طرح چند ستونی What you're creating: A multi-column layout

• شبکه اصلی را ایجاد کنید Create the main grid

• مروری بر نقطه شروع Overview of the starting point

• شبکه را توجیه کنید Justify the grid

• ستون سوم را برای نمای گسترده تر اضافه کنید Add third column for wider viewports

4. Full-Bleed Layout 4. Full-Bleed Layout

• ستون ها و موارد شبکه موقعیت را تعریف کنید Define columns and position grid items

• آنچه شما ایجاد می کنید: یک طرح بندی کامل What you're creating: A full-bleed layout

• شبکه مشترک را ایجاد کنید Create the shared grid

• مروری بر نقطه شروع Overview of the starting point

5. طرح بندی کارت بسیار یکنواخت 5. A Very Uniform Card Layout

• برای هر کارت شبکه ایجاد کنید Create grid for each card

• نمای کلی از نشانه گذاری کارت و سبک های شروع Overview of card markup and starter styles

• آنچه شما ایجاد می کنید: یک طرح کارت یکنواخت What you're creating: A uniform card layout

• شبکه اصلی را تعریف کنید Define the main grid

6. طرح بندی کارت متغیر 6. A Variable Card Layout

• شبکه اصلی را تعریف کنید Define the main grid

• کارت ها را روی شبکه قرار دهید Place cards on the grid

• برای هر کارت شبکه ایجاد کنید Create grid for each card

• آنچه شما ایجاد می کنید: یک طرح کارت متغیر What you're creating: A variable card layout

• مطمئن شوید که پاسخگو است Make sure it's responsive

• موارد را در شبکه کارت قرار دهید Position items within the card grid

• مروری بر نشانه گذاری کارت Overview of card markup

7. چیدمان نامتقارن یا شکسته 7. Asymmetrical or Broken Layout

• اولین شبکه تودرتو را ایجاد کنید Create the first nested grid

• دومین شبکه تودرتو ایجاد کنید Create the second nested grid

• مروری بر نقطه شروع Overview of the starting point

• آنچه شما ایجاد می کنید: یک طرح نامتقارن What you're creating: An asymmetrical layout

• طرح شبکه اولیه را تعریف کنید Define the primary grid layout

نتیجه گیری Conclusion

• مراحل بعدی Next steps