ناحیه‌های Grid در CSS
درس آیتم‌های Grid شمارهٔ خط و span را یاد داد. ناحیه‌های نام‌دار سؤال دوستانه‌تری می‌پرسند: می‌توانید صفحه را با کلمه بکشید — header، sidebar، main، footer — و هر فرزند همان برچسب را بگیرد؟ نقشه با grid-template-areas است؛ سنجاق با grid-area.
جعبهٔ ابزار ناحیه‌های grid
📊 ناحیه‌های grid یک‌نگاهه
| ویژگی / نشانه | کار روزمره |
|---|---|
grid-template-areas |
روی کانتینر: رشته‌های نقل‌قول‌دار هر ردیف را نام می‌گذارد |
grid-area |
روی آیتم: کدام ناحیهٔ نام‌دار مال این فرزند است |
| نام تکراری | همان نام در سلول‌های مجاور = یک مستطیل کشیده‌شده |
. (نقطه) |
سلول خالی بدون نام |
| Trackهای قالب | اندازه را هنوز با grid-template-columns / rows می‌گذارید |
هر رشتهٔ داخل گیومه یک ردیف نقشه است. نام‌های داخل ردیف با فاصله جدا می‌شوند. همهٔ ردیف‌ها باید تعداد سلول یکسان داشته باشند؛ وگرنه قالب نامعتبر می‌شود.
grid-template-areas — نقشه را بکشید
چیدمانی را که در ذهن دارید با برچسب‌های ساده بنویسید. پوستهٔ کلاسیک صفحه اغلب چهار نقش نام‌دار روی سه ردیف است.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — هر فرزند را سنجاق کنید
هر فرزند یکی از نام‌های نقشه را برمی‌دارد. کلاس می‌تواند BEM بماند؛ Grid همان توکن ناحیه را می‌خواند.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
با تکرار نام بکشید
برای پهن کردن یک ناحیه، همان نام را در همهٔ سلول‌هایی که باید مال او باشند بنویسید. ناحیه باید مستطیل توپر بماند — شکل L ممنوع.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
سلول خالی با نقطه
یک . تنها یعنی حفره. وقتی تختهٔ کارت باید جا خالی بگذارد بدون اینکه اسم جعلی بسازید، مفید است.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
عادت آرام ناحیه‌های نام‌دار
اول نقشه را در grid-template-areas بکشید، trackها را با columns/rows اندازه بدهید، بعد فرزندان را با grid-area سنجاق کنید. نام‌ها کوتاه و مستطیلی بمانند. وقتی یک جای‌گذاری تک‌نفره از بازنویسی کل نقشه روشن‌تر است، به grid-column / grid-row برگردید. بازنویسی ریسپانسیو نقشه برای درس Grid Responsive می‌ماند.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
خودتان تمرین کنید
- با
grid-template-areasنقشهٔ header / aside+main / footer بکشید. - چهار فرزند را با
grid-areaهم‌نام بدهید. - هیروی سه‌ستونه بسازید که
heroرا در ردیف اول تکرار کند. - در تختهٔ دو در دو یک سلول را با
.خالی بگذارید. - اندازهٔ track را روی کانتینر نگه دارید؛ تعویض نقشه را برای درس ریسپانسیو Grid یادداشت کنید.
اشتباه‌های رایج
- نام‌گذاری ناحیهٔ Lشکل یا تکه‌تکه (ناحیه‌ها باید مستطیل باشند)
- تعداد سلول ناهماهنگ بین ردیف‌های نقل‌قول‌دار
- گذاشتن
grid-template-areasروی فرزند به‌جای کانتینر - تصور اینکه نام ناحیه همان سلکتور کلاس CSS است — این‌ها توکن قالب‌اند
- حذف
grid-template-columns/rowsبه امید اینکه فقط نام‌ها اندازه بدهند
جمع‌بندی
- ناحیه‌های نام‌دار چیدمان را به نقشهٔ خوانا تبدیل می‌کنند
grid-template-areasمال کانتینر است؛grid-areaمال هر آیتم- برای span نام را تکرار کنید؛ برای خالی
.بگذارید - ناحیه‌ها را مستطیلی نگه دارید و با اندازهٔ track جفت کنید
- جای‌گذاری خطی هنوز کار می‌کند؛ تغییر نقشهٔ ریسپانسیو بعدی است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود