مهارت‌های لازم:

• آشنایی با CSS

در این سوال قصد داریم ستون‌های واکنش‌گرا طراحی کنیم. با تغییر اندازه‌ی عرض این صفحه، اندازه این ستون‌ها با توجه به کلاس و اندازه صفحه تغییر می‌کند.

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

responsive-column
├── index.html
└── styles.css

جزئیات

کلاس‌های زیر را با توجه به توضیحات گفته شده پیاده سازی نمائید.

• کلاس row: یک ردیف در صفحه ایجاد می‌کند.در هر ردیف حداکثر ۶ ستون و حداقل ۱ ستون قرار می‌گیرد.
• کلاس col: همواره ستون‌هایی با عرض یکسان ایجاد می‌کند. به عبارتی اگر در داخل یک تگ div با کلاس row چند تگ divبا کلاس col وجود داشته باشد، عرض همه تگ‌های div با کلاس col یکسان است.
• کلاس col-n: عرض عنصر را به میزان $n$ واحد از عرض عنصر parent تنظیم می‌کند.
• کلاس col-sm-n: همانند کلاس col-n، با فرق اینکه این کلاس هنگامی که عرض صفحه از 576px بزرگتر باشد روی عنصر اعمال می‌شود.
• کلاس col-md-n: همانند کلاس col-n، با فرق اینکه این کلاس هنگامی که عرض صفحه از 768px بزرگتر باشد روی عنصر اعمال می‌شود.
• کلاس col-lg-n: همانند کلاس col-n، با فرق اینکه این کلاس هنگامی که عرض صفحه بزرگتر از 992px باشد روی عنصر اعمال می‌شود.

نکات

• توجه کنید که اولویت اعمال همیشه برای کلاس‌هایی است که در media-query بالاتر قرار دارند.
• همچنین در صورتی که عرض صفحه خارج از محدوده‌ی یک کلاس قرار بگیرد، عرض المانی که دارای آن کلاس است 100% می‌شود. به عبارتی اگر یک المان دارای کلاس col-lg-nباشد در صفحه با عرض کمتر از 992px، در صورتی که این المان دارای کلاس دیگری نباشد، عرض آن 100% می‌شود.
• توجه کنید که داوری خودکار بر مبنای نام کلاس‌ها انجام می‌شود.
• پروژه را با ساختار زیر ارسال کنید. ‍‍‍‍

[your-zip-file-name].zip
└── styles.css

python3 -m unittest sample_test.py