در حال بارگذاری...

چندستونه در CSS

Optional Advanced تازه اسپرایت تصویر را دیدید — یک شیت، چند تکه. این جلسه ابزار دیگری است: چندستونه. روزنامه را تصور کنید، نه نوار ابزار. از CSS می‌خواهید مقالهٔ بلند را در دو یا سه ستون عمودی بریزد. اینجا کارت‌های جدا را روی Grid نمی‌چینید.

جواب مستقیم

چندستونه در CSS یعنی یک بلوک محتوا (معمولاً متن بلند) مثل روزنامه به چند ستون شکسته شود. تعداد را با column-count می‌گویید، عرض راحت هر ستون را با column-width، فاصلهٔ وسط را با column-gap، و اگر لازم شد یک خط نازک با column-rule. متن و لیست ستون اول را پر می‌کنند، بعد ستون بعد. برای نثر بلند خوب است. برای منو، دستهٔ کارت، و اسکلت صفحه همان Flexbox یا Grid را نگه دارید تا هر جعبه یک تکه بماند.

اصلاً چرا ستون؟

خط خیلی بلند سخت خوانده می‌شود. مجله‌ها چند ستون کوتاه‌تر روی یک صفحه گذاشتند. CSS همان ایده را برای وب آورد: یک عنصر، یک جریان متن، پر شدن خودکار ستون‌ها. این با Flexbox فرق دارد (ردیف یا ستون از آیتم‌ها) و با Grid هم فرق دارد (نقشهٔ دوبعدی ناحیه‌ها). چندستونه ابزار شکسته‌شدن است — مرورگر ممکن است پاراگراف را از مرز ستون ببرد مگر خودتان جلویش را بگیرید.

تعداد: «سه ستون می‌خواهم»

column-count یک عدد می‌خواهد. مرورگر عرض ظرف را بین همان تعداد ستون تقسیم می‌کند (منهای فاصله‌ها):

Newspaper article with column-count

css

.article {
column-count: 3;
max-width: 60rem;
}

روی مقالهٔ عریض سه جریان می‌بینید. روی موبایل باریک، سه ستون لاغر خواندنی نیست — یا با media query جفتش کنید، یا column-width بگذارید تا وقتی جا کم است تعداد خودش کم شود.

عرض: «هر ستون حدود این اندازه»

column-width راهنما است، قفس قفل‌شده نیست. مرورگر تا جایی که جا باشد ستون‌هایی حداقل به آن عرض می‌سازد:

Flexible columns with column-width

css

.article {
column-width: 16rem;
max-width: 60rem;
}

اگر جعبه حدود ۴۸rem به‌علاوهٔ فاصله باشد، شاید سه ستون ببینید؛ اگر جمع شود دو تا، بعد یکی. معمولاً آرام‌تر از column-count: 3 ثابت روی هر صفحه است. هر دو را هم می‌شود گذاشت: تعداد سقف است، عرض کف راحتی. میان‌بر columns اول عرض است بعد تعداد؛ مثلاً columns: 16rem 3.

فاصله و خط

ستون‌ها نفس می‌خواهند. column-gap همان فاصلهٔ وسط است. column-rule خط نازکی داخل همان فاصله می‌کشد (ضخامت، استایل، رنگ — شبیه border، ولی فضای اضافه مثل حاشیهٔ جعبه نمی‌گیرد):

Gap and rule between columns

css

.article {
column-width: 16rem;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}

میان‌برهای جدا هم هست (column-rule-width، column-rule-style، column-rule-color). خط را آرام نگه دارید؛ جداکنندهٔ روزنامه است، نه یک سیستم طراحی دوم.

عنوانی که همهٔ عرض را بگیرد

عنوان اغلب باید تمام عرض را بگیرد، بعد ستون‌ها از زیرش شروع شوند. روی فرزند column-span: all همین کار را می‌کند:

Heading that spans all columns

css

.article h2 {
column-span: all;
margin: 0 0 1rem;
}

.article {
column-count: 2;
column-gap: 1.5rem;
}

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

جعبه نصف نشود

کارت، شکل با توضیح، یا نقل‌قول اگر از وسط ستون بریده شود زشت می‌شود. break-inside: avoid از مرورگر می‌خواهد در حد توان آن جعبه را در یک ستون نگه دارد:

Keep a card from splitting across columns

css

.article figure,
.article .callout {
break-inside: avoid;
margin: 0 0 1rem;
}

در جریان شبیه چاپ، break-before و break-after هم هست؛ در مرورگرهای قدیمی‌تر گاهی page-break-inside: avoid. قرار نیست همیشه برنده شوید — جعبهٔ خیلی بلند باز هم بیرون می‌زند — ولی معمولاً می‌خواهید توضیح کنار تصویر بماند. column-fill: balance (اغلب پیش‌فرض ستون‌ها) ارتفاع ستون‌ها را نزدیک هم می‌کند؛ auto اول ستون اول را پر می‌کند (شبیه پرش روزنامه).

ستون در برابر Flex در برابر Grid

📊 Multi-column vs Flex vs Grid

Tool	Job	Poor fit
Multi-column (`column-*`)	Long article, glossary, name list that should read like a newspaper	Card galleries, nav bars, full page shells
Flexbox	One-dimensional rows/columns of whole items (toolbar, chips, simple stacks)	Pouring a novel into three text streams
Grid	Two-dimensional page or component map (header / main / aside)	Replacing `column-count` on a `<p>` soup
Sprites (`background-position`)	Decorative icon tiles on a sheet	Laying out article text

ماژول‌های Flexbox و Grid جای‌گذاری آیتم را یاد دادند. چندستونه justify-content یا ناحیهٔ نام‌دار نمی‌دهد. یک جریان را می‌ریزد. اگر هر فرزند باید مستطیلی قابل‌کلیک بماند، Flex یا Grid بگذارید.

اسکلت صفحه همان Flex یا Grid بماند

کل سایت را column-count: 3 نکنید. هدر، منو، و دستهٔ کارت جعبهٔ کامل می‌خواهند:

Page chrome stays Flex or Grid

css

.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

.prose {
column-width: 18rem;
column-gap: 1.75rem;
}

.prose می‌تواند چندستونه باشد. .card-deck نباید. هر دو روی یک عنصر یعنی شکل‌ها بریده می‌شوند و دکمه در ستون اشتباه می‌نشیند.

صفحهٔ باریک و ترتیب خواندن

اگر ستون از یک خط راحت باریک‌تر می‌شود (حدود ۱۲ تا ۱۶rem متن)، برگردید به یک ستون. صفحه‌خوان و کیبورد هنوز ترتیب سند را دنبال می‌کنند، نه «اول این ستون تا ته، بعد ستون بعدی» به‌عنوان اسکن تصویری — برای مقاله اشکالی ندارد؛ اگر با ستون داشبورد ویجت‌های بی‌ربط ساخته باشید ناجور است. در زبان راست‌به‌چپ هم ستون‌ها با writing mode پر می‌شوند؛ خط باز هم وسط فاصله می‌ماند.

خودتان امتحان کنید

چند پاراگراف را در .prose بگذارید؛ column-count: 2 و یک column-gap.
عوضش کنید به column-width: 16rem و پنجره را بکشید — ببینید تعداد عوض می‌شود.
column-rule: 1px solid با خاکستری آرام اضافه کنید.
یک <h2> با column-span: all.
دور یک شکل break-inside: avoid بگذارید. بعد همان CSS را روی شبکهٔ کارت امتحان کنید تا ببینید آنجا Flex/Grid آرام‌تر است.

اشتباه‌های رایج

چندستونه به‌جای گالری کارت یا چیدمان کل صفحه
column-count: 3 اجباری روی موبایل تا هر خط سه کلمه شود
فراموش کردن column-gap تا ستون‌ها به هم بچسبند
بریده‌شدن تصویر و توضیح از مرز ستون
رفتار ستون مثل Flex: برای جریان ستون flex-grow ندارید
قاطی کردن با اسپرایت تصویر — اسپرایت پس‌زمینه را برش می‌زند؛ ستون متن را می‌شکند

خلاصه

چندستونه یک جریان را مثل روزنامه در ستون می‌ریزد
column-count عدد است؛ column-width کف راحت؛ می‌شود جفتشان کرد
column-gap و column-rule فاصله را می‌آرایند؛ عنوان با column-span: all
break-inside: avoid شکل و باکس را تا جای ممکن یک تکه نگه می‌دارد
اسکلت صفحه و دستهٔ کارت هنوز مال Flex و Grid است
Optional Advanced بعدی: ماسک (masking)

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان