ستون های چندگانه CSS (CSS Multiple Columns)
در این راهنما «ستون های چندگانه CSS» را مرور می کنیم. ماژول چندستونه اجازه می دهد متن را مانند روزنامه ها به چند ستون تقسیم کنید. سپس ویژگی های کلیدی مانند column-count
، column-gap
، قوانین عمودی، column-span
و column-width
را طبق منبع بررسی می کنیم.
ایجاد ستون های چندگانه
با ویژگی column-count
مشخص می کنید یک عنصر به چند ستون تقسیم شود. مثال منبع نشان می دهد که مقدار 3
متن داخل div
را به سه ستون می شکند.
فاصله بین ستون ها
برای تنظیم فاصله، از column-gap
استفاده کنید. در نمونه، فاصله 40px
بین ستون ها تعیین شده است.
خطِ جداکننده عمودی ستون ها (Column Rule)
خصوصیات column-rule-style
، column-rule-width
و column-rule-color
به ترتیب سبک، پهنا و رنگ خط بین ستون ها را تعیین می کنند. همچنین column-rule
میان بُر هر سه ویژگی است.
گسترده کردن یک عنصر روی همه ستون ها
برای تیترها می توانید از column-span
بهره ببرید تا مثلاً عنصر h2
روی «همه ستون ها» قرار گیرد و در مرکز چینش شود.
عرض پیشنهادی هر ستون
با column-width
عرض بهینه هر ستون پیشنهاد می شود. سپس مرورگر با توجه به فضا، تعداد ستون ها را تعیین می کند.
لیست ویژگی های ستون های چندگانه
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
نکته: برای جلوگیری از شلوغی بصری، فاصله ستون ها و ضخامت خط جداکننده را متعادل انتخاب کنید تا خوانایی افت نکند.
مطالعه بیشتر درباره ستون های چندگانه CSS
برای ناوبری صفحات، صفحه صفحه بندی با CSS را ببینید. همچنین پس از چیدمان چندستونه، تعاملات رابط را در رابط کاربری با CSS بررسی کنید.
MDN: CSS Multi-column Layout و MDN: column-count برای مرجع ویژگی ها مفید هستند.