ویژگی column-gap در CSS

column-gap Property

ویژگی column-gap در CSS فاصله بین ستون های محتوای عنصرِ مورد نظر را مشخص می کند.

نحوه نوشتار

column-gap: normal; 
column-gap: 15px;
column-gap: 3rem;
column-gap: 7%;

مقادیر

normal​

فاصله نرمال را مابین ستون های محتوا در نظر می گیرد. این فاصله 1em در نظر گرفته شده و مقدار پیشفرض است.

طول​

فاصله بین ستون ها با واحدهای اندازه CSS تعیین می شود. این مقدار نباید منفی باشد.

درصد​

فاصله بین ستون ها با معیار درصد تعیین می شود. این مقدار نباید منفی باشد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم.

html

<p class="pg1">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>
<hr />
<p class="pg2">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>
<hr />
<p class="pg3">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>

css

 body {
   direction: rtl;
   font-family: "Segoe UI";
}
p {
   padding: 15px;
   margin-top: 20px;
   text-align: justify;
}
.pg1 {
   column-count: 2;
   column-gap: 4.5em;
}
.pg2 {
   column-count: 3;
   column-gap: 10%;
}
.pg3 {
    column-count: 4;
    column-gap: auto;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.