آموزش Multi-column در CSS

یکی از مباحث آموزشی جذاب در بحث طراحی با CSS می‌تواند مبحث Multi-column باشد . این بخش بروی متن‌های سایت شما تغییرات جالبی را اعمال خواهد کرد که البته باوجود اینکه بیشتر کارائی آن در بخش نظم دهی به متن ها است ، در زمینه ستون بندی داخل طراحی نیز گاها مورد استفاده قرار خواهد گرفت .

این بخش یعنی Multi-column شامل چندین زیربخش است که باید با تمامی آنها آشنایی داشته باشید تا بتوانید طبق طرحی که مدنظر دارید ، طراحی خود را انجام دهید . بخش Multi-column شامل بخش‌های زیر است :

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

هریک از این دستورات ، بخشی از طراحی شما را شامل خواهند شد . در ادامه بصورت مجزا هریک از این دستورات را بررسی می‌کنیم .

دستور column-count

این دستور اولین فاکتوری است که باید استفاده کنید تا مشخص کنید که div شما باید شامل چند ستون باشد و محتوای داخل آن در چند ستون بصورت تقریبا مساوی تقسیم شود ! به مثال زیر دقت کنید :

column-count: 3;

اکنون خروجی این دستور برای div زیر را مشاهده کنید :

همانطور که مشاهده می‌کنید ، متن شما بصورت مساوی در 3 ستون تقسیم شده است . توجه داشته باشید که متون بصورت ستونی هستند یعنی ابتدا ستون اول پر می‌شود و سپس ادامه متن به ستون دوم منتقل می‌شود و به همین ترتیب تا ستون آخر !

دستور column-gap

دستور column-gap فاصله بین ستون‌ها با یکدیگر را تنظیم خواهد کرد . در مثال بالا فاصله بین ستون ها بصورت پیشفرض تنظیم شده است . درحالیکه می‌توانیم تعیین کنیم فاصله جداکننده بین هر ستون با ستون دیگر چه مقداری باشد . به مثال زیر توجه کنید :

column-gap: 40px;

خروجی بصورت زیر خواهد بود :

همانطور که مشاهده می‌کنید فاصله بین ستون‌ها نسبت به مثال بالا در بخش column-count کمی بیشتر شد . پس می‌توانیم از این ویژگی نیز استفاده کنیم .

دستور column-rule-style

به کمک این دستور می‌توانید برای فاصله بین ستون‌ها یک border تنظیم کنید . یعنی بجای فضای خالی بین هر ستون ، از یک border استفاده شود . به مثال زیر توجه کنید :

column-rule-style: solid;

خروجی بصورت زیر خواهد بود :

دقت داشته باشید که در این مقال برای div از هر سه دستور column-count و column-gap و column-rule-style درکنار هم استفاده شده است . می‌توانید نوع solid را به dashed یا dotted نیز تغییر دهید .

دستور column-rule-width

اگر تا اینجای مقاله را بخوبی مطالعه کرد باشید ، حتما می‌توانید حدس بزنید که ویژگی column-rule-width چه کاری انجام خواهد داد . ویژگی column-rule-width اندازه عرض یا همان صخامت border هایی که در بالا تنظیم کردیم را تعیین خواهد کرد . لذا خودتان این ویژگی را تست کرده و نتیجه را مشاهده کنید .

دستور column-rule-color

قطعا اکنون اطلاع دارید که این دستور نیز چه کاری انجام خواهد داد . این دستور رنگ مشکی پیشفرض border بین ستون را تغییر خواهد داد لذا این دستور را برای مثال خودتان تست و نتیجه را بررسی کنید .

دستور column-rule

دستور column-rule یک دستور جامع و کلی برای column-rule-style و column-rule-width و column-rule-color است . یعنی می‌توانید داخل یک دستور بصورت زیر :

column-rule: 1px solid lightblue;

هر سه ویژگی را در یک دستور داشته باشید و خروجی بگیرید . بخش Multi-column یکی از قسمت‌های جذاب در زبان طراحی CSS است که بسته به پروژه و نیاز طراح می‌توان از آن استفاده کرد اما باید دقت داشته باشید که استفاده از این ویژگی برای پروژه‌های عادی و شناخته شده شاید وجه خوبی را ایجاد نکند لذا بصورت دقیق و بجا از آن استفاده کنید .

دستور column-width

این دستور کامل مشخص است و شما می‌توانید توسط این بخش ، عرض هر ستون را تنظیم کنید . برای مثال :

column-width: 100px;

اگر قصد داشتید تا تعداد ستون‌ها یا به عبارتی مقادیر column-count در موبایل بصورت 1 ستون نمایش داده شود ، می‌توانید با استفاده از دستور media و حالت min-width بروی این بخش کار کنید . به مثال زیر دقت کنید :

@media only screen and (min-width:767px){
	column-count: 3;
	column-gap: 40px;
	column-rule: 1px solid lightblue;
}

در این حالت شما از عرض 767 پیکسل به بالا شاهد اجرای دستورات بخش Multi-column هستید و لذا در قسمت واکنشگرایی هم مشکلی نخواهید داشت .

دستور column-span

دستور column-span برای بخشی است که شما از یک عنوان داخل محتوای خود استفاده کنید . مثلا از یک تگ h3 ! برای اینکه تگ h3 شما در ستون اول حبس نشده و در بخش بالای متن ، سراسر ستون‌ها را پوشش دهد ، می‌توانید برای h3 داخل متن که عنوان شما است ، از دستور column-span استفاده کنید . به مثال زیر دقت کنید :

h3.columns { column-span: all; }

خروجی بصورت زیر است :

همانطور که مشاهده می‌کنید ، عنوان ما از ستون‌ها خارج شده است ، درحالیکه توقع داشتیم در ستون اول محصور شود اما طبق دستور column-span با مقدار all ، عنوان شما در بالای تمام ستون‌ها تکرار می‌شود . امیدواریم این مقاله برای شما مفید بوده باشد . پاینده باشید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا