آیتم‌های Grid در CSS
درس کانتینر Grid پدر را هدایت کرد — track، gap و پیش‌فرض سلول. آیتم‌های grid سؤال دیگری می‌پرسند: هر فرزند چطور خط بگیرد، trackها را بپوشاند و تراز داخل سلولش را عوض کند؟ قبل از areaهای نام‌دار، جای‌گذاری روی خط را مسلط شوید.
جعبهٔ ابزار آیتم‌های grid
📊 آیتم‌های grid یک‌نگاهه
| ویژگی | کار روزمره |
|---|---|
grid-column |
خط شروع و پایان ستون آیتم را می‌گذارد (خلاصه) |
grid-row |
خط شروع و پایان ردیف آیتم را می‌گذارد (خلاصه) |
span |
آیتم را از خط شروع به‌اندازهٔ N track می‌کشد |
justify-self |
justify-items را برای یک آیتم لغو می‌کند (محور inline) |
align-self |
align-items را برای یک آیتم لغو می‌کند (محور block) |
place-self |
خلاصه برای align-self + justify-self |
خطوط grid از لبهٔ شروع شماره‌گذاری می‌شوند. آیتمی که از خط ۱ شروع و به خط ۳ تمام می‌شود دو track ستونی را می‌پوشاند. اول با خط فکر کنید؛ area نام‌دار بعداً می‌آید.
grid-column — روی خطوط ستون بنشین
grid-column: start / end فرزند را بین خطوط ستون قفل می‌کند. سایدبار غالباً روی track اول می‌نشیند و پنل اصلی بقیه را می‌گیرد.
.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
.board__aside {
grid-column: 1 / 2;
}
.board__main {
grid-column: 2 / 3;
}
span — روی چند track بکش
span از خط شروع، trackها را می‌شمارد. هیرویی که باید تمام عرض را بگیرد روی board سه‌ستونه اغلب grid-column: 1 / span 3 می‌گیرد.
.hero {
grid-column: 1 / span 3;
}
grid-row — روی خطوط ردیف بنشین
همان ایده روی محور block. بنر را به نوار بالا بچسبانید، یا با span بگذارید کارت بلند دو track ردیفی بگیرد.
.banner {
grid-row: 1 / 2;
}
.tall-card {
grid-row: 2 / span 2;
}
ستون و ردیف با هم
وقتی یک فرزند مستطیل مشخص می‌خواهد هر دو را ترکیب کنید — مثلاً کاشی ویژه که دو ستون و یک ردیف را می‌پوشاند.
.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}
place-self — یک آیتم، تراز سلولی دیگر
justify-items / align-items کانتینر را برای یک فرزند لغو کنید. وقتی هر دو محور یکی باشند، place-self: center خلاصهٔ آرامی است.
.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}
.board .badge {
place-self: center;
}
عادت آرام آیتم grid
اول با خطوط ستون و ردیف جای بدهید، وقتی فرزند چند track می‌خواهد span بزنید، بعد تراز تک‌موردی را با place-self تنظیم کنید. ترتیب DOM را عاقلانه نگه دارید — ترفند order که فوکوس صفحه‌کلید را به هم بزند نزنید. areaهای نام‌دار قالب را برای درس Grid Areas بگذارید.
.shell__hero {
grid-column: 1 / -1;
}
.shell__aside {
grid-column: 1 / 2;
align-self: start;
}
.shell__main {
grid-column: 2 / 3;
}
خودتان تمرین کنید
- board دونستونه بسازید؛ aside را با
grid-column: 1 / 2و main را با2 / 3بگذارید. - هیرو سه‌ستونه با
grid-column: 1 / span 3اضافه کنید. - بنر را با
grid-row: 1 / 2بچسبانید. - کاشی ویژه را روی دو ستون و یک ردیف span کنید.
- یک badge را با
place-self: centerوسط بچینید و area نام‌دار را برای بعد یادداشت کنید.
اشتباه‌های رایج
- گذاشتن
spanیا شمارهٔ خط روی کانتینر به‌جای آیتم - فراموش کردن اینکه خطوط از ۱ شروع می‌شوند و track را مثل خط شمردن
- قاطی کردن جای‌گذاری آیتم با بسته‌بندی
justify-contentروی پدر - پریدن به
grid-template-areasنام‌دار قبل از مسلط شدن روی خط - با
orderظاهر را جابه‌جا کردن و خراب کردن ترتیب tab/منبع
خلاصه
- آیتم‌های grid جای‌گذاری خط، span و تراز تک‌آیتم را کنترل می‌کنند
grid-column/grid-rowخط شروع و پایان را قفل می‌کنندspanاز خط شروع روی trackها می‌کشدplace-self(و ویژگی‌های self) تراز سلول را برای یک فرزند لغو می‌کنند- areaهای نام‌دار قالب در درس بعدی Grid Areas می‌آیند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود