ستون های CSS

ستون های CSS به ایجاد یک طرح ستون انعطاف پذیر برای صفحه وب شما اشاره دارند. همچنین می توان تعداد ستون ها و عرض ستون CSS را مشخص کرد.

ایجاد طرح بندی ستون

خاصیت مختصر ستون های CSS برای تعریف تعداد ستون ها و عرض آن ها در یک اعلامیه است. عرض ستون و تعداد ستون ها را می توان جداگانه نیز اعلام کرد.

مثال زیر محتوای متن را با استفاده از خاصیت longhand-count ستون به چهار ستون جداگانه تقسیم می کند:

.col {
    column-count: 4;  
}

مثال زیر با استفاده از مختصر ستون های CSS هر دو ویژگی را در یک تعریف تنظیم می کند. طرح ستون CSS 3 و دیگری را با چهار ستون تنظیم می کنیم:

.news1 {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}

.news2 {
    -webkit-columns: 50px 4; /* Chrome, Safari, Opera */
    -moz-columns: 50px 4; /* Firefox */
    columns: 50px 4;
}

مثال کد زیر یک طرح دو ستونی CSS ایجاد می کند:

div {
 -webkit-columns: auto 2;/* Chrome, Safari, Opera */
 -moz-columns: auto 2; /* Firefox */ 
 columns: auto 2;
}

توجه: -webkit- برای اطمینان از ارائه صحیح ستونها در CSS در Opera ، Chrome و Safari است. -moz- تضمین می کند که firefox آنها را به درستی ارائه می دهد.

فاصله بین ستون ها

خاصیت ستون شکاف فاصله ای بین ستون ها ایجاد می کند. می توانید مقدار آن را با استفاده از شاخص های طول منظم (pt ، px ، cm و غیره) یا کلمه کلیدی عادی (فاصله 1 em) توصیف کنید.

مثال CSS زیر نحوه اعمال فاصله 55 پیکسل را بین ستون ها نشان می دهد:

.col {
    column-gap: 55px;  
}

توجه: شکافهای موجود در ستونها در CSS محتوای ستون را فشار می دهد تا فضای بیشتری ایجاد کند.

خطوط عمودی بین ستون ها

column-law ویژگی مختصر برای افزودن تقسیم کننده های عمودی بین ستون ها است. این سبک ستون-قاعده ، ستون-قاعده-عرض و ستون-قانون-رنگ را در یک اعلامیه تعریف می کند:

.col {
    column-rule: 2px solid blue;  
}

• column-rule-style: سبک خط را تنظیم می کند (جامد ، نقطه چین ، تکه تکه و غیره).
• column-rule-width: ضخامت خط را تنظیم می کند (کلمه کلیدی مانند نشانگرهای نازک یا طولی مانند 9px).
• column-rule-color: رنگ خط را تنظیم می کند.

در مثال زیر ، سبک روی جامد تنظیم شده است:

.col {
    column-rule-style: solid;
}

مثال بعدی عرض قانون را روی 2px تنظیم می کند:

.col {
    column-rule-width: 2px;
}

مثال زیر تقسیم کننده های ستون CSS آبی را ایجاد می کند:

.col {
    column-rule-color: blue;  
}

توجه: تقسیم کننده های ستون های CSS فضا را نمی گیرند. بنابراین ، محتوا تحت فشار قرار نمی گیرد.

عناصر پوشاننده در ستون ها

دامنه عناصر در ستون ها امکان پذیر است. دهانه ستون دارای دو مقدار است:

• all: عناصر در ستونها گسترش می یابند.
• هیچکدام: زمانی تنظیم کنید که برای جلوگیری از پوشاندن عناصر لازم باشد.

مثال زیر <h1> را به عنوان عنصر دهانه تنظیم می کند:

h1 {  	     	
    column-span: all;  
}

تنظیم عرض ستون

عرض ستون CSS یک عرض منحصر به فرد برای همه ستون ها تعیین می کند. سپس مرورگرها تعیین می کنند که چند ستون می تواند در عرض مشخص شده جای گیرد.

اگر عرض ستون CSS برای قرار گرفتن حداقل دو ستون بسیار کم باشد ، محتوا در یک ستون ارائه می شود.

این مثال تعیین می کند که عرض پیشنهادی ستون ها 150 پیکسل باشد:

.col {  	     	
    column-width: 250px;  
}

تنظیم نحوه پر کردن محتوا در ستون ها

پر کردن ستون برای ترتیب و متعادل سازی محتوا در ستون ها است. این دو مقدار را می پذیرد:

• تعادل: هر ستون دارای همان مقدار محتوا است (نمی تواند از قد مشخص شده بلندتر شود).
• auto: محتوای ستون ها را مرتب می کند تا زمانی که به ارتفاع برسد. این عمل تا پایان محتوا انجام می شود.

توجه: ستون پر کردن از پشتیبانی مرورگری ضعیفی برخوردار است و در حال حاضر فقط در Firefox کار می کند.

لیست کامل خواص ستون ها

این جدول به سرعت ویژگی های یک ستونی را که CSS ارائه می دهد به شما معرفی می کند:

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

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.