تسلط بر شبکه CSS: از مبتدی تا بهترین روشهای پیشرفته

ek3nk4r 2025-04-12

0 2 خواندن این مطلب 3 دقیقه زمان میبرد

تسلط بر شبکه CSS: از مبتدی تا بهترین روشهای پیشرفته

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

CSS Grid یک سیستم طرح بندی قدرتمند است که به شما امکان می دهد طرح های وب پیچیده و پاسخگو را با سهولت طراحی کنید. این که آیا شما تازه شروع به اصلاح مهارت های خود کرده اید ، این بهترین شیوه ها به شما در نوشتن طرح های تمیز کننده ، کارآمدتر و قابل حفظ شبکه کمک می کند.

فهرست مطالب

🚀 سطح مبتدی: شروع با شبکه CSS

1. استفاده کنید `display: grid` درست

ابتدا یک ظرف شبکه را تعریف کنید:

.container {
  display: grid;
}

2. ستون ها و ردیف ها را صریح تعریف کنید

استفاده کردن grid-template-columns وت grid-template-rows برای ساختار شبکه خود:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  grid-template-rows: 100px auto; /* Two rows */
}

3. استفاده کنید `fr` واحد برای انعطاف پذیری

در fr (واحد کسری) فضای متناسب را توزیع می کند:

.container {
  grid-template-columns: 2fr 1fr; /* 2:1 ratio */
}

4. شکاف برای فاصله (به جای حاشیه)

استفاده کردن gap (قبلاً grid-gap) برای فاصله سازگار:

.container {
  gap: 1rem; /* Adds space between rows and columns */
}

5. موارد را با استفاده از شماره خط قرار دهید

موارد شبکه را می توان با مراجعه به خطوط شبکه قرار داد:

.item {
  grid-column: 1 / 3; /* Spans from line 1 to 3 */
  grid-row: 1; /* Occupies first row */
}

🔥 سطح متوسط: بهبود قابلیت حفظ

6. خطوط شبکه برای وضوح

به جای اعداد ، برای خوانایی بهتر از خطوط نامگذاری شده استفاده کنید:

.container {
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}
.item {
  grid-column: content-start / content-end;
}

7. استفاده کنید `grid-template-areas` برای چیدمان های بصری

مناطقی را برای قرار دادن آسان تر تعریف کنید:

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.header { grid-area: header; }
.main { grid-area: main; }

8

شبکه های انعطاف پذیر ایجاد کنید که با اندازه صفحه سازگار هستند:

.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

auto-fit آهنگ های خالی سقوط می کند.
auto-fill همه آهنگ ها را حتی اگر خالی باشد ، نگه می دارد.

9. موارد را به طور موثر تراز و توجیه کنید

تراز کنترل در داخل شبکه:

.container {
  align-items: center; /* Vertical alignment */
  justify-items: center; /* Horizontal alignment */
}

10. استفاده کنید `minmax()` برای اندازه انعطاف پذیر

محدوده اندازه برای ستون ها/ردیف ها را تعریف کنید:

.container {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

🏆 سطح پیشرفته: تکنیک های تخصصی

11. زیر شبکه برای شبکه های تو در تو (CSS مدرن)

استفاده کردن subgrid برای تراز کردن شبکه های کودک با والدین:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.child {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* Inherits parent's grid */
}

(توجه: پشتیبانی از مرورگر را بررسی کنید subgrid.)

12. طرح سنگ تراشی با شبکه (آزمایشی)

طرح های شبیه Pinterest مانند ایجاد کنید:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: masonry; /* Only supported in Firefox */
}

13. شبکه های پویا با متغیرهای CSS

شبکه ها را تنظیم کنید:

.container {
  --cols: 3;
  grid-template-columns: repeat(var(--cols), 1fr);
}
@media (max-width: 768px) {
  .container { --cols: 2; }
}

14. موارد نسبت ابعاد

نسبت ابعاد را در سلولهای شبکه حفظ کنید:

.item {
  aspect-ratio: 16/9; /* Modern browsers */
}

15. اشکال زدایی با مرورگر devtools

برای بازرسی از خطوط شبکه ، اندازه آهنگ و همپوشانی از Chrome/Firefox Devtools استفاده کنید.

افکار نهایی

CSS Grid یک تغییر دهنده بازی برای طرح های وب است. با شبکه های اساسی ، اهرم شروع کنید fr وت minmax() برای انعطاف پذیری ، و ویژگی های پیشرفته مانند subgrid و طرح های سنگ تراشی در هنگام پیشرفت.

💡 برای نکته: همیشه قبل از استفاده از ویژگی های پیشرفته ، Caniuse.com را برای پشتیبانی مرورگر بررسی کنید.