مقدمه‌ای بر span در CSS
یکی از ویژگی‌های جالب CSS که در طراحی صفحات وب استفاده می‌شود، قابلیت column-span است. با استفاده از این ویژگی، شما می‌توانید یک عنصر را در چندین ستون درون یک جدول یا صفحه قرار دهید. این به ویژه زمانی مفید است که شما بخواهید محتوای خاصی را که نیاز به بیش از یک ستون دارد، به نمایش بگذارید.
فرض کنید شما در حال ساخت یک خبرنامه آنلاین هستید و چندین ستون برای نمایش متن و تصاویر دارید. ممکن است بخواهید یک عکس بزرگ یا یک عنوان را که باید در تمام ستون‌ها جلب توجه کند، قرار دهید. در اینجا column-span به کار می‌آید.
با استفاده از این ویژگی، می‌توانید به راحتی کنترل بیشتری بر روی طراحی و آرایش صفحه خود داشته باشید. اگرچه در حال حاضر این ویژگی هنوز به طور کامل در تمام مرورگرها پشتیبانی نمی‌شود، اما می‌توانید از آن در طراحی‌های خاص یا آزمایشی استفاده کنید.
برای استفاده از column-span، شما باید عنصر مورد نظر خود را به این ویژگی متصل کنید و مقدار آن را تعیین کنید. توجه داشته باشید که این ویژگی ممکن است نیاز به استفاده از برخی از ویژگی‌های دیگر CSS نیز داشته باشد تا بهترین نتیجه را به دست آورید.
نمونه کد column-span
<div style="column-count: 3; column-gap: 20px;">
<div style="column-span: all;">این یک متن است که در تمام ستون‌ها نمایش داده می‌شود.</div>
<div>ستون اول</div>
<div>ستون دوم</div>
<div>ستون سوم</div>
</div>
توضیح کد
column-count: 3; - این خط مشخص می‌کند که چند ستون باید در این بخش از متن وجود داشته باشد. در اینجا 3 ستون تعیین شده است.
column-gap: 20px; - فاصله بین ستون‌ها را تنظیم می‌کند. در اینجا 20 پیکسل فاصله تعیین شده است.
column-span: all; - این خاصیت به عنصر اول این امکان را می‌دهد که در تمام ستون‌ها کشیده شود.
<div>ستون اول</div> – این یک DIV عادی است که متن «ستون اول» را به نمایش می‌گذارد.
<div>ستون دوم</div> – این هم یک DIV دیگر است که متن «ستون دوم» را به نمایش می‌گذارد.
<div>ستون سوم</div> – همین طور برای ستون سوم نیز انجام شده است.