چند ستونه (Multiple Columns)
چندستونه (Multi-column) یعنی متن به چند ستون تقسیم شود. مثل روزنامه مدرسه. با چند خاصیت ساده CSS، این کار سریع و واکنش گرا می شود.
شروع سریع با column-count
خاصیت «column-count» تعداد ستون ها را مشخص می کند. هرچه عدد بیشتر، ستون های بیشتر.
div {\n column-count: 3;\n}\n
فاصله بین ستون ها با column-gap
«column-gap» فاصله بین ستون هاست. مثل فاصله نیمکت ها در کلاس.
div {\n column-gap: 40px;\n}\n
خط جداکننده بین ستون ها (column-rule)
برای خط عمودی میان ستون ها از «column-rule-*» استفاده کن. استایل، پهنا و رنگ را جدا یا خلاصه بده.
div {\n column-rule-style: solid;\n}\n
div {\n column-rule-width: 1px;\n}\n
div {\n column-rule-color: lightblue;\n}\n
div {\n column-rule: 1px solid lightblue;\n}\n
سرتیترِ عریض با column-span
«column-span» می گوید عنصر روی چند ستون بیاید. مقدار «all» یعنی روی همه ستون ها.
h2 {\n column-span: all;\n text-align: center;\n}\n
عرض پیشنهادی ستون با column-width
«column-width» عرضِ پیشنهادی هر ستون است. مرورگر بر اساس فضا، تعداد ستون ها را حساب می کند.
div {\n column-width: 100px;\n}\n
گام های عملی
- یک div متن دار بساز.
- column-count یا column-width را تنظیم کن.
- برای فاصله از column-gap کمک بگیر.
- با column-rule ظاهرش را حرفه ای کن.
- تیتر را با column-span: all عریض کن.
جمع بندی سریع
- column-count تعداد ستون ها را می سازد.
- column-gap فاصله بین ستون هاست.
- column-rule خط عمودی میان ستون هاست.
- column-span تیتر را روی همه ستون ها می آورد.
- column-width تعداد ستون ها را خودکار تعیین می کند.
مطالعه مرتبط: صفحه بندی برای ناوبری محتوای چندبخشی، و رابط کاربری برای جزییات تعاملی.