column-span

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

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

 

 

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

تنها عناصری می توانند از محدوده ستونی خارج شوند که ویژگی display آنها مقدار block دارند. حتی inline-block نیز قابل قبول نیست.

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

column-span: all | none;

all

مقدار all باعث می شود تا یک عنصر همه ستون های یک چیدمان ستونی را بپوشاند.

مثال زیر را در نظر بگیرید:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, doloribus!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, doloribus!</p>
  <img src="img.png" alt="image">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste praesentium, asperiores. Deserunt quam, ipsa rem blanditiis reiciendis veniam aperiam aspernatur iure! Dicta laboriosam expedita impedit consequuntur placeat voluptates, error fugiat.</p>
</div>

در نمونه بالا قرار است تا چیدمان عنصر div را بصورت ستونی در بیاوریم. و سپس با استفاده از ویژگی column-span باعث شویم تا img همه ستون ها را بپوشاند.

بصورت زیر عمل می کنیم:

div {
  column-count: 3;
}

img {
  column-span: all;
}

نکته خیلی مهمی که باید در ذهن داشت این است که وقتی یک عنصر column-span از نوع all می گیرد تمام محتوا و عناصر قبل از آن در HTML قبل از نمایش این عنصر در بین ستون ها توزیع می شوند و سپس آن عنصر نمایش داده می شود. و بعد از آن عنصر تمام عناصری که در HTML بعد از آن آمده اند بین تمام ستون ها تقسیم می شود.

این یعنی در مثال بالا اول دو پاراگراف در سه ستون بصورت کامل تقسیم شده و نمایش داده می شوند، سپس تصویر نمایش داده می شود و بعد از آن پاراگراف آخر در بین ستون ها تقسیم می شود.

در تصویر بالا نیز محتوای آبی رنگ همین موضوع را نشان می دهد. در دموی پایین صفحه نیز می توانید این بحث را تحقیق کنید.

none

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

مثال

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

 

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

 

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