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

۲۰۴ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۷ دقیقه
لی آوت چند ستونی در 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}

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

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

1.container {
2  column-width: 200px;
3}

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

1.container {
2  column-width: 200px;
3}

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

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

ستون‌هایی که به روش 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}

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

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

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

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

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

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

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

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

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

گاهی اوقات شستگی خطوط در جایی رخ می‌دهد که منجر به کاهش خوانایی متن می‌شود. در مثال زیر از 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
برای کنترل این رفتار، می‌توانیم از مشخصه‌های استاندارد 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 با قابلیت لی‌آوت چندستونی در CSS آشنا شدیم که یک ابزار دیگر برای طرح‌بندی صفحه‌های وب و طراحی و ساخت ظاهر دلخواه برای آن‌ها محسوب می‌شود.

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

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

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