لی آوت چند ستونی در CSS – آموزش CSS (بخش سی‌ویکم)

۵۱۸ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۷ دقیقه
دانلود PDF مقاله
لی آوت چند ستونی در CSS – آموزش CSS (بخش سی‌ویکم)لی آوت چند ستونی در CSS – آموزش CSS (بخش سی‌ویکم)

لی آوت چند ستونی در CSS به ما امکان می‌دهد که در روشی شبیه به آن چه در روزنامه‌ها دیده‌ایم، محتوای صفحه وب را در ستون‌هایی قرار دهیم. در این مقاله به توضیح روش استفاده از این قابلیت خواهیم پرداخت. برای مطالعه بخش قبلی این مقاله روی لینک زیر کلیک کنید:

997696

یک مثال ساده

در ابتدا با معرفی یک مثال ساده به بررسی قابلیت لی‌آوت چندستونی در CSS می‌پردازیم که غالباً به صورت multicol نامیده می‌شود.

برای شروع، کد HTML زیر را روی سیستم خود در فایلی به نام starting-point.html کپی و ذخیره کنید.

در ادامه به تدریج CSS را به مکان‌های مناسب این فایل اضافه می‌کنیم تا ظاهر نهایی چند ستونی مورد نظر ما ایجاد شود. این فایل HTML آغازین شامل برخی کدهای کاملاً ساده است. از جمله یک پوشش با یک کلاس container درون آن وجود دارد که عنوان و برخی پاراگراف‌ها را در خود جای داده است.

ما <div> با کلاس کانتینر را به کانتینر چند ستونی خود تبدیل می‌کنیم. به این منظور از دو مشخصه column-count یا column-width کمک می‌گیریم. مشخصه column-count هر تعداد ستون را بر اساس مقداری که به آن داده می‌شود تولید می‌کند. بنابراین اگر CSS زیر را با استایل‌شیت خود اضافه کرده و صفحه را بارگذاری مجدد بکنید، سه ستون روی صفحه ایجاد می‌شود:

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

لی آوت چند ستونی در CSS

برای استفاده از مشخصه column-width کد CSS خود را به صورت زیر تغییر دهید:

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

لی آوت چند ستونی در CSS

استایل‌بندی ستون‌ها

ستون‌هایی که به روش multicol ایجاد می‌شوند، نمی‌توانند به صورت مستقل استایل‌بندی شوند. هیچ روشی برای این که یک ستون بزرگ‌تر از ستون‌های دیگر شود، یا رنگ پس‌زمینه یا رنگ متن یک ستون فرق داشته باشد، وجود ندارد. برای تغییر در ظاهر ستون‌ها تنها دو روش وجود دارد:

  • تغییر دادن اندازه فاصله بین ستون‌ها با استفاده از column-gap
  • افزودن قاعده‌ای بین ستون‌ها با استفاده از column-rule

با بهره‌گیری از مثال فوق، اندازه فاصله بین ستون‌ها را با افزودن مشخصه column-gap به صورت زیر تغییر می‌دهیم:

امکان تغییر دادن مقادیر مختلف وجود دارد و این مشخصه هر واحد طولی را می‌پذیرد. اکنون با استفاده از مشخصه column-rule یک قاعده بین ستون‌ها اضافه می‌کنیم. به روش مشابه استفاده از مشخصه border که در بخش‌های قبلی این سری مطالب آموزش CSS مشاهده کردیم، مشخصه column-rule نیز اختصاری برای مشخصه‌های طولانی‌تر column-rule-color ،column-rule-style و column-rule-width است و همان مقادیر مربوط به border را می‌پذیرد.

در ادامه تلاش می‌کنیم استایل‌ها و رنگ‌های مختلف را به کار بگیریم.

لی آوت چند ستونی در CSS

نکته‌ای که در این خصوص باید در نظر داشت این است که این قاعده خود هیچ عرضی را اشغال نمی‌کند. این قاعده در شکاف ایجاد شده از سوی مشخصه column-gap قرار می‌گیرد. برای اشغال فضای بیشتر طبق این قاعده باید اندازه column-gap را افزایش دهید.

پوشاندن ستون‌ها

امکان تعیین مشخصه‌های یک عنصر برای پوشش همه ستون‌ها نیز وجود دارد. در این حالت ستون‌ها در جایی که عنصر پوشا وارد شده است قطع می‌شوند و در ادامه آن کادرهای ستونی جدیدی ایجاد می‌شوند. برای این که یک عنصر روی همه ستون‌ها را بپوشاند، باید از مشخصه column-span با مقدار all استفاده کنیم.

توجه کنید که امکان پوشش دادن تنها بعضی از ستون‌ها وجود ندارد. این مشخصه دو مقدار به صورت all و none می‌گیرد.

لی آوت چند ستونی در CSS

تکه‌تکه شدن ستون‌ها

محتوای لی‌آوت چند ستونی به صورت تکه‌تکه است. طرز رفتار این محتوا، اساساً همان شیوه رفتار رسانه صفحه‌بندی‌شده در زمان پرینت گرفتن است. زمانی که محتوا را به صورت کانتینر چندستونی تنظیم می‌کنید، در ستون‌های مختلف تقسیم می‌شود.

گاهی اوقات شستگی خطوط در جایی رخ می‌دهد که منجر به کاهش خوانایی متن می‌شود. در مثال زیر از multicol برای طرح‌بندی یک سری کادرها استفاده کرده‌ایم که هر یک دارای عنوان و مقداری متن است. در صورتی که تکه‌های ستون بین دو کادر قرار گیرند، این عنوان‌ها از متن خود جدا می‌شوند.

لی آوت چند ستونی در CSS
برای کنترل این رفتار، می‌توانیم از مشخصه‌های استاندارد CSS Fragmentation استفاده کنیم. این استاندارد مشخصه‌هایی در اختیار ما قرار می‌دهد که موجب کنترل محل شکستگی ستون‌ها در لی‌آوت چند ستونی و رسانه‌های صفحه‌بندی‌شده می‌شود. برای نمونه مشخصه break-inside را با مقدار avoid به قاعده ‎.card اضافه می‌کنیم. این همان کانتینر عنوان و متن‌ است و از این رو نمی‌خواهیم این کادر به صورت تکه‌تکه درآید.

در حال حاضر بهتر است برای این که در مرورگرهای مختلف پشتیبانی مناسبی داشته باشیم، از مشخصه قدیمی‌تر page-break-inside: avoid استفاده کنیم.

اکنون در صورت بارگذاری مجدد صفحه می‌بینید که باکس‌ها به صورت یکپارچه حفظ می‌شوند.

لی آوت چند ستونی در CSS

سخن پایانی

در این بخش از سری مقالات آموزش CSS با قابلیت لی‌آوت چندستونی در CSS آشنا شدیم که یک ابزار دیگر برای طرح‌بندی صفحه‌های وب و طراحی و ساخت ظاهر دلخواه برای آن‌ها محسوب می‌شود.

برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
دانلود PDF مقاله
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *