فهرست مطالب
برای یک ردیف یا یک ستون از آیتم‌ها، مثلاً نوار دکمه یا منوی افقی، 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 از قبل سه ستون تعریف می‌کند و هر آیتم فقط داخل ستون خودش می‌نشیند؛ هیچ آیتمی به ستون همسایه سرریز نمی‌شود. یک نکته‌ی ظریف هم هست؛ ستون 1fr تا حد محتوای آیتمش پهن می‌شود و آیتم ۲۰۰ پیکسلی ستونش را از حدود ۱۶۱ پیکسل به ۲۰۰ می‌رساند، پس هم‌عرضی سه ستون به هم می‌خورد. وعده‌ی اصلی اما سر جایش است؛ ردیف دوم زیر ردیف اول، ستون‌به‌ستون هم‌تراز است، چیزی که فلکس‌باکس اصلاً بلد نیست بدهد.
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 همین دو ابزار چیدمان را کنار هم و با مثال واقعی جا می‌اندازد.
نظرها
اولین نفری باشید که نظر میدهدسؤالتان را بپرسید یا تجربه‌تان را بنویسید تا نویسنده‌ی مطلب پاسخ بدهد.