**مهارت‌های لازم:**
+ آشنایی با `CSS`
--------------------------------------------------
در این سوال قصد داریم ستون‌های واکنش‌گرا طراحی کنیم.
با تغییر اندازه‌ی عرض این صفحه، اندازه این ستون‌ها با توجه به کلاس و اندازه صفحه تغییر می‌کند.
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/ZFganfoDwi/responsive-column.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
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
```
<details class="blue">
<summary>
توضیحات تست نمونه
</summary>
برای این سوال تست‌هایی با استفاده از زبان پایتون و با کمک `selenium` نوشته شده است. یک نمونه از این تست‌ها در اختیار شما قرار دارد و شما می‌توانید آن را با کمک دستور زیر اجرا کنید. تست‌های نمونه این سوال را می‌توانید از [اینجا](https://quera.ir/qbox/download/5gTsCJQ3FD/sample_test%20(1).py) دانلود کنید.
```
python3 -m unittest sample_test.py
```
</details>