Grid vs Flexbox

تو چند سال اخیر، Flexbox حسابی بین دولوپرهای فرانت‌اند محبوب شده؛ راستش خیلی هم عجیب نیست. چون دست طراح و برنامه‌نویس رو باز می‌ذاره و ساختن چیدمان‌های داینامیک و منعطف رو خیلی راحت‌تر می‌کنه.

توضح کامل در مورد grid رو اینجا بخونید

ولی خب، یه بازیگر جدی دیگه هم اومده وسط میدون: CSS Grid. گرید خیلی از کارهایی که Flexbox انجام می‌ده رو بلده، حتی تو بعضی چیدمان‌ها بهتر هم عمل می‌کنه. از اون طرف، هنوزم جاهایی هست که Flexbox انتخاب تمیزتر و راحت‌تریه.

همین باعث شده خیلی از دولوپرها موقع طراحی صفحه گیج بشن و ندونن دقیقاً باید برن سراغ Flexbox یا CSS Grid.

چیدمان یک‌بعدی در برابر چیدمان دوبعدی

اگه قراره فقط یه نکته از این مطلب یادت بمونه، اون نکته اینه:

Flexbox برای چیدمان‌های یک‌بعدی ساخته شده، ولی CSS Grid برای چیدمان‌های دوبعدیه.

یعنی چی؟ یعنی اگه آیتم‌هات قراره فقط تو یه جهت کنار هم چیده بشن، مثلاً فقط افقی یا فقط عمودی، معمولاً Flexbox انتخاب بهتریه.

تو اینجور موقعیت‌ها Flexbox انعطاف بیشتری بهت می‌ده، کدت هم معمولاً کوتاه‌تر و ساده‌تر درمیاد. با چند خط CSS می‌تونی دقیقاً همون چیزی رو بسازی که می‌خوای.

اما اگه قراره همزمان با ستون‌ها و ردیف‌ها سر و کار داشته باشی، یعنی چیدمانت واقعاً دوبعدیه، اونجا CSS Grid خیلی بهتر جواب می‌ده.

با Grid معمولاً مارک‌آپ تمیزتری داری، ساختار کلی صفحه واضح‌تر می‌شه و بعداً هم بررسی و تغییر دادن کد راحت‌تره.

البته این دوتا دشمن هم نیستن! اتفاقاً خیلی وقت‌ها بهترین کار اینه که با هم ترکیبشون کنی. مثلاً برای ساختار کلی صفحه از Grid استفاده کنی و برای کنترل آیتم‌های داخل هدر بری سراغ Flexbox. اینطوری از خوبی‌های هر دو تا استفاده می‌کنی.

اولویت محتوا یا اولویت ساختار؟

یکی از تفاوت‌های مهم Flexbox و Grid اینه که هر کدوم با یه طرز فکر متفاوت کار می‌کنن. Flexbox بیشتر محتوامحوره، ولی Grid بیشتر ساختارمحوره.

شاید این جمله اولش یه کم مبهم باشه، پس بذار با یه مثال ساده‌ترش کنیم. فرض کن یه هدر ساده داریم که داخلش سه تا آیتم هست: Home، Search و Logout.

<header>
    <div>Home</div>
    <div>Search</div>
    <div>Logout</div>
</header>

قبل از اینکه Flexbox یا Grid بهش بدیم، این آیتم‌ها به صورت پیش‌فرض زیر هم قرار می‌گیرن، چون divها بلاک هستن.

حالا اگه به هدر بگیم display: flex، آیتم‌ها خیلی راحت کنار هم قرار می‌گیرن.

header {
    display: flex;
}

تا اینجا بدون اینکه ساختار خاصی تعریف کنیم، فقط گفتیم آیتم‌ها به شکل فلکسی کنار هم باشن. حالا اگه بخوایم دکمه Logout بره سمت راست، خیلی راحت به همون آیتم margin-left: auto می‌دیم.

header > div:nth-child(3) {
    margin-left: auto;
}

اینجا نکته مهم اینه که ما خیلی درگیر ساختار ستون‌بندی نشدیم. فقط به خود آیتم‌ها گفتیم چطور رفتار کنن. برای همین می‌گیم Flexbox محتوامحوره؛ یعنی بیشتر تمرکزش روی نحوه قرار گرفتن آیتم‌ها کنار همه.

حالا همین هدر رو با CSS Grid بسازیم

برای ساختن همین هدر با Grid راه‌های مختلفی داریم. مثلاً می‌تونیم یه ساختار ۱۰ ستونه تعریف کنیم.

header {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

ظاهر کار ممکنه شبیه حالت Flexbox به نظر بیاد، ولی پشت صحنه ماجرا فرق داره. اینجا قبل از اینکه آیتم‌ها رو جابه‌جا کنیم، اول ساختار صفحه رو تعریف کردیم: یعنی گفتیم هدر باید ۱۰ ستون مساوی داشته باشه.

با رفتن و دیدنش تو بخش inspector مرورگر اینو میبینیم :

اینجاست که تفاوت اصلی معلوم می‌شه. تو Grid باید اول به ساختار فکر کنی؛ اینکه چندتا ستون می‌خوای، هر ستون چه اندازه‌ای داشته باشه و آیتم‌ها قراره کجای این ساختار قرار بگیرن.

اگه همین ساختار ۱۰ ستونه رو نگه داریم، برای بردن Logout به سمت راست باید بگیم بره تو ستون دهم.

header > div:nth-child(3) {
    grid-column: 10;
}

اینجا دیگه مثل Flexbox نمی‌تونیم خیلی ساده با margin-left: auto همون رفتار رو بسازیم، چون آیتم داخل یه سیستم ستونی مشخص قرار گرفته. برای جابه‌جایی، باید جایگاهش رو تو همون ساختار گرید عوض کنیم.

پس خلاصه‌اش این می‌شه: تو Flexbox بیشتر با رفتار آیتم‌ها کار می‌کنی، ولی تو Grid اول ساختار رو می‌سازی و بعد آیتم‌ها رو می‌ذاری سر جاشون.

ترکیب Flexbox و Grid؛ بهترین حالت ممکن

حالا برسیم به قسمت جذاب ماجرا. خیلی وقت‌ها لازم نیست بین Flexbox و Grid یکی رو انتخاب کنی. می‌تونی هر دوتاشون رو کنار هم استفاده کنی و یه چیدمان تمیزتر بسازی.

فرض کن یه صفحه کلی داریم که شامل هدر، منو، محتوای اصلی و فوتره. مارک‌آپش می‌تونه این شکلی باشه:

<div class="container">
    <header>HEADER</header>
    <aside>MENU</aside>
    <main>CONTENT</main>
    <footer>FOOTER</footer>
</div>

برای ساختار کلی صفحه، CSS Grid عالیه. مثلاً یه گرید ۱۲ ستونه می‌سازیم و برای ردیف‌ها هم ارتفاع مشخص می‌کنیم.

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
}

حالا هر بخش رو می‌ذاریم سر جای خودش. هدر و فوتر کل عرض صفحه رو بگیرن، منو ۲ ستون باشه و محتوای اصلی هم ۱۰ ستون.

header {
    grid-column: span 12;
}

aside {
    grid-column: span 2;
}

main {
    grid-column: span 10;
}

footer {
    grid-column: span 12;
}

تا اینجا Grid کار ساختار اصلی صفحه رو انجام داده. حالا اگه داخل هدر چندتا آیتم داشته باشیم و بخوایم اونا رو راحت کنترل کنیم، می‌تونیم خود هدر رو به یه کانتینر Flexbox تبدیل کنیم.

header {
    display: flex;
}

بعد هم مثل قبل، اگه بخوایم آیتم سوم مثلاً دکمه Logout بره سمت راست، این کد رو می‌نویسیم:

header > div:nth-child(3) {
    margin-left: auto;
}

اینجا دقیقاً داریم از هر ابزار جای درستش استفاده می‌کنیم. Grid برای چیدمان کلی صفحه، Flexbox برای مرتب کردن آیتم‌های داخل یه بخش.

پس کی از Flexbox استفاده کنیم؟

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

کی بریم سراغ CSS Grid؟

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

جمع‌بندی

Flexbox و CSS Grid قرار نیست جای همدیگه رو کامل بگیرن. هر کدوم برای یه مدل چیدمان ساخته شدن و وقتی درست ازشون استفاده کنی، کارت خیلی راحت‌تر می‌شه.

اگه چیدمانت یک‌بعدیه، معمولاً Flexbox انتخاب ساده‌تر و سریع‌تریه. اگه با ساختار دوبعدی طرفی، Grid دستت رو خیلی بازتر می‌ذاره. و اگه داری یه صفحه واقعی می‌سازی، احتمالاً بهترین جواب اینه که از هر دوتاشون کنار هم استفاده کنی.

مثلاً ساختار کلی صفحه رو با Grid بچین، بعد داخل بخش‌هایی مثل هدر، ناوبری یا کارت‌ها از Flexbox کمک بگیر. اینطوری هم کدت تمیزتره، هم کنترل بیشتری داری، هم بعداً راحت‌تر می‌تونی تغییرش بدی.

توضح کامل در مورد grid رو اینجا بخونید

پشتیبانی مرورگرها

یه نکته آخر هم درباره پشتیبانی مرورگرهاست. قبلاً CSS Grid اونقدرها همه‌جا پشتیبانی نمی‌شد و باید بیشتر حواسمون به مرورگرها می‌بود. ولی الان اوضاع خیلی بهتر شده و مرورگرهای مدرن به‌خوبی از Grid پشتیبانی می‌کنن.

با این حال، اگه پروژه‌ات کاربرهایی داره که ممکنه از مرورگرهای قدیمی استفاده کنن، بهتره قبل از پیاده‌سازی نهایی یه چک سریع روی پشتیبانی مرورگرها داشته باشی. ولی برای بیشتر پروژه‌های امروزی، استفاده از Flexbox و Grid کنار هم کاملاً منطقی و رایجه.