کانتینر Grid در CSS
مقدمهٔ Grid والد را به شبکه تبدیل کرد. این درس روی کانتینر می‌ماند: track تعریف کنید، gap بگذارید، آیتم را داخل سلول تراز کنید، و وقتی فضای آزاد ماند کل شبکه را بسته‌بندی کنید. span آیتم و areaهای نام‌دار برای درس‌های Grid Items و Grid Areas می‌مانند.
جعبهٔ ابزار کانتینر grid
📊 کانتینر grid یک‌نگاهه
| ویژگی | کار روزمره |
|---|---|
grid-template-columns |
اندازهٔ trackهای ستونی را می‌گذارد |
grid-template-rows |
اندازهٔ trackهای ردیفی را می‌گذارد |
gap |
فاصله بین trackها |
justify-items / align-items |
هر آیتم را داخل سلولش تراز می‌کند (محور inline / block) |
justify-content / align-content |
وقتی شبکه از کانتینر کوچک‌تر است کل grid را جابه‌جا می‌کند |
grid-auto-flow |
ترتیب بسته‌بندی جای‌گذاری خودکار را کنترل می‌کند (row یا column) |
اول trackها را بکشید. بعد ببینید سلول‌ها محتوایشان را چطور تراز کنند، و تازه بعدش فضای باقی دور کل شبکه چه رفتاری داشته باشد.
trackهای قالب — ستون و ردیف
grid-template-columns و grid-template-rows شبکه را اسکچ می‌کنند. برای boardهای روزمره fr، طول و repeat() را قاطی کنید.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — gutter را صادق نگه دار
gap (یا row-gap / column-gap) trackها را بدون ترفند margin روی هر فرزند فاصله می‌دهد.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items و align-items — داخل سلول
این‌ها هر آیتم را داخل سلولش تراز می‌کنند. justify-items روی محور inline؛ align-items روی محور block. با بسته‌بندی محتوا قاطی‌شان نکنید.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content و align-content — بسته‌بندی شبکه
وقتی trackها از کانتینر کوچک‌ترند، ویژگی‌های content کل شبکه را جابه‌جا یا فاصله‌دار می‌کنند. برای تختهٔ آیکن که نباید تا ابد کش بیاید مفید است.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
عادت آرام کانتینر grid
اول قالب ستون و ردیف، بعد gap، بعد تراز آیتم داخل سلول، بعد اگر فضای آزاد ماند بسته‌بندی content. وقتی ترتیب جای‌گذاری خودکار مهم است به grid-auto-flow نگاهی بیندازید. span، شمارهٔ خط و areaهای نام‌دار را برای درس‌های بعدی Grid بگذارید.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
خودتان امتحان کنید
- board با سه ستون
1frو ردیف‌هایauto 1fr autoبسازید. gap: 1remاضافه کنید.- محتوای سلول را با
justify-itemsوalign-itemsوسط کنید. - یک board با track ثابت را با
justify-content: space-betweenبسته‌بندی کنید. - یک ویژگی بنویسید که برای Grid Items یا Grid Areas می‌گذارید.
اشتباه‌های رایج
- قاطی کردن
justify-items(داخل سلول) باjustify-content(کل شبکه) - گذاشتن زودهنگام
spanآیتم یا نام area روی کانتینر - فقط ستون تعریف کردن و تعجب از ارتفاع تصادفی ردیف‌ها
- آوردن عادت‌های
growفلکس روی کانتینر grid - این درس را کل ماژول Areas دانستن
خلاصه
- ویژگی‌های کانتینر grid track، gutter و تراز را تعریف می‌کنند
grid-template-columns/rowsشبکه را اسکچ می‌کنندjustify-items/align-itemsمحتوا را داخل سلول تراز می‌کنندjustify-content/align-contentشبکه را در فضای آزاد بسته‌بندی می‌کنند- span آیتم و areaهای نام‌دار در درس‌های بعدی Grid می‌آیند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود