Bahram عزیز، عالی پیش می‌ری! 🌟
در این بخش دیدیم چطور می‌شه با ترکیب Grid و کمی خلاقیت، یک ناحیه‌ی تمام‌صفحه با چیدمان دقیق ساخت. بیاییم مرور کنیم:

---

🧱 مراحل کلیدی

۱. تنظیم ارتفاع تمام‌صفحه

.art-banner {
  display: grid;
  height: 100vh; /* کل ارتفاع مرورگر */
}

🔹 واحد vh یعنی “viewport height”. مقدار 100vh یعنی کل ارتفاع پنجره مرورگر.

---

۲. تعریف ستون‌ها و ردیف‌ها با فاصله‌ی ثابت

.art-banner {
  grid-template-columns: 20px 1fr 1fr 1fr 20px;
  grid-template-rows: 20px 1fr 1fr 1fr 20px;
}

🔹 ستون‌های کناری ۲۰ پیکسل فاصله دارند.
🔹 سه ستون و سه ردیف وسط با 1fr مساوی تقسیم می‌شوند.

---

۳. پس‌زمینه‌ی تمام‌عرض

.art-banner-bg {
  grid-column: 1 / -1; /* از خط اول تا آخر */
  grid-row: 1 / -1;
  background: url(bg.png) no-repeat center/cover;
}

🔹 پس‌زمینه کل شبکه را می‌پوشاند.

---

۴. جای‌گذاری متن و Badge

.banner-text {
  grid-column: 2 / span 2; /* دو ستون وسط سمت چپ */
  grid-row: 3;             /* ردیف وسط */
  align-self: center;
  justify-self: center;
}

.badge {
  grid-column: 4; /* ستون سمت راست */
  grid-row: 3;    /* ردیف وسط */
  align-self: center;
  justify-self: center;
  display: grid;
}
.badge p {
  margin: auto; /* متن داخل Badge وسط‌چین */
}

---

۵. استفاده از pseudo-element برای شکل‌های گوشه‌ای

.art-banner::before {
  content: "";
  border-top: 5px solid hotpink;
  border-right: 5px solid hotpink;
  grid-column: 4;
  grid-row: 2 / span 2; /* بالا سمت راست */
}

.art-banner::after {
  content: "";
  border-bottom: 5px solid hotpink;
  border-left: 5px solid hotpink;
  grid-column: 2;
  grid-row: 3 / span 2; /* پایین سمت چپ */
}

🔹 بدون نیاز به div اضافی، با ::before و ::after شکل‌ها را اضافه کردیم.

---

🎯 جمع‌بندی

• با Grid توانستیم یک ناحیه‌ی تمام‌صفحه بسازیم.
• ستون‌ها و ردیف‌ها را با ترکیب px و fr تعریف کردیم.
• متن و Badge را در سلول‌های دقیق قرار دادیم و با align-self و justify-self وسط‌چین کردیم.
• با pseudo-element شکل‌های تزئینی را به گوشه‌ها اضافه کردیم.

---

✨ این مثال نشان داد که Grid فقط برای جدول‌بندی ساده نیست؛ می‌تواند جایگزین روش‌های پیچیده‌ی absolute positioning یا Flexbox شود و طراحی‌های خلاقانه و واکنش‌گرا بسازد.

💡 پیشنهاد تمرین: یک بخش تمام‌صفحه بساز و داخلش یک متن و یک دکمه قرار بده. سپس با Grid آن‌ها را وسط‌چین کن و با pseudo-element گوشه‌های تزئینی اضافه کن.