22/10/2026

CSS Grid — Complete Guide

এই গাইডে আমরা CSS Grid-এর basic concepts থেকে শুরু করে advanced properties এবং একটি বাস্তব Responsive Product Grid Project তৈরি করা শিখব।

CSS Grid

CSS Grid হলো CSS-এর একটি শক্তিশালী layout system, যার সাহায্যে সহজেই rows এবং columns ব্যবহার করে website-এর layout তৈরি করা যায়। বিশেষ করে product grid, image gallery, dashboard এবং complex website layout তৈরির জন্য CSS Grid খুবই উপযোগী।

What you will learn:

What Is CSS Grid?
Grid Container and Grid Items
grid-template-columns
grid-template-rows
gap, row-gap, and column-gap
grid-column
grid-row
span
repeat()
minmax()
The fr Unit
auto-fit and auto-fill
CSS Grid Areas
Responsive CSS Grid
Most Used CSS Grid Properties
Responsive Product Grid Project
Common CSS Grid Mistakes
When Should You Use CSS Grid?
Conclusion

1. What Is CSS Grid?

CSS Grid হলো একটি two-dimensional layout system। অর্থাৎ, এর সাহায্যে একই সঙ্গে rows (সারি) এবং columns (কলাম) নিয়ন্ত্রণ করা যায়।

ধরো, তুমি একটি website-এ চারটি product card দেখাতে চাও। CSS Grid ব্যবহার করে তুমি সেগুলোকে দুইটি কলাম ও দুইটি সারিতে সাজাতে পারবে।

Product listing layout
Image gallery
Dashboard layout
Header, sidebar এবং main content layout
Responsive card layout

Example


        <div class="grid-container">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
        </div>

        .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        }

        .item {
        padding: 24px;
        background-color: #dbeafe;
        text-align: center;
        }

ব্যাখ্যা:

display: grid; parent element-টিকে grid container তৈরি করে।
grid-template-columns: repeat(2, 1fr); দুটি সমান প্রস্থের column তৈরি করে।
gap: 16px; row এবং column-এর মধ্যে 16px ফাঁকা জায়গা রাখে।
চারটি item দুটি row-তে সাজানো হবে।

2. Grid Container and Grid Items

CSS Grid শেখার আগে দুটি গুরুত্বপূর্ণ বিষয় বুঝতে হবে: Grid Container এবং Grid Items।

Grid Container

যে parent element-এর মধ্যে grid layout তৈরি করা হয়, তাকে Grid Container বলে।


          .container {
            display: grid;
          }

এখানে .container একটি Grid Container।

Grid Items

Grid Container-এর সরাসরি child element-গুলোকে Grid Items বলে।


          <div class="container">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
          </div>

এখানে তিনটি div হলো Grid Items।

মনে রাখবে:Grid Container-এর ভেতরে থাকা nested element-গুলো স্বয়ংক্রিয়ভাবে বাইরের grid-এর Grid Item হয় না। শুধু সরাসরি child element-গুলো Grid Item হয়।

3. grid-template-columns

grid-template-columns property ব্যবহার করে grid-এর column-এর সংখ্যা এবং প্রস্থ নির্ধারণ করা হয়।

Example 1: তিনটি সমান Column


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

এখানে তিনটি সমান প্রস্থের column তৈরি হবে।

একই কাজ আরও সহজভাবে লেখা যায়:


          .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
          }

Example 2: ভিন্ন প্রস্থের Column


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

প্রথম column-এর প্রস্থ 200px।
দ্বিতীয় column উপলব্ধ অতিরিক্ত জায়গার একটি অংশ পাবে।
তৃতীয় column দ্বিতীয় column-এর তুলনায় দ্বিগুণ অংশ পাবে।

এখানে fr উপলব্ধ জায়গা ভাগ করার জন্য ব্যবহৃত হয়েছে।

Example 3: Fixed Column Width


          .container {
            display: grid;
            grid-template-columns: 150px 250px 150px;
            gap: 16px;
          }

এখানে তিনটি column-এর প্রস্থ যথাক্রমে 150px, 250px এবং 150px হবে।

তবে ছোট screen-এ container-এর জায়গা কম হলে এই layout overflow করতে পারে।

4. grid-template-rows

grid-template-rows property ব্যবহার করে grid-এর নির্দিষ্ট row-গুলোর উচ্চতা নির্ধারণ করা হয়।


          .container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 100px 200px;
            gap: 16px;
          }

প্রথম row-এর উচ্চতা 100px।
দ্বিতীয় row-এর উচ্চতা 200px।

যদি আরও row-এর প্রয়োজন হয়, browser স্বয়ংক্রিয়ভাবে implicit row তৈরি করতে পারে।

সেই row-গুলোর আকার নিয়ন্ত্রণ করতে grid-auto-rows ব্যবহার করা যায়।


          .container {
            display: grid;
            grid-auto-rows: minmax(100px, auto);
          }

এখানে প্রতিটি implicit row-এর ন্যূনতম উচ্চতা 100px হবে। Content বেশি হলে row-এর উচ্চতা বাড়তে পারবে।

5. gap, row-gap, and column-gap

Grid Items-এর মধ্যে ফাঁকা জায়গা তৈরি করতে এই property-গুলো ব্যবহার করা হয়।

gap

Row এবং column—দুই দিকেই সমান gap তৈরি করে।


          .container {
            display: grid;
            gap: 20px;
          }

row-gap

একটি row থেকে অন্য row-এর মধ্যবর্তী ফাঁকা জায়গা নির্ধারণ করে।


          .container {
            row-gap: 16px;
          }

column-gap

একটি column থেকে অন্য column-এর মধ্যবর্তী ফাঁকা জায়গা নির্ধারণ করে।


          .container {
            column-gap: 16px;
          }

একসঙ্গে দুটি Value


          .container {
            gap: 24px 16px;
          }

এখানে প্রথম value 24px হলো row gap এবং দ্বিতীয় value 16px হলো column gap।

Tip: প্রতিটি item-এ আলাদা margin ব্যবহার না করে gap দিয়ে grid-এর spacing নিয়ন্ত্রণ করা অনেক সময় সহজ হয়।

6. grid-column

grid-column property ব্যবহার করে একটি Grid Item কতগুলো column জুড়ে থাকবে, তা নির্ধারণ করা যায়।


          .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
          }

          .item:first-child {
            grid-column: 1 / 3;
          }

এখানে প্রথম item column line 1 থেকে column line 3 পর্যন্ত থাকবে। তাই item-টি প্রথম দুটি column জুড়ে থাকবে।

এটি সংক্ষেপে এভাবেও লেখা যায়:


          .item:first-child {
            grid-column: span 2;
          }

এখানে span 2 অর্থ item-টি দুটি column জুড়ে থাকবে।

7. grid-row

grid-row property ব্যবহার করে একটি Grid Item কতগুলো row জুড়ে থাকবে, তা নির্ধারণ করা হয়।


          .container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 16px;
          }

          .item:first-child {
            grid-row: 1 / 3;
          }

এখানে প্রথম item row line 1 থেকে row line 3 পর্যন্ত থাকবে। অর্থাৎ, এটি দুটি row জুড়ে থাকবে।

একই কাজ সংক্ষেপে করা যায়:


          .item:first-child {
            grid-row: span 2;
          }

এখানে span 2 অর্থ item-টি দুটি row জুড়ে থাকবে।

8. span

span ব্যবহার করে কোনো Grid Item কতগুলো row বা column জুড়ে থাকবে, তা নির্ধারণ করা যায়।

দুটি Column জুড়ে


          .item {
            grid-column: span 2;
          }

তিনটি Row জুড়ে


          .item {
            grid-row: span 3;
          }

মনে রাখবে: span কতগুলো track জুড়ে item থাকবে, তা বোঝায়। এটি নিজে থেকে নির্দিষ্ট starting line নির্ধারণ করে না।

9. repeat()

একই ধরনের column বা row বারবার লিখতে না চাইলে repeat() function ব্যবহার করা যায়।

এভাবে লেখার পরিবর্তে:


          .container {
            grid-template-columns: 1fr 1fr 1fr 1fr;
          }

এভাবে লেখা যায়:


          .container {
            grid-template-columns: repeat(4, 1fr);
          }

দুটি code-ই চারটি সমান প্রস্থের column তৈরি করে।

Fixed width-এর ক্ষেত্রেও repeat() ব্যবহার করা যায়।


          .container {
            grid-template-columns: repeat(3, 150px);
          }

এখানে তিনটি column তৈরি হবে, প্রতিটির প্রস্থ 150px।

repeat()-এর সঙ্গে minmax(), auto-fit এবং auto-fill ব্যবহার করলে responsive layout তৈরি করা সহজ হয়।

10. minmax()

minmax() function grid track-এর সর্বনিম্ন এবং সর্বোচ্চ আকার নির্ধারণ করে।


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

150px হলো column-এর minimum size।
1fr column-কে উপলব্ধ জায়গা অনুযায়ী বড় হতে দেয়।

তবে তিনটি column-এর প্রতিটির minimum size 150px হওয়ায় container যথেষ্ট প্রশস্ত না হলে layout overflow করতে পারে।

Responsive grid তৈরির জন্য minmax()-এর সঙ্গে auto-fit ব্যবহার করা যায়।


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

এখানে browser উপলব্ধ জায়গা অনুযায়ী column-এর সংখ্যা নির্ধারণ করবে। প্রতিটি column সাধারণত 220px-এর কম না রেখে বড় হওয়ার সুযোগ পাবে।

11. The fr Unit

fr-এর পূর্ণরূপ হলো fraction. CSS Grid-এ উপলব্ধ জায়গাকে অনুপাতে ভাগ করার জন্য এটি ব্যবহার করা হয়।

Example 1: সমান Column


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

এখানে দুটি column সমান অনুপাতে জায়গা পাবে।

Example 2: অসমান Column


          .container {
            display: grid;
            grid-template-columns: 1fr 2fr;
          }

এখানে দুটি column-এর অনুপাত হবে 1:2। অর্থাৎ, দ্বিতীয় column প্রথমটির তুলনায় দ্বিগুণ অংশ পাবে।

Example 3: Sidebar Layout


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

এখানে sidebar-এর প্রস্থ 250px এবং main content বাকি উপলব্ধ জায়গা নেবে।

মনে রাখবে: 1fr সব পরিস্থিতিতে container-এর ঠিক 100% বা 50% বোঝায় না। Grid-এর অন্য sizing requirement-ও চূড়ান্ত প্রস্থকে প্রভাবিত করতে পারে।

12. auto-fit and auto-fill

auto-fit এবং auto-fill ব্যবহার করে প্রতিটি screen size-এর জন্য আলাদা media query না লিখেও responsive grid তৈরি করা যায়।

auto-fit

auto-fit উপলব্ধ জায়গায় যতগুলো column রাখা সম্ভব, ততগুলো তৈরি করে। পর্যাপ্ত item না থাকলে অব্যবহৃত repeated track-গুলো collapse করতে পারে, ফলে বাকি item-গুলো আরও বেশি জায়গা পায়।


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

Product card, blog card এবং responsive gallery তৈরিতে এটি খুবই কার্যকর।

auto-fill

auto-fill উপলব্ধ জায়গায় যতগুলো column রাখা সম্ভব, ততগুলো track তৈরি করে। পর্যাপ্ত item না থাকলেও খালি track-গুলো জায়গা ধরে রাখতে পারে।


          .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
          }

এটি এমন layout-এ কাজে লাগে যেখানে item কম থাকলেও সম্ভাব্য column-এর কাঠামো ধরে রাখতে চাও।

auto-fit এবং auto-fill-এর পার্থক্য

auto-fit: অব্যবহৃত track collapse করতে পারে, ফলে থাকা item-গুলো বড় হতে পারে।
auto-fill: অব্যবহৃত track-এর জায়গা ধরে রাখতে পারে, ফলে ফাঁকা জায়গা থেকে যেতে পারে।

সাধারণ responsive product grid তৈরির সময় auto-fit দিয়ে শুরু করা ভালো।

13. CSS Grid Areas

grid-template-areas ব্যবহার করে grid-এর বিভিন্ন অংশের নাম নির্ধারণ করা যায়। এরপর grid-area দিয়ে প্রতিটি element-কে নির্দিষ্ট অংশে বসানো যায়।

এটি header, sidebar, main content এবং footer-সহ website layout তৈরিতে খুব উপযোগী।


          HTML

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

          CSS

          .page-layout {
            display: grid;
            grid-template-columns: 220px 1fr;
            grid-template-areas:
              "header header"
              "sidebar main"
              "footer footer";
            gap: 16px;
          }

          .header {
            grid-area: header;
          }

          .sidebar {
            grid-area: sidebar;
          }

          .main-content {
            grid-area: main;
          }

          .footer {
            grid-area: footer;
          }

এখানে header এবং footer দুটি column জুড়ে থাকবে। Sidebar এবং main content পাশাপাশি থাকবে।

গুরুত্বপূর্ণ: grid-template-areas-এ একই নামের area-গুলোকে একটি সঠিক আয়তাকার অঞ্চল তৈরি করতে হবে।

14. Responsive CSS Grid

Responsive design-এর উদ্দেশ্য হলো website-কে desktop, tablet এবং mobile—সব screen size-এ ব্যবহারযোগ্য রাখা।

CSS Grid ব্যবহার করে responsive layout তৈরির দুটি সাধারণ পদ্ধতি রয়েছে।

Method 1: auto-fit এবং minmax()


          .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
          }

এখানে browser উপলব্ধ প্রস্থ অনুযায়ী column-এর সংখ্যা পরিবর্তন করবে। আলাদা করে প্রতিটি screen size-এর জন্য media query লেখার প্রয়োজন নেই।

Method 2: Media Queries

কখনো কখনো নির্দিষ্ট screen width-এ নির্দিষ্ট সংখ্যক column দেখানোর প্রয়োজন হয়।


          .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
          }

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

          @media (max-width: 480px) {
            .product-grid {
              grid-template-columns: 1fr;
            }
          }

768px-এর বেশি প্রস্থে তিনটি column থাকবে।
768px বা তার কম প্রস্থে দুটি column থাকবে।
480px বা তার কম প্রস্থে একটি column থাকবে।

কোন পদ্ধতি ব্যবহার করবে?

স্বাভাবিকভাবে column-এর সংখ্যা পরিবর্তন করতে চাইলে auto-fit এবং minmax() ব্যবহার করো।
নির্দিষ্ট screen width-এ নির্দিষ্ট layout চাইলে media query ব্যবহার করো।

15. Most Used CSS Grid Properties

Property	কাজ
display: grid	Grid layout তৈরি করে
grid-template-columns	Column-এর সংখ্যা ও আকার নির্ধারণ করে
grid-template-rows	Row-এর আকার নির্ধারণ করে
gap	Row ও column-এর মধ্যে ফাঁকা জায়গা রাখে
grid-column	Item কতগুলো column জুড়ে থাকবে তা নির্ধারণ করে
grid-row	Item কতগুলো row জুড়ে থাকবে তা নির্ধারণ করে
repeat()	একই track বারবার লেখার কাজ সহজ করে
minmax()	Track-এর minimum ও maximum size নির্ধারণ করে
fr	উপলব্ধ জায়গা অনুপাতে ভাগ করে
auto-fit	উপলব্ধ জায়গা অনুযায়ী responsive column তৈরি করতে সাহায্য করে
grid-template-areas	নাম ব্যবহার করে layout সাজায়

আমার পরামর্শ

Essential: display, grid-template-columns, gap, fr
Responsive Layout: repeat(), minmax(), auto-fit, auto-fill
Advanced Layout: grid-column, grid-row, grid-template-areas

16. Practice Project: Responsive Product Grid

এবার CSS Grid ব্যবহার করে একটি responsive product grid তৈরি করা যাক। এই project-এ আমরা display: grid, repeat(), auto-fit, minmax() এবং gap ব্যবহার করব।

Complete HTML and CSS


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Product Grid</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 24px;
      font-family: Arial, sans-serif;
      background-color: #f9fafb;
      color: #111827;
    }

    h1 {
      margin-bottom: 24px;
      text-align: center;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 220px), 1fr)
      );
      gap: 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .product-card {
      padding: 20px;
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      text-align: center;
    }

    .product-image {
      display: grid;
      place-items: center;
      min-height: 140px;
      background-color: #dbeafe;
      border-radius: 8px;
      font-size: 40px;
    }

    .product-card h2 {
      font-size: 20px;
      margin: 16px 0 8px;
    }

    .price {
      color: #2563eb;
      font-weight: bold;
    }

    .product-card button {
      width: 100%;
      padding: 10px;
      border: none;
      border-radius: 6px;
      background-color: #2563eb;
      color: #ffffff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>Our Products</h1>

  <main class="product-grid">
    <article class="product-card">
      <div class="product-image" aria-hidden="true">🎧</div>
      <h2>Headphones</h2>
      <p class="price">$25</p>
      <button type="button">View Product</button>
    </article>

    <article class="product-card">
      <div class="product-image" aria-hidden="true">⌚</div>
      <h2>Smart Watch</h2>
      <p class="price">$40</p>
      <button type="button">View Product</button>
    </article>

    <article class="product-card">
      <div class="product-image" aria-hidden="true">🎒</div>
      <h2>Backpack</h2>
      <p class="price">$30</p>
      <button type="button">View Product</button>
    </article>

    <article class="product-card">
      <div class="product-image" aria-hidden="true">📷</div>
      <h2>Camera</h2>
      <p class="price">$80</p>
      <button type="button">View Product</button>
    </article>

    <article class="product-card">
      <div class="product-image" aria-hidden="true">⌨️</div>
      <h2>Keyboard</h2>
      <p class="price">$35</p>
      <button type="button">View Product</button>
    </article>

    <article class="product-card">
      <div class="product-image" aria-hidden="true">🖱️</div>
      <h2>Mouse</h2>
      <p class="price">$15</p>
      <button type="button">View Product</button>
    </article>
  </main>
</body>
</html>

Project-এর ব্যাখ্যা

display: grid; product card-গুলোকে grid layout-এ সাজায়।
repeat() একই ধরনের column তৈরির কাজ সহজ করে।
auto-fit উপলব্ধ জায়গা অনুযায়ী column-এর সংখ্যা নির্ধারণ করে।
minmax() column-এর minimum এবং maximum sizing নিয়ন্ত্রণ করে।
gap: 20px; card-গুলোর মধ্যে ফাঁকা জায়গা তৈরি করে।
max-width: 1100px; পুরো product grid-এর সর্বোচ্চ প্রস্থ নির্ধারণ করে।
margin: 0 auto; grid-টিকে মাঝখানে রাখে।
box-sizing: border-box; element-এর নির্ধারিত width ও height-এর মধ্যে padding এবং border অন্তর্ভুক্ত করে।

এখানে minmax(min(100%, 220px), 1fr) ব্যবহার করা হয়েছে, যাতে খুব সরু screen-এ column-এর minimum size উপলব্ধ প্রস্থের চেয়ে বেশি হয়ে যাওয়ার ঝুঁকি কমে।

min(100%, 220px) — এখানে min() দুটি মানের মধ্যে যেটি ছোট, সেটি বেছে নেয়। ধরো, mobile screen-এ parent container মাত্র 150px চওড়া। তখন min(100%, 220px) হবে 150px, ফলে column container-এর বাইরে চলে যাবে না।

সহজভাবে মনে রাখো: min() ছোট মানটি বেছে নেয়, minmax() minimum ও maximum সীমা নির্ধারণ করে, আর auto-fit responsive column তৈরি করতে সাহায্য করে।

View the Complete Project on GitHub

GitHub-এ এই Responsive Product Grid প্রজেক্টটির সম্পূর্ণ সোর্স কোড এবং অন্যান্য Grid practical code দেখুন। আপনি কোডটি দেখতে পারবেন, ডাউনলোড করতে পারবেন এবং নিজে অনুশীলন করতে পারবেন।

View on GitHub →

তোমার Practice Challenge

আরও ছয়টি product card যোগ করো।
Button-এ hover effect যোগ করো।
প্রথম product card-এর background আলাদা করো।
Sidebar এবং product grid-সহ একটি layout তৈরি করো।
Mobile screen-এর জন্য একটি media query যোগ করো।

17. Common CSS Grid Mistakes

Mistake 1: display: grid ব্যবহার না করা


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

শুধু grid-template-columns লিখলে grid layout তৈরি হবে না। Element-টিকে grid container করতে হবে।


          Correct Code:
          .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
          }

Mistake 2: span ভুলভাবে বোঝা


          .item {
            grid-column: span 2;
          }

এর অর্থ item-টি দুটি column জুড়ে থাকবে। এটি column line 2 থেকে শুরু হবে—এমন নয়।

নির্দিষ্ট starting এবং ending line দিতে চাইলে লিখবে:


          .item {
            grid-column: 2 / 4;
          }

Mistake 3: Fixed Width ব্যবহার করে Overflow তৈরি করা

তিনটি 300px column এবং তাদের মধ্যবর্তী gap ছোট screen-এ container-এর বাইরে চলে যেতে পারে।

এ সমস্যা কমাতে flexible track, minmax() অথবা উপযুক্ত media query ব্যবহার করো।

Mistake 4: Grid এবং Flexbox-কে একই মনে করা

Grid এবং Flexbox দুটিই layout তৈরির জন্য ব্যবহৃত হয়, কিন্তু তাদের মূল ব্যবহারের ধরন আলাদা।

CSS Grid: rows এবং columns একসঙ্গে নিয়ন্ত্রণ করতে উপযোগী।
Flexbox: একবারে একটি প্রধান দিক ধরে item সাজাতে উপযোগী।

একই project-এ দুটি layout system একসঙ্গে ব্যবহার করা যায়।

18. When Should You Use CSS Grid?

যখন rows এবং columns একসঙ্গে নিয়ন্ত্রণ করতে হবে, complex page layout তৈরি করতে হবে অথবা responsive card layout দরকার হবে, তখন CSS Grid ব্যবহার করতে পারো।

অন্যদিকে, কোনো row বা column-এর মধ্যে item align এবং distribute করতে Flexbox বেশ কার্যকর।

Product Cards: পুরো card layout তৈরিতে CSS Grid।
Navigation Links: পাশাপাশি link সাজাতে Flexbox।
Dashboard: মূল page structure তৈরিতে CSS Grid।
Buttons and Icons: button-এর ভেতরে icon ও text align করতে Flexbox।

বাস্তব website-এ CSS Grid এবং Flexbox একসঙ্গে ব্যবহার করা খুবই স্বাভাবিক।

19. Conclusion

CSS Grid হলো একজন intermediate frontend developer-এর জন্য গুরুত্বপূর্ণ একটি skill। grid-template-columns, grid-template-rows, gap, fr, repeat(), minmax(), auto-fit, auto-fill এবং Grid Areas শেখার মাধ্যমে তুমি আরও flexible ও responsive website layout তৈরি করতে পারবে।

প্রথমে সাধারণ rows এবং columns দিয়ে practice করো। এরপর span, minmax() এবং responsive product grid নিয়ে কাজ করো। সবশেষে Grid Areas ব্যবহার করে সম্পূর্ণ webpage layout তৈরি করার চেষ্টা করো।

Next Step: Responsive Product Grid project-টি নিজে তৈরি করো এবং বিভিন্ন screen width-এ পরীক্ষা করো। এরপর CSS Level 2 সিরিজের পরবর্তী topic — Responsive Web Design — শেখার প্রস্তুতি নাও।