Advance CSS শিখুন বাংলায় (পর্ব ৪) — CSS Grid এডভান্সড প্যাটার্ন (grid-template-areas) শিখুন

আগের পর্বে আমরা অ্যানিমেশন নিয়ে গভীরে গিয়েছিলাম। এই পর্বে আমরা ফিরে যাচ্ছি লেআউটে — CSS Grid-এর একটা শক্তিশালী ফিচার grid-template-areas দিয়ে, যেটা দিয়ে জটিল পেজ লেআউট প্রায় "ছবি আঁকার মতো" সহজে বানানো যায়।

সমস্যাটা কী?

সাধারণ CSS Grid-এ grid-column আর grid-row দিয়ে সংখ্যা গুনে গুনে এলিমেন্ট বসাতে হয় — এটা কাজ করে, কিন্তু লেআউট জটিল হলে সংখ্যাগুলো মনে রাখা কঠিন হয়ে যায়, আর CSS পড়ে বোঝাও কঠিন হয়। grid-template-areas এই সমস্যা সমাধান করে — নামের মাধ্যমে লেআউট ডিজাইন করা যায়, দেখতেও অনেকটা ASCII আর্টের মতো।

বেসিক ব্যবহার

প্রথমে প্রতিটা চাইল্ড এলিমেন্টকে একটা নাম দিতে হয় grid-area দিয়ে, তারপর প্যারেন্টে সেই নামগুলো দিয়ে লেআউটের "ম্যাপ" আঁকতে হয়।

<div class="layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
  gap: 10px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

লক্ষ্য করো — grid-template-areas-এর ভেতরের প্রতিটা লাইন একটা সারি (row) বোঝায়, আর একই নাম পাশাপাশি বা উপর-নিচে বসালে সেই এলিমেন্ট একাধিক কলাম/সারি জুড়ে বিস্তৃত হয়ে যায় — এখানে header আর footer দুই কলামই দখল করে নিয়েছে।

খালি জায়গা রাখা

কোনো জায়গা ইচ্ছাকৃতভাবে খালি রাখতে চাইলে একটা বিন্দু (.) ব্যবহার করা যায়:

.layout {
  grid-template-areas:
    "header header header"
    "sidebar content ."
    "footer footer footer";
}

এখানে মাঝের সারির শেষ কলামটা কোনো এলিমেন্ট দিয়ে ভরা হবে না — শুধু খালি জায়গা থাকবে।

রেসপনসিভ লেআউট — মিডিয়া কোয়েরিতে area পাল্টানো

grid-template-areas-এর সবচেয়ে বড় সুবিধা — মোবাইলে লেআউট পুরোপুরি পাল্টাতে চাইলে শুধু এরিয়ার "ম্যাপ" আবার লিখলেই হয়, HTML স্ট্রাকচার একদম না পাল্টেই।

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

/* মোবাইলে — সাইডবার নিচে চলে যাবে, একটা কলাম হয়ে যাবে */
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

এখানে HTML-এ কোনো পরিবর্তন লাগছে না — শুধু CSS-এ area-এর বিন্যাস পাল্টে দেওয়াতেই DOM অর্ডার না বদলে ভিজ্যুয়াল অর্ডার সম্পূর্ণ পাল্টে যাচ্ছে (sidebar এখন content-এর নিচে)।

লাইভ ডেমো — উইন্ডো সাইজ পাল্টালে লেআউট বদলায়

নিচের বক্সটা ছোট স্ক্রিনে দেখলে (বা ব্রাউজার সরু করলে) সাইডবার নিচে চলে যাবে।

Header

Sidebar

Content

Footer

মোবাইল ব্রাউজারে বা উইন্ডো সরু করে দেখো — সাইডবার আপনাআপনি নিচে চলে যাবে

SCSS দিয়ে গ্রিড এরিয়া লেখা

আগের পর্বে শেখা SCSS ভ্যারিয়েবল দিয়ে লেআউট নাম পুনর্ব্যবহারযোগ্য বানানো যায়:

$sidebar-width: 220px;

.layout {
  display: grid;
  grid-template-columns: $sidebar-width 1fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";

  &__header  { grid-area: header; }
  &__sidebar { grid-area: sidebar; }
  &__content { grid-area: content; }
  &__footer  { grid-area: footer; }
}

লক্ষ্য করো — এখানে BEM-এর সাথেও মিলিয়ে দেওয়া হয়েছে (layout__header), যা আগের দুই পর্বের কনসেপ্ট একসাথে ব্যবহারের উদাহরণ।

একটা সম্পূর্ণ উদাহরণ — ড্যাশবোর্ড লেআউট

চলো একটা বাস্তব অ্যাডমিন ড্যাশবোর্ড লেআউট বানাই — যেমনটা Pathok Ghor বা Mobile Khujo-র অ্যাডমিন প্যানেলে দরকার হতে পারে।

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <title>অ্যাডমিন ড্যাশবোর্ড</title>
  <style>
    .dashboard {
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: 60px 1fr;
      grid-template-areas:
        "sidebar topbar"
        "sidebar main";
      height: 100vh;
      gap: 0;
    }

    .dashboard__sidebar { grid-area: sidebar; background: #1e293b; color: white; }
    .dashboard__topbar  { grid-area: topbar; background: #f1f5f9; }
    .dashboard__main {
      grid-area: main;
      padding: 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .dashboard__card {
      background: white;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    @media (max-width: 700px) {
      .dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: 60px auto 1fr;
        grid-template-areas:
          "topbar"
          "sidebar"
          "main";
      }
      .dashboard__main {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <aside class="dashboard__sidebar">মেনু</aside>
    <header class="dashboard__topbar">টপবার</header>
    <main class="dashboard__main">
      <div class="dashboard__card">মোট বই</div>
      <div class="dashboard__card">মোট পাঠক</div>
      <div class="dashboard__card">আজকের ভিজিট</div>
    </main>
  </div>
</body>
</html>

এখানে দুই লেভেলের Grid ব্যবহার হয়েছে — বাইরেরটা পুরো পেজের কাঠামো ঠিক করছে (sidebar/topbar/main), আর ভেতরের .dashboard__main-এ আরেকটা Grid দিয়ে কার্ডগুলো সাজানো হয়েছে।

নিজে চেষ্টা করো

Exercise:

উপরের ড্যাশবোর্ড লেআউটটা নিজে বানাও, তারপর একটা "footer" area যোগ করো।
একটা ব্লগ পোস্ট লেআউট বানাও — header, content, related-posts নামে area দিয়ে।
মিডিয়া কোয়েরি দিয়ে সেই লেআউট মোবাইলে এক-কলাম বানাও, যাতে related-posts সবার শেষে চলে যায়।
SCSS দিয়ে গ্রিড এরিয়া লেখার উদাহরণটা নিজে লিখে দেখো, একটা নতুন $header-height ভ্যারিয়েবল যোগ করে।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Advanced Flexbox প্যাটার্ন — বাস্তব জগতের জটিল লেআউট (যেমন কার্ড গ্রিড, নেভিগেশন বার, স্টিকি ফুটার) Flexbox দিয়ে কীভাবে সমাধান করা যায়।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ