فرادرسلی آوت چند ستونی در CSS — آموزش CSS (بخش سی‌ویکم)
لی آوت چند ستونی در CSS به ما امکان می‌دهد که در روشی شبیه به آن چه در روزنامه‌ها دیده‌ایم، محتوای صفحه وب را در ستون‌هایی قرار دهیم. در این مقاله به توضیح روش استفاده از این قابلیت خواهیم پرداخت. برای مطالعه بخش قبلی این مقاله روی لینک زیر کلیک کنید:
یک مثال ساده
در ابتدا با معرفی یک مثال ساده به بررسی قابلیت لی‌آوت چندستونی در CSS می‌پردازیم که غالباً به صورت multicol نامیده می‌شود.
برای شروع، کد HTML زیر را روی سیستم خود در فایلی به نام starting-point.html کپی و ذخیره کنید.
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <title>Multicol starting point</title>
7 <style>
8 body {
9 width: 90%;
10 max-width: 900px;
11 margin: 2em auto;
12 font: .9em/1.2 Arial, Helvetica, sans-serif;
13 }
14 </style>
15</head>
16
17<body>
18 <div class="container">
19 <h1>Simple multicol example</h1>
20
21 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
22 Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
23 laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
24 egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam
25 erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare
26 egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum
27 sapien.</p>
28
29 <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
30 sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
31 tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu
32 urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
33 penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
34 </div>
35</body>
36
37</html>در ادامه به تدریج CSS را به مکان‌های مناسب این فایل اضافه می‌کنیم تا ظاهر نهایی چند ستونی مورد نظر ما ایجاد شود. این فایل HTML آغازین شامل برخی کدهای کاملاً ساده است. از جمله یک پوشش با یک کلاس container درون آن وجود دارد که عنوان و برخی پاراگراف‌ها را در خود جای داده است.
ما <div> با کلاس کانتینر را به کانتینر چند ستونی خود تبدیل می‌کنیم. به این منظور از دو مشخصه column-count یا column-width کمک می‌گیریم. مشخصه column-count هر تعداد ستون را بر اساس مقداری که به آن داده می‌شود تولید می‌کند. بنابراین اگر CSS زیر را با استایل‌شیت خود اضافه کرده و صفحه را بارگذاری مجدد بکنید، سه ستون روی صفحه ایجاد می‌شود:
1.container {
2 column-count: 3;
3}ستون‌هایی که ایجاد شده‌اند، دارای عرض انعطاف‌پذیر هستند، یعنی مرورگر در مورد مقدار فضایی که هر ستون باید اشغال کند، تصمیم‌گیری می‌کند.
1<div class="container">
2 <h1>Simple multicol example</h1>
3
4 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
5 Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
6 Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
7 ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
8 quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
9
10 <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
11 elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
12 cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
13 dis parturient montes, nascetur ridiculus mus.</p>
14</div>1.container {
2 column-count: 3;
3}
برای استفاده از مشخصه column-width کد CSS خود را به صورت زیر تغییر دهید:
1.container {
2 column-width: 200px;
3}اینک مرورگر تلاش می‌کند تا حداکثر تعداد ستون‌هایی را که می‌تواند تا مقداری که تعیین کرده‌اید، ایجاد کند. هر مقدار فضای باقیمانده بین ستون‌های موجود تقسیم می‌شود. این بدان معنی است که ممکن است دقیقاً آن عرضی که تعیین کرده‌اید را به دست نیاورید، مگر این که کانتینر دقیقاً بر آن عرض تقسیم‌پذیر باشد.
1.container {
2 column-width: 200px;
3}
استایل‌بندی ستون‌ها
ستون‌هایی که به روش multicol ایجاد می‌شوند، نمی‌توانند به صورت مستقل استایل‌بندی شوند. هیچ روشی برای این که یک ستون بزرگ‌تر از ستون‌های دیگر شود، یا رنگ پس‌زمینه یا رنگ متن یک ستون فرق داشته باشد، وجود ندارد. برای تغییر در ظاهر ستون‌ها تنها دو روش وجود دارد:
- تغییر دادن اندازه فاصله بین ستون‌ها با استفاده از column-gap
- افزودن قاعده‌ای بین ستون‌ها با استفاده از column-rule
با بهره‌گیری از مثال فوق، اندازه فاصله بین ستون‌ها را با افزودن مشخصه column-gap به صورت زیر تغییر می‌دهیم:
1.container {
2 column-width: 200px;
3 column-gap: 20px;
4}امکان تغییر دادن مقادیر مختلف وجود دارد و این مشخصه هر واحد طولی را می‌پذیرد. اکنون با استفاده از مشخصه column-rule یک قاعده بین ستون‌ها اضافه می‌کنیم. به روش مشابه استفاده از مشخصه border که در بخش‌های قبلی این سری مطالب آموزش CSS مشاهده کردیم، مشخصه column-rule نیز اختصاری برای مشخصه‌های طولانی‌تر column-rule-color ،column-rule-style و column-rule-width است و همان مقادیر مربوط به border را می‌پذیرد.
1.container {
2 column-count: 3;
3 column-gap: 20px;
4 column-rule: 4px dotted rgb(79, 185, 227);
5}در ادامه تلاش می‌کنیم استایل‌ها و رنگ‌های مختلف را به کار بگیریم.
نکته‌ای که در این خصوص باید در نظر داشت این است که این قاعده خود هیچ عرضی را اشغال نمی‌کند. این قاعده در شکاف ایجاد شده از سوی مشخصه column-gap قرار می‌گیرد. برای اشغال فضای بیشتر طبق این قاعده باید اندازه column-gap را افزایش دهید.
پوشاندن ستون‌ها
امکان تعیین مشخصه‌های یک عنصر برای پوشش همه ستون‌ها نیز وجود دارد. در این حالت ستون‌ها در جایی که عنصر پوشا وارد شده است قطع می‌شوند و در ادامه آن کادرهای ستونی جدیدی ایجاد می‌شوند. برای این که یک عنصر روی همه ستون‌ها را بپوشاند، باید از مشخصه column-span با مقدار all استفاده کنیم.
توجه کنید که امکان پوشش دادن تنها بعضی از ستون‌ها وجود ندارد. این مشخصه دو مقدار به صورت all و none می‌گیرد.
تکه‌تکه شدن ستون‌ها
محتوای لی‌آوت چند ستونی به صورت تکه‌تکه است. طرز رفتار این محتوا، اساساً همان شیوه رفتار رسانه صفحه‌بندی‌شده در زمان پرینت گرفتن است. زمانی که محتوا را به صورت کانتینر چندستونی تنظیم می‌کنید، در ستون‌های مختلف تقسیم می‌شود.
گاهی اوقات شستگی خطوط در جایی رخ می‌دهد که منجر به کاهش خوانایی متن می‌شود. در مثال زیر از multicol برای طرح‌بندی یک سری کادرها استفاده کرده‌ایم که هر یک دارای عنوان و مقداری متن است. در صورتی که تکه‌های ستون بین دو کادر قرار گیرند، این عنوان‌ها از متن خود جدا می‌شوند.
1<div class="container">
2 <div class="card">
3 <h2>I am the heading</h2>
4 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
5 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
6 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
7 vel, viverra egestas ligula.</p>
8 </div>
9
10 <div class="card">
11 <h2>I am the heading</h2>
12 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
13 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
14 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
15 vel, viverra egestas ligula.</p>
16 </div>
17
18 <div class="card">
19 <h2>I am the heading</h2>
20 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
21 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
22 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
23 vel, viverra egestas ligula.</p>
24 </div>
25 <div class="card">
26 <h2>I am the heading</h2>
27 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
28 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
29 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
30 vel, viverra egestas ligula.</p>
31 </div>
32
33 <div class="card">
34 <h2>I am the heading</h2>
35 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
36 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
37 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
38 vel, viverra egestas ligula.</p>
39 </div>
40
41 <div class="card">
42 <h2>I am the heading</h2>
43 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
44 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
45 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
46 vel, viverra egestas ligula.</p>
47 </div>
48
49 <div class="card">
50 <h2>I am the heading</h2>
51 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
52 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
53 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
54 vel, viverra egestas ligula.</p>
55 </div>
56
57</div>1.container {
2 column-width: 250px;
3 column-gap: 20px;
4}
5
6.card {
7 background-color: rgb(207, 232, 220);
8 border: 2px solid rgb(79, 185, 227);
9 padding: 10px;
10 margin: 0 0 1em 0;
11}
برای کنترل این رفتار، می‌توانیم از مشخصه‌های استاندارد CSS Fragmentation استفاده کنیم. این استاندارد مشخصه‌هایی در اختیار ما قرار می‌دهد که موجب کنترل محل شکستگی ستون‌ها در لی‌آوت چند ستونی و رسانه‌های صفحه‌بندی‌شده می‌شود. برای نمونه مشخصه break-inside را با مقدار avoid به قاعده .card اضافه می‌کنیم. این همان کانتینر عنوان و متن است و از این رو نمی‌خواهیم این کادر به صورت تکه‌تکه درآید.
در حال حاضر بهتر است برای این که در مرورگرهای مختلف پشتیبانی مناسبی داشته باشیم، از مشخصه قدیمی‌تر page-break-inside: avoid استفاده کنیم.
1.card {
2 break-inside: avoid;
3 page-break-inside: avoid;
4 background-color: rgb(207,232,220);
5 border: 2px solid rgb(79,185,227);
6 padding: 10px;
7 margin: 0 0 1em 0;
8}اکنون در صورت بارگذاری مجدد صفحه می‌بینید که باکس‌ها به صورت یکپارچه حفظ می‌شوند.
1.container {
2 column-width: 250px;
3 column-gap: 20px;
4}
5
6.card {
7 break-inside: avoid;
8 page-break-inside: avoid;
9 background-color: rgb(207, 232, 220);
10 border: 2px solid rgb(79, 185, 227);
11 padding: 10px;
12 margin: 0 0 1em 0;
13}
سخن پایانی
در این بخش از سری مقالات آموزش CSS با قابلیت لی‌آوت چندستونی در CSS آشنا شدیم که یک ابزار دیگر برای طرح‌بندی صفحه‌های وب و طراحی و ساخت ظاهر دلخواه برای آن‌ها محسوب می‌شود.
برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:
