در حال بارگذاری...

Grid واکنش‌گرا در CSS

درس ناحیه‌های Grid به شما نام داد تا نقشه بکشید. Grid واکنش‌گرا می‌پرسد وقتی عرض صفحه کم می‌شود چه می‌شود: ستون‌ها جمع می‌شوند؟ سایدبار زیر هدر می‌رود؟ کارت‌ها بدون HTML دوم جابه‌جا می‌شوند؟ چند الگوی breakpoint آرام یاد می‌گیرید — ماژول «طراحی ریسپانسیو» جلوتر می‌آید.

جعبهٔ ابزار grid واکنش‌گرا

📊 grid واکنش‌گرا یک‌نگاهه

ابزار	کار روزمره
`grid-template-columns`	عوض کردن لیست track داخل media query (مثلاً دو ستون → یک)
`grid-template-areas`	نقشهٔ نام‌دار را وقتی stack بهتر از کنارهم است دوباره بکشید
`repeat(auto-fit, minmax(...))`	ستون کارت سیال بدون breakpoint برای هر تعداد
Media query	تغییر grid فقط وقتی viewport شرط را دارد
`gap`	فاصله را وقتی track یا نقشه عوض می‌شود حفظ می‌کند
بدون HTML اضافه برای هر عرض	همان DOM؛ CSS جابه‌جایی را می‌برد

از gridی شروع کنید که روی صفحهٔ عریض قبلاً درست بود. در یک breakpoint روشن فقط ستون، ردیف یا نقشهٔ ناحیه را عوض کنید — نه همهٔ property یک‌جا. نام‌های درس قبل بازنویسی واکنش‌گرا را خوانا می‌کنند.

ستون‌ها در breakpoint

وقتی پوستهٔ دو ستونی روی موبایل باید تک‌ستونه شود، داخل media query grid-template-columns را عوض کنید. اگر نقشه هنوز معنی دارد، فرزندان و نام ناحیه می‌توانند بمانند.

دو ستون به یک

css

.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}

نقشهٔ ناحیه را روی صفحهٔ باریک دوباره بکشید

نقشهٔ header / aside / main کنار هم اغلب روی عرض کم به بلوک جدید grid-template-areas نیاز دارد تا سایدبار زیر هدر بیاید. ردیف‌های داخل گیومه را بازنویسی کنید؛ ناحیه‌ها مستطیل بمانند.

پوستهٔ نام‌دار را stack کنید

css

.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside  main"
"footer footer";
gap: 1rem;
}

@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}

auto-fit و minmax برای تختهٔ کارت

برای گالری و داشبورد، repeat(auto-fit, minmax(...)) اجازه می‌دهد ستون‌ها با فضا ظاهر و wrap شوند — اغلب breakpoint دستی کمتری نسبت به تعداد ستون ثابت.

ستون کارت سیال

css

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

صفحهٔ باریک زبان layout جدا نیست — همان ابزار grid، فقط track یا نقشهٔ دیگر. به‌جای «HTML موبایل»، همان درخت را با CSS جابه‌جا کنید.

عادت آرام grid واکنش‌گرا

اول یک breakpoint اصلی. وقتی برچسب کمک می‌کند، تغییر ستون را با بازنویسی نقشه همراه کنید. برای کارت‌هایی که تعدادشان باید انعطاف بگیرد auto-fit بگذارید. ترتیب DOM برای کیبورد منطقی بماند. سیستم breakpoint کامل و تایپوگرافی سیال در ماژول ریسپانسیو می‌آید.

پوستهٔ نام‌دار با breakpoint stack

css

.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}

@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}

کف minmax روی تختهٔ ثابت

css

.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}

@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}

خودتان امتحان کنید

پوستهٔ دو ستونی را زیر max-width: 40rem تک‌ستونه کنید.
نقشهٔ header / aside / main / footer را برای layout باریک stack بازنویسی کنید.
ردیف کارت با repeat(auto-fit, minmax(14rem, 1fr)) بسازید.
یک breakpoint آرام اضافه کنید — همهٔ property grid را یک‌جا reset نکنید.
یک درخت HTML نگه دارید؛ درس «طراحی ریسپانسیو» بعدی دوره را یادداشت کنید.

اشتباهات رایج

فقط کوچک کردن track به‌جای عوض کردن ستون یا stack
ساخت HTML جدا برای موبایل به‌جای به‌روز کردن grid در CSS
تعداد سلول ناهمسان وقتی ردیف‌های grid-template-areas را عوض می‌کنید
یک media query غول‌آسا که همهٔ grid و gap را یک‌جا عوض می‌کند
فرض کردن این درس = کل دورهٔ طراحی ریسپانسیو

جمع‌بندی

Grid واکنش‌گرا ستون، نقشه و تختهٔ auto-fit را با عرض تطبیق می‌دهد
Media query تغییر track و نقشه را به viewport مناسب محدود می‌کند
نام‌های درس ناحیه‌ها با بازنویسی نقشه روی صفحهٔ کوچک جفت خوبی‌اند
breakpoint آرام و یک DOM ترجیح داده می‌شود
ماژول Grid (۴۹۰–۵۳۰) تمام شد؛ ماژول طراحی ریسپانسیو بعد است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان