مفاهیم پایه طراحی با CSS Multicol
سلام! اگر به دنبال روشی هستید که محتواهای طولانی و متن‌های خود را به صورت زیباتر و مرتب‌تری نمایش دهید، طرح‌بندی چندستونی (multicol) در CSS گزینه بسیار خوبی است. این ویژگی به ما این امکان را می‌دهد تا متن‌های خود را در چند ستون واکشی کنیم، مشابه نرمی دفته در روزنامه‌ها و مجلات.
طرح‌بندی چندستونی با استفاده از CSS، بدون نیاز به استفاده از چهارچوب‌های (framework) دیگر، به راحتی قابل پیاده‌سازی است و کد نویسی آن نسبتاً ساده می‌باشد. فقط کافی است که عناصر مناسب را انتخاب کرده و ویژگی‌های مرتبط با ستون‌ها را تنظیم کنیم.
یکی از ویژگی‌هایی که برای اینکار وجود دارد، column-count است که تعداد ستون‌هایی که می‌خواهید داشته باشید را تعیین می‌کند. برای مثال، اگر column-count: 3; را اضافه کنیم، محتوای ما در سه ستون نمایش داده می‌شود.
علاوه بر این، ما می‌توانیم از ویژگی‌های دیگری مثل column-gap برای تعیین فاصله بین ستون‌ها و یا column-width برای تعیین عرض هر ستون استفاده کنیم و طراحی انعطاف‌پذیر و متنوع‌تری داشته باشیم.
استفاده از روش چندستونی باعث می‌شود متن‌ها در صفحه‌های بزرگ‌تر بهتر و زیباتر به نمایش دربیایند و کمک می‌کند که کاربران از اسکرول‌های طولانی و ملال‌آور نجات پیدا کنند.
نمونه کد CSS برای طرح‌بندی چندستونی
.text {
column-count: 3;
column-gap: 20px;
column-width: 100px;
}
توضیح خط به خط کد
.text: این کلاس به عنصر HTML ما اعمال می‌شود که قصد داریم طرح‌بندی چندستونی را روی آن اجرا کنیم.column-count: 3;: تعداد ستون‌ها را سه عدد انتخاب می‌کند.column-gap: 20px;: فاصله بین هر ستون را بیست پیکسل تعیین می‌کند.column-width: 100px;: عرض هر ستون را صد پیکسل تعیین می‌کند.