Grid در CSS
Flexbox آیتم‌ها را در یک جهت چید. CSS Grid فصل بعد را باز می‌کند: ردیف و ستون با هم. display: grid را روشن کنید، track بکشید، gap بگذارید، بعد در درس‌های Grid Container، Items، Areas و Responsive عمیق‌تر بروید.
جعبهٔ ابزار شروع Grid
📊 Grid یک‌نگاهه
| مفهوم | کار روزمره |
|---|---|
| کانتینر Grid | والد با display: grid (یا inline-grid) |
| آیتم‌های Grid | فرزندان مستقیمی که در شبکه می‌نشینند |
| Trackها | ردیف‌ها و ستون‌هایی که شبکه را می‌سازند |
| سلول / area | جایی که آیتم می‌نشیند (area در درس بعد) |
gap |
فاصله بین trackها بدون حاشیهٔ دستی |
واحد fr |
تقسیم فضای باقی بین trackها (پیش‌نمایش) |
Grid را کاغذ شطرنجی صفحه بدانید: اول ستون و ردیف می‌کشید، بعد محتوا را در سلول‌ها می‌گذارید. Flexbox برای تولبار و خوشه‌های یک‌محوره عالی می‌ماند.
display: grid — شبکه را روشن کن
روی والد display: grid بگذارید. فرزندان خودبه‌خود آیتم Grid می‌شوند — برای مدل پایه کلاس اضافه لازم نیست.
.board {
display: grid;
}
اول ستون‌ها — یک قالب ساده
grid-template-columns trackهای عمودی را تعریف می‌کند. سه ستون برابر اسکچ آرامی برای کارت یا کاشی است.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — gutter صادق
از gap (یا row-gap / column-gap) استفاده کنید تا فاصله وقتی trackها عوض می‌شوند یکدست بماند. gap را به پاشیدن margin روی هر فرزند ترجیح دهید.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
یک ماتریس کوچک کارت
همان ایدهٔ اسکچ گالری — track برابر به‌همراه gap — ولی حالا زبان Grid حرف می‌زنید، نه فقط flex-wrap.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — فضای باقی را قسمت کن
واحد fr فضای آزاد را بین trackها تقسیم می‌کند. 2fr 1fr وقتی جا بماند ستون اول را دو برابر دوم می‌کند.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
عادت آرام Grid
Grid را برای پوستهٔ دوبعدی صفحه و ماتریس‌ها به کار ببرید. Flexbox را برای ردیف یک‌بعدی نگه دارید. با display: grid، یک grid-template-columns ساده و gap شروع کنید. جای‌گذاری عمیق خودکار، areaهای نام‌دار و trackهای واکنش‌گرا را برای درس‌های بعد بگذارید.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
خودتان امتحان کنید
- کانتینری با
display: gridبسازید. grid-template-columns: repeat(3, 1fr)بگذارید.- بین trackها
gap: 1remاضافه کنید. - برای پوستهٔ main + rail مقدار
2fr 1frرا امتحان کنید. - یک جمله بنویسید: کی هنوز Flexbox را انتخاب می‌کنید؟
اشتباه‌های رایج
- گذاشتن
display: gridروی هر عنصر بدون نیاز چیدمان - انتظار که فقط wrap در Flexbox جای Grid دوبعدی واقعی را بگیرد
- رد کردن
gapو تا ابد جنگیدن با margin فرزندان - پریدن به areaهای نام‌دار قبل از اینکه track پایه جا بیفتد
- ساختن کل پوستهٔ صفحه با float وقتی Grid بهتر می‌نشیند
خلاصه
- CSS Grid دوبعدی است: ردیف و ستون با هم
display: gridفرزندان را آیتم Grid می‌کندgrid-template-columns(و بعداً ردیف‌ها) track را تعریف می‌کنندgapوfrفاصله و فضای آزاد را آرام نگه می‌دارند- درس‌های عمیق‌تر کانتینر، آیتم، area و Grid واکنش‌گرا بعداً می‌آیند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود