ستون‌های متعدد

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

چیدمان چند-ستونه در CSS

چیدمان چند-ستونه (Multi-Columns) در CSS اجازه تعریف ساده ستون‌های متعددی از متن، همانند روزنامه را به ما می‌دهد:[۱]

ویژگی های چند-ستونه در CSS

در این فصل در مورد ویژگی‌های زیر مطالبی را خواهید آموخت:

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

پشتیبانی مرورگرها

اعداد موجود در جدول مشخص کننده اولین نسخه مرورگرها است که به‌طور کامل از این ویژگی پشتیبانی می‌کنند.

ویژگی Chrome Internet Explorer / Edge Firefox Safari Opera
column-count ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰
column-gap ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰
column-rule ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰
column-rule-color ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰
column-rule-style ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰
column-rule-width ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰
column-span ۵۰٫۰ ۱۰٫۰ ۷۱٫۰ ۹٫۰ ۳۷٫۰
column-width ۵۰٫۰ ۱۰٫۰ ۵۲٫۰ ۹٫۰ ۳۷٫۰

ساخت چند ستون در CSS

ویژگی column-count مشخص کننده تعداد ستون‌هایی است که یک عنصر می‌بایست به آن تقسیم شود.

مثال زیر متن درون عنصر <div> را به سه ستون تقسیم خواهد کرد:

مثال
div {
  column-count: 3;
}


مشخص کردن فاصلهٔ بین ستون ها در CSS

ویژگی column-gap مشخص کننده فاصلهٔ بین ستون هاست.

مثال زیر یک فاصله ۴۰ پیکسلی را بین ستون‌ها تعیین می‌کند.

مثال
div {
  column-gap: 40px;
}


خطوط ستون در CSS

ویژگی column-rule-style استایل خطوط بین ستون‌ها را مشخص می‌کند:

مثال
div {
  column-rule-style: solid;
}


ویژگی column-rule-width عرض خطوط بین ستون‌ها را مشخص می‌کند:

مثال
div {
  column-rule-width: 1px;
}


ویژگی column-rule-color رنگ خطوط بین ستون‌ها را مشخص می‌کند:

مثال
div {
  column-rule-color: lightblue;
}


ویژگی column-rule یک ویژگیمختصر برای تنظیم تمامی ویژگی‌های column-rule-* ذکر شده در بالا است.

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

مثال
div {
  column-rule: 1px solid lightblue;
}


مشخص کردن اینکه هر عنصر باید به اندازه چند ستون گسترش یابد

ویژگی column-span مشخص می کند یک عنصر به اندازه چند ستون گسترش می یابد.

مثال زیر مشخص می‌کند که عنصر <h2> می‌بایست به اندازه همه ستون ها گسترش یابد:

مثال
h2 {
  column-span: all;
}


مشخص کردن عرض ستون

ویژگی column-width مشخص کننده عرض پیشنهادی، بهینه برای ستون‌ها است.

مثال زیر مشخص می‌کند که اندازه عرض پیشنهادی، مناسب برای ستون‌ها می‌بایست ۱۰۰ پیکسل باشد:

مثال
div {
  column-width: 100px;
}


ویژگی های ستون های متعدد در CSS

جدول زیر تمامی ویژگی‌های ستون‌های متعدد را لیست می‌کند.

ویژگی توضیحات
column-count تعداد ستون‌هایی را که یک عنصر می‌بایست به آن تقسیم شود را مشخص می‌کند
column-fill نحوه پر شدن ستون‌ها را مشخص می‌کند
column-gap فضای بین ستون‌ها را مشخص می‌کند
column-rule یک ویژگی مختصر برای تنظیم تمامی ویژگی‌های column-rule-*
column-rule-color رنگ خطوط بین ستون‌ها را مشخص می‌کند
column-rule-style استایل خطوط بین ستون‌ها را مشخص می‌کند
column-rule-width عرض خطوط بین ستون‌ها را مشخص می‌کند
column-span مشخص کننده تعداد ستون‌هایی است که یک عنصر می‌بایست آن را دربرگیرد
column-width میزان عرض پیشنهادی، مناسب را برای ستون‌ها مشخص می‌کند
columns یک ویژگی مختصر برای تنظیم ویژگی‌های column-width و column-count


منابع آموزشی