پروژه گرید: ساخت یک Layout پیچیده و شیک 🏗️

22 مهر 1404 0 بررسی 5بازدید مدیریت

پروژه خفن: ساخت Layout کامل صفحه با CSS Grid! 🚀

سلام به همه! تا اینجا کلی چیزهای هیجان‌انگیز در مورد CSS Grid یاد گرفتیم. حالا وقتشه که دانش‌مون رو به کار بگیریم و یه پروژه‌ی واقعی بسازیم! قراره یه Layout کامل برای یک صفحه وب طراحی کنیم، درست مثل ساختمون‌سازی که اول نقشه رو می‌کشیم، بعد بناها رو سر جاشون می‌ذاریم. Grid اینجا ابزار اصلی ماست تا header، footer، sidebar و محتوای اصلی رو به شکلی زیبا و کاملاً ریسپانسیو بچینیم. آماده‌اید که با هم یه شاهکار بسازیم؟ 💪

1. ساختار HTML: اسکلت صفحه ما 뼈대

اول از همه، یه ساختار ساده‌ی HTML برای بخش‌های مختلف صفحه درست می‌کنیم. این بخش‌ها رو داخل یه کانتینر اصلی قرار می‌دیم که قراره Grid اصلی ما باشه.


<body>
  <div class="page-container">
    <header class="page-header">
      <h1>وبسایت من</h1>
      <!-- لینک‌های ناوبری -->
    </header>

    <nav class="page-nav">
      <h2>منو</h2>
      <ul>
        <li><a href="#">صفحه اصلی</a></li>
        <li><a href="#">درباره ما</a></li>
        <li><a href="#">خدمات</a></li>
        <li><a href="#">تماس</a></li>
      </ul>
    </nav>

    <main class="page-main">
      <h2>محتوای اصلی صفحه</h2>
      <p>اینجا کلی متن و تصویر جذاب داریم...</p>
      <p>...و ادامه محتوا...</p>
    </main>

    <aside class="page-sidebar">
      <h3>سایدبار</h3>
      <p>تبلیغات یا لینک‌های مرتبط</p>
    </aside>

    <footer class="page-footer">
      <p>© 2023 وبسایت من. همه حقوق محفوظ است.</p>
    </footer>
  </div>
</body>

همه بخش‌ها رو داخل یه div با کلاس .page-container گذاشتیم. این کانتینر قراره Grid اصلی ما باشه.

2. استایل‌دهی اولیه و فعال کردن Grid! 🎨

اول یه سری استایل‌های پایه‌ای برای بدنه و حذف مارجین‌های پیش‌فرض می‌دیم. بعد، .page-container رو به یه Grid Container تبدیل می‌کنیم و ساختار کلی صفحه رو با grid-template-areas مشخص می‌کنیم. این قسمت خیلی مهمه چون نقشه صفحه رو اینجا می‌کشیم!


/* استایل‌های عمومی */
body {
  margin: 0;
  font-family: 'vazir', sans-serif;
  direction: rtl;
  background-color: #f5f5f5; /* یه پس‌زمینه ملایم */
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* استایل کانتینر اصلی Grid */
.page-container {
  display: grid;
  /* تعریف نواحی مختلف صفحه */
  grid-template-areas:
    "header header header"  /* سطر اول: هدر کل عرض */
    "nav    main   sidebar" /* سطر دوم: منو، محتوا، سایدبار */
    "footer footer footer"; /* سطر سوم: فوتر کل عرض */

  /* تعریف ستون‌ها */
  grid-template-columns: 200px 1fr 250px; /* ستون اول 200px (منو)، ستون دوم فضای خالی، ستون سوم 250px (سایدبار) */

  /* تعریف سطرها */
  grid-template-rows: auto 1fr auto; /* هدر و فوتر به اندازه محتوا، محتوا بقیه فضا */

  min-height: 100vh; /* حداقل ارتفاع صفحه به اندازه کل صفحه نمایش */
  gap: 10px; /* فاصله بین بخش‌ها */
  padding: 10px;
  box-sizing: border-box; /* محاسبه padding در ابعاد */
}

/* استایل‌های بخش‌های مختلف */
.page-header {
  grid-area: header; /* اختصاص به ناحیه header */
  background-color: #ffccbc;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.page-nav {
  grid-area: nav; /* اختصاص به ناحیه nav */
  background-color: #ffab91;
  padding: 20px;
  border-radius: 8px;
}

.page-main {
  grid-area: main; /* اختصاص به ناحیه main */
  background-color: #fff9c4;
  padding: 20px;
  border-radius: 8px;
}

.page-sidebar {
  grid-area: sidebar; /* اختصاص به ناحیه sidebar */
  background-color: #ffe0b2;
  padding: 20px;
  border-radius: 8px;
}

.page-footer {
  grid-area: footer; /* اختصاص به ناحیه footer */
  background-color: #bf3608;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* استایل‌های اضافه برای خوانایی بهتر */
.page-nav ul li {
  margin-bottom: 10px;
}
.page-nav a {
  display: block;
  padding: 5px 0;
}
.page-nav a:hover {
  color: #ff6f00;
}

با grid-template-areas، ما خیلی واضح و بصری مشخص کردیم که هر بخش از صفحه کجا باید قرار بگیره. این یعنی خوانایی فوق‌العاده بالای کد!

3. واکنش‌گرایی (Responsiveness) با Media Queries! 📱

Layout فعلی ما برای دسکتاپ عالیه، اما روی موبایل ممکنه بخش‌ها خیلی کوچک بشن یا جا نشن. اینجا نقش Media Queries پررنگ می‌شه. با یه Media Query ساده، ساختار Grid رو برای صفحه‌های کوچکتر تغییر می‌دیم.


@media (max-width: 768px) {
  .page-container {
    /* تغییر ساختار به یک ستون */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";

    /* همه ستون‌ها عرض مساوی */
    grid-template-columns: 1fr;

    /* سطرها به اندازه محتوا */
    grid-template-rows: auto auto 1fr auto auto; /* هدر، منو، محتوا (بقیه فضا)، سایدبار، فوتر */
    min-height: 100vh; /* همچنان کل صفحه رو بگیره */
  }

  /* سایدبار رو می‌تونیم مخفی کنیم یا کاری کنیم که زیر محتوا بیاد */
  .page-sidebar {
    /* یا مخفی کردن: */
    /* display: none; */
    /* یا قرار دادن زیر محتوا */
    order: 4; /* ترتیب نمایش در Grid تک ستونی */
  }
  .page-nav {
     order: 2;
  }
  .page-main {
     order: 3;
  }
   .page-footer {
     order: 5;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.8em; /* کوچکتر کردن هدر */
  }
  .page-nav ul li {
    font-size: 0.9em; /* کوچکتر کردن فونت منو */
  }
  .page-main p, .page-sidebar p {
    font-size: 0.9em; /* کوچکتر کردن فونت پاراگراف‌ها */
  }
  .page-container {
     gap: 5px; /* کم کردن فاصله کلی */
     padding: 5px;
  }
  .page-header, .page-nav, .page-main, .page-sidebar, .page-footer {
     padding: 15px; /* کم کردن padding داخلی بخش‌ها */
  }
}

با تغییر grid-template-areas و grid-template-columns در Media Query، ما ساختار صفحه رو کاملاً عوض کردیم تا روی موبایل‌ها هم عالی به نظر بیاد.

4. نتیجه نهایی و نکات تکمیلی! 🎉

تبریک! شما با موفقیت یه Layout کامل و کاملاً ریسپانسیو برای صفحه وب‌تون با استفاده از CSS Grid ساختید. همونطور که دیدید، Grid با قابلیت grid-template-areas و مدیریت ستون‌ها و سطرها، کار رو برای چیدمان‌های پیچیده خیلی ساده و لذت‌بخش می‌کنه.

نکات تکمیلی:

می‌تونید برای هر کدوم از بخش‌ها، استایل‌های بیشتری مثل رنگ پس‌زمینه، فونت، و … اضافه کنید.
برای بهبود دسترسی‌پذیری، مطمئن بشید که ترتیب منطقی محتوا با تگ‌های HTML حفظ شده.
می‌تونید از Grid برای ساخت Layoutهای پیچیده‌تر مثل داشبورد یا سایت‌های خبری هم استفاده کنید.

استفاده از CSS Grid برای چیدمان کلی صفحه، سرعت توسعه رو به شدت بالا می‌بره و نتیجه‌ی کار، همیشه مرتب و قابل مدیریت خواهد بود. امیدوارم از این پروژه لذت برده باشید! حالا وقتشه که خودتون دست به کار بشید و Layoutهای خلاقانه‌تری بسازید! موفق باشید! 🌟

خدمات حرفه ای با برندیس

طراحی سایت فروشگاهی

طراحی سایت شرکتی

طراحی سایت آموزشی

سئوی هوشمند

افزایش امنیت سایت

اپلیکیشن هوشمند

طراحی لوگو و بنر

پشتیبان تیکتی آنلاین

ارتباط زنده با کاربران

پروژه گرید: ساخت یک Layout پیچیده و شیک 🏗️