بحث Grid در برابر Flexbox بیشتر سر و صداست تا دانش. این دو ابزار مکمل هم‌اند. این درخت تصمیم همان است که خودم استفاده می‌کنم.
قانون سی‌ثانیه‌ای
- چیدمان یک‌بعدی (یک ردیف یا یک ستون) → Flexbox
- چیدمان دوبعدی (ردیف و ستون با هم) → Grid
کارت‌هایی که می‌پیچند
Flexbox انتخاب طبیعی است:
css
.card-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
چیدمان مجله‌ای
Grid آن‌جا می‌درخشد که ردیف‌ها باید بین ستون‌ها تراز بمانند:
css
.magazine {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.magazine > .feature {
grid-column: span 8;
}
.magazine > .aside {
grid-column: span 4;
}
تراز کردن
place-items در Grid وسط‌چین‌کردن را بی‌زحمت می‌کند:
css
.center {
display: grid;
place-items: center;
}
جمع‌بندی
هر وقت دیدی با هک‌های flex می‌خواهی چیزی را به پایین کارت بچسبانی، آن کارت را grid کن. هر وقت دیدی برای نوبار داری grid-template-columns: 1fr 1fr 1fr می‌نویسی، به flex برگرد. تیم‌ات ازت تشکر می‌کند.