Flexbox یا Grid؟ سؤال درست این نیست کدام بهتر است
وقتی CSS یاد میگیری، به دو ابزارِ چیدمان میرسی که هر دو کارِ مشابهی میکنند و همینجا گیر میکنی: بالاخره کدام؟ جوابِ رایج یک جدولِ مقایسه است که تازهکار را گیجتر میکند.
جوابِ مفید یک جمله است: Flexbox در یک بُعد فکر میکند، Grid در دو بُعد. اگر همین را بفهمی، بقیهاش خودش میآید.
یک بُعد یعنی چه
Flexbox چیزها را در یک خط میچیند — یا یک ردیفِ افقی، یا یک ستونِ عمودی. کارش این است که فضای آن خط را بین اعضایش تقسیم کند: این یکی چقدر بکشد، آن یکی چقدر جمع شود، فاصلهها چطور پخش شوند.
یک نوارِ ناوبری را تصور کن: لوگو سمتِ راست، چند لینک وسط، دکمهٔ ورود سمتِ چپ. این یک خط است. تو فقط میگویی چطور در آن خط پخش شوند. این دقیقاً کارِ Flexbox است.
دو بُعد یعنی چه
Grid همزمان سطر و ستون دارد. تو اول شبکه را تعریف میکنی — اینقدر ستون، اینقدر سطر — و بعد میگویی هر چیزی کجای این شبکه بنشیند. یک عنصر میتواند دو ستون را بگیرد و یکی دیگر سه سطر را.
قالبِ کلیِ یک صفحه را تصور کن: هدر بالا، نوارِ کناری، محتوای اصلی، فوترِ پایین. اینجا همزمان به عرض و ارتفاع فکر میکنی. این کارِ Grid است.
پس قاعدهٔ عملی
به چیزی که میخواهی بچینی نگاه کن و از خودت بپرس: دارم به یک راستا فکر میکنم یا به دو تا؟
- یک ردیف دکمه، یک نوارِ ناوبری، چند تگ کنارِ هم، یک کارت با آیکون و متن کنارِ هم — Flexbox
- قالبِ کلی صفحه، یک گالریِ عکس با سطر و ستونِ منظم، فرمی که برچسب و فیلدش باید تراز بمانند — Grid
و مهمترین نکته، که خیلی دیر گفته میشود: این دو رقیبِ هم نیستند. در یک صفحهٔ واقعی معمولاً Grid قالبِ کلی را میسازد و داخلِ هر خانهاش Flexbox محتوا را میچیند. سؤال «کدام را یاد بگیرم؟» نیست؛ «الان دارم کدام مسئله را حل میکنم؟» است.
دو اشتباهِ رایج
Grid برای همهچیز. کسی که تازه Grid یاد گرفته، وسوسه میشود همهچیز را با آن بچیند. برای یک ردیفِ ساده دکمه، این یعنی تعریفِ یک شبکه برای چیزی که فقط یک خط است — کدِ بیشتر برای نتیجهٔ یکسان.
Flexbox برای قالبِ صفحه. عکسش هم پیش میآید: با Flexboxهای تودرتو یک قالبِ دوبعدی ساختن. کار میکند، تا وقتی که بخواهی چیزی را تراز کنی و بفهمی هیچ ستونی وجود ندارد که با آن تراز کنی. ستونها فقط در ذهنِ تو بودند.
و قبل از هر دو: یک چیزِ سادهتر
گاهی هیچکدام لازم نیست. جریانِ طبیعیِ HTML — اینکه هر بلوک زیرِ بلوکِ قبلی میآید — خودش یک چیدمانِ درست و واکنشگراست که هیچ کدی نمیخواهد. اگر چیزی که میخواهی همان است، بگذار همان باشد.
ساختنِ چیدمان برای چیزی که خودش درست بود، یکی از راههای رایجِ پیچیدهکردنِ CSS است. این هم یکی از دلایلی است که HTML معنایی اول میآید و CSS بعد.
همین حالا امتحان کن
چیدمان چیزی است که با خواندن یاد گرفته نمیشود؛ باید عددها را عوض کنی و ببینی چه میشود. در ادیتورِ زنده کد را تغییر بده و نتیجه را همان لحظه ببین — بدون نصبِ هیچ چیزی:
- آزمایشگاه چیدمان — Flexbox و Grid، زنده
- واکنشگرایی — همان چیدمان روی صفحهٔ کوچک
اگر از صفر شروع میکنی، فرق HTML و CSS نقطهٔ درستِ شروع است، و آموزش HTML و CSS تاروپود همین مسیر را با ترتیب و تمرین دارد.
