CSS এর হাতেখড়ি (পর্ব – ৮)

CSS Part 8

আগের পর্বে আমরা Flexbox দিয়ে বাস্তব layout বানানো শিখেছি। আজকে শিখবো CSS Grid — আরেকটা শক্তিশালী layout system, যেটা Flexbox থেকে একটা গুরুত্বপূর্ণ জায়গায় আলাদা।

Grid vs Flexbox — পার্থক্যটা কোথায়

Flexbox মূলত এক-মাত্রিক (1D) — মানে একবারে হয় একটা সারি, নাহয় একটা কলাম নিয়ে কাজ করে। কিন্তু Grid হলো দ্বি-মাত্রিক (2D) — একসাথে সারি ও কলাম দুটোই নিয়ন্ত্রণ করা যায়। তাই যখনই পেজে সত্যিকারের একটা "গ্রিড" বা টেবিলের মতো লেআউট দরকার হয় (যেমন ফটো গ্যালারি, ড্যাশবোর্ড), তখন Grid বেশি উপযোগী।

Flexbox Grid
মাত্রা ১D (সারি অথবা কলাম) 2D (সারি ও কলাম একসাথে)
সবচেয়ে ভালো যেখানে Navbar, একসারি কার্ড, centering ফটো গ্যালারি, ড্যাশবোর্ড, পুরো পেজ লেআউট

এই দুইটা একে অপরের প্রতিদ্বন্দ্বী না — বাস্তব প্রজেক্টে দুটোই একসাথে ব্যবহার হয়, যেখানে যেটা উপযুক্ত।

Grid শুরু করা

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

grid-template-columns দিয়ে বলা হয় কয়টা কলাম হবে আর প্রতিটার width কেমন হবে। fr মানে "fraction" — উপলব্ধ জায়গার একটা ভাগ। 1fr 1fr 1fr মানে তিনটা কলাম, প্রতিটা সমান সাইজের।

১
২
৩
৪
৫
৬

৬টা আইটেম, ৩ কলামের গ্রিডে — নিজে থেকেই ২ সারিতে ভাগ হয়ে গেছে

fr দিয়ে অসম কলাম বানানো

fr ভ্যালু বদলে অসমান-সাইজের কলামও বানানো যায়:

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr;  /* প্রথমটা ১ ভাগ, দ্বিতীয়টা ৩ ভাগ */
  gap: 16px;
}
সাইডবার (1fr)
মূল কন্টেন্ট (3fr)

এখানে সাইডবার মোট জায়গার ১/৪ অংশ, আর মূল কন্টেন্ট ৩/৪ অংশ নিচ্ছে — এটা sidebar layout বানানোর আরেকটা কমন উপায় (আগের পর্বে আমরা এটা Flexbox দিয়েও করেছিলাম)।

repeat() দিয়ে কোড ছোট করা

একই সাইজের অনেকগুলো কলাম বারবার লেখার বদলে repeat() ব্যবহার করা যায়:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr এর সমান */
}

Responsive Grid — auto-fit ও minmax()

Grid-এর সবচেয়ে চমৎকার অংশ হলো — মিডিয়া কুয়েরি ছাড়াই responsive card গ্রিড বানানো সম্ভব:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

এই একটা লাইন কী করছে তা ভেঙে বলি:

  • minmax(150px, 1fr) — প্রতিটা কলাম কমপক্ষে ১৫০px, সর্বোচ্চ যতটুকু জায়গা পাওয়া যায় ততটুকু
  • auto-fit — যতগুলো কলাম স্ক্রিনে আঁটবে ততগুলোই বসাও, বাকিগুলো পরের সারিতে যাবে

ফলাফল — বড় স্ক্রিনে বেশি কলাম দেখাবে, ছোট স্ক্রিনে কম কলাম দেখাবে, স্বয়ংক্রিয়ভাবে — কোনো @media কুয়েরি ছাড়াই। পরের পর্বে যখন আমরা Media Query শিখবো, তখন এই পার্থক্যটা আরও পরিষ্কার হবে।

grid-template-rows

কলামের মতোই সারির উচ্চতাও নিয়ন্ত্রণ করা যায়:

.page {
  display: grid;
  grid-template-rows: 80px 1fr 60px; /* হেডার, মেইন, ফুটার */
  height: 100vh;
}

এটা দিয়ে একটা পুরো পেজের কাঠামো বানানো যায় — হেডার সবসময় ৮০px, ফুটার সবসময় ৬০px, আর মাঝখানের মূল কন্টেন্ট বাকি সব জায়গা নিয়ে নেবে।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid উদাহরণ</title>
  <style>
    .page {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 16px;
    }

    .sidebar {
      background: #ede7f6;
      padding: 16px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
    }

    .photo {
      background: #b39ddb;
      padding: 20px;
      text-align: center;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="sidebar">সাইডবার</div>
    <div class="gallery">
      <div class="photo">১</div>
      <div class="photo">২</div>
      <div class="photo">৩</div>
      <div class="photo">৪</div>
    </div>
  </div>
</body>
</html>

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

Exercise:

  1. একটা ৩-কলামের গ্রিড বানাও ৬টা আইটেম দিয়ে, repeat() ব্যবহার করে
  2. auto-fit ও minmax() দিয়ে একটা responsive photo gallery বানাও, তারপর ব্রাউজার উইন্ডো ছোট-বড় করে দেখো কী হয়
  3. grid-template-columns: 1fr 3fr দিয়ে একটা sidebar layout বানাও

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

পর্ব ৯-এ আমরা শিখবো Media Query ও Responsive Design — mobile-first approach দিয়ে কীভাবে একটা পেজকে সব স্ক্রিন সাইজে সুন্দর দেখানো যায়, উদাহরণসহ।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম