ویژگی 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.
سوال داری؟ برو به پنل پرسش و پاسخ