column-gap

ویژگی column-gap فاصله یا گپ بین ستون های یک چیدمان چند ستونی که بوسیله ماژول چیدمان چندستونی بوجود آمده است را تعیین می کند.

با توجه به فضای موجود عنصر و اندازه های ستون ها گاهی امکان دارد تا مرورگر اندازه ستون ها را کاهش دهد، احتمال اینکه این کاهش بر روی اندازه گپ ها نیز تاثیر بگذارد وجود دارد.

اگر column rule بین ستون ها وجود داشته باشد (خطی است که بین ستون ها رسم می شود تا ستون ها را از نظر دیداری از هم جدا کند) این خط وسط گپ و فاصله بین ستون ها قرار می گیرد و هیچ فضایی را اشغال نمی کند این یعنی اندازه گپ را تحت تاثیر قرار نمی دهد.

مقادیر ویژگی column-gap

column-gap: normal | <length>

<length>

می توان به این ویژگی با واحدهای مختلف طولی مقدار داد و فاصله بین ستون ها را مشخص کرد. به عنوان مثال فرض کنید فاصله بین ستون ها را برابر با 2em قرار دهیم:

.example {
  column-width: 12em;
  column-gap: 2em;
}  

این بدین معنی است که عرض ستون ها حداقل 12em خواهد بود، همچنین با توجه به فضای موجود می توانند بیشتر از 12em باشند. و در آخر اگر فضای موجود کمتر از 12em باشد یک ستون خواهیم داشت که کل فضای موجود را در بر خواهد گرفت. و فاصله بین ستون ها باید برابر با 2em باشد مگر اینکه با توجه به تغییرات فضای موجود این مقدار تحث تاثیر قرار گیرد و کوچک تر شود.

مثال های زیر نیز مقادیر معتبر را برای این ویژگی نشان می دهند:

column-gap: 3em;
column-gap: 20px;
column-gap: 10%;
column-gap: 2pt;

normal

normal مقدار اولیه ویژگی column-gap می باشد و باعث می شود تا مرورگر یک اندازه پیشفرض برای فاصله بین ستون ها در نظر بگیرد. (اندازه 1em اندازه استاندارد است اما شاید مرورگری اندازه پیشفرض مخصوص به خود را داشته باشد)

مثال

در دموی زیر اندازه ویژگی column-gap را برابر با 4em در نظر گرفته ایم:

See the Pen column-gap by Mojtaba Seyedi (@seyedi) on CodePen.

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