جواب کوتاه: اگر چیدمانتان یک ردیف یا یک ستون است — یک نوار دکمه، یک منوی افقی — flexbox بگیرید. اگر همزمان به ردیف و ستون نیاز دارید — یک گرید کارت، یک صفحه با هدر/سایدبار/محتوا — grid بگیرید. فلکسباکس یکبعدی فکر میکند، گرید دوبعدی.
فلکسباکس: هر آیتم عرض خودش را میآورد
css.row { display: flex; flex-wrap: wrap; gap: 8px; }
با پنج آیتم با عرضهای ۱۲۰، ۲۰۰، ۱۵۰، ۱۰۰ و ۱۸۰ پیکسل، flex-wrap: wrap وقتی جا کم بیاید به ردیف بعد میرود — ولی هیچ تضمینی نیست آیتمهای ردیف دوم زیر همان نقطهی آیتمهای ردیف اول بایستند. فلکسباکس فقط داخل یک ردیف چیدمان میکند؛ ردیفها از دید هم بیخبرند.
گرید: همهی ردیفها یک جدول را میبینند
css.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
با همان پنج آیتم، grid-template-columns از قبل سه ستون همعرض تعریف میکند و هر آیتم — مهم نیست محتوایش چقدر باشد — دقیقاً در همان ستون مینشیند. ردیف دوم زیر ردیف اول، ستونبهستون همتراز است؛ چیزی که فلکسباکس اصلاً بلد نیست بدهد.
minmax، همان چیزی است که «ریسپانسیو بدون media query» را میسازد
css.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
}
auto-fill هر چند ستون که با عرض حداقل ۲۰۰ پیکسل جا میشود میگذارد، و 1fr باقیماندهی فضا را بین همان ستونها پخش میکند. با تغییر عرض صفحه، تعداد ستونها خودش عوض میشود — بدون یک خط @media.
این دو رقیب هم نیستند
اکثر صفحات واقعی از هر دو استفاده میکنند: grid برای اسکلت کلی صفحه (هدر، سایدبار، محتوا، فوتر)، و flexbox داخل هر بخش برای چیدمان یک ردیف از آیتمها (مثلاً دکمههای داخل یک تولبار). سؤال درست «کدام یکی؟» نیست، «این بخش خاص، یکبعدی است یا دوبعدی؟»
قانون عملی
| نیاز | انتخاب |
|---|---|
| یک ردیف یا ستون از آیتمها | flex |
| چیدمانی که همزمان ردیف و ستون مهم است | grid |
| تعداد ستونها باید با عرض صفحه خودش عوض شود | grid با auto-fill + minmax |
وسطچینکردن، جایی که فرقشان کمتر به چشم میآید
css.flex-center { display: flex; align-items: center; justify-content: center; }
.grid-center { display: grid; place-items: center; }
برای وسطچینکردن یک آیتم داخل والدش، هر دو یک نتیجه میدهند — فقط grid با place-items: center در یک خط همان کاری را میکند که flex با دو خاصیت جدا (align-items برای عمودی، justify-content برای افقی). این یکی از معدود جاهایی است که واقعاً فرقی نمیکند کدام را انتخاب کنید؛ هر دو خوانا و هر دو درستاند.
اگر میخواهید HTML و CSS را از صفر و با پروژهی واقعی تمرین کنید، دورهی HTML و CSS همین دو ابزار چیدمان را کنار هم و با مثال واقعی جا میاندازد.
نظرها
اولین نفری باشید که نظر میدهدسؤالتان را بپرسید یا تجربهتان را بنویسید — نویسندهی مطلب پاسخ میدهد.