CSS Grid: Two-Dimensional Layout

CSS Grid — দ্বিমাত্রিক লেআউট

Read: ~30 min Advanced 5 practice problems Live preview runner

1. Two Dimensions at Once

Flexbox arranges items along one line at a time. CSS Grid arranges items across rows and columns simultaneously, which makes it the right tool for whole-page layouts — headers, sidebars, main content, and footers all placed in one coordinated system instead of nested containers. Grid is applied to a parent container; its direct children automatically become grid items.

Flexbox একবারে একটি লাইন বরাবর item সাজায়। CSS Grid একসাথে row ও column জুড়ে item সাজায়, যা একে পুরো পেজ লেআউটের জন্য সঠিক টুল বানায় — header, sidebar, main content, footer সব একটি সমন্বিত সিস্টেমে বসানো যায়, একাধিক নেস্টেড container ছাড়াই। Grid একটি parent container-এ প্রয়োগ করা হয়; এর সরাসরি child-গুলো স্বয়ংক্রিয়ভাবে grid item হয়ে যায়।

2. display: grid, grid-template-columns & grid-template-rows

display: grid turns a container into a grid. grid-template-columns defines how many columns exist and their sizes (e.g. 200px 1fr 1fr creates three columns); grid-template-rows does the same for rows. Every value in the list is one track; the number of values is the number of tracks.

display: grid একটি container-কে grid-এ পরিণত করে। grid-template-columns ঠিক করে কতগুলো column আছে ও তাদের সাইজ কত (যেমন 200px 1fr 1fr তিনটি column তৈরি করে); grid-template-rows row-এর জন্য একই কাজ করে। তালিকার প্রতিটি মান একটি track; মানের সংখ্যাই track-এর সংখ্যা।

Figure 17.1 — একটি 3-column, 2-row grid; প্রতিটি cell-এর row/column অবস্থান এবং তাদের মাঝের gap।

basic-grid.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic grid</title>
</head>
<body>
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</body>
</html>

style.css

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 80px;
  gap: 10px;
  background: #f8f9fa;
  padding: 10px;
}

.cell {
  background: #39b549;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

3. The fr Unit & repeat()

fr stands for "fraction" — it divides available space proportionally, after any fixed-size tracks are subtracted. 1fr 2fr gives the second column exactly twice the width of the first. Writing repeated tracks by hand gets tedious, so repeat(count, size) shorthand exists: repeat(3, 1fr) is identical to 1fr 1fr 1fr.

fr মানে "fraction" — এটি fixed-size track বাদ দেওয়ার পর বাকি জায়গা অনুপাত অনুযায়ী ভাগ করে। 1fr 2fr লিখলে দ্বিতীয় column প্রথমটির ঠিক দ্বিগুণ প্রশস্ত হয়। বারবার একই track হাতে লেখা কষ্টকর, তাই repeat(count, size) শর্টহ্যান্ড আছে: repeat(3, 1fr) ঠিক 1fr 1fr 1fr-এর সমান।

fr-repeat.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>fr + repeat()</title>
</head>
<body>
  <div class="cards">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </div>
</body>
</html>

style.css

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* same as: 1fr 1fr 1fr 1fr */
  gap: 12px;
}

.card {
  background: #2563eb;
  color: white;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

4. gap — Spacing Between Tracks

gap (shorthand for row-gap and column-gap) creates consistent space between grid tracks without adding margin to individual items — meaning no extra space appears at the outer edges of the grid, unlike margin-based spacing.

gap (row-gap ও column-gap-এর শর্টহ্যান্ড) grid track-গুলোর মধ্যে একইরকম স্পেসিং তৈরি করে, প্রতিটি item-এ আলাদা margin যোগ না করেই — ফলে grid-এর বাইরের কিনারায় margin-ভিত্তিক স্পেসিং-এর মতো অতিরিক্ত জায়গা তৈরি হয় না।

gap.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>row-gap + column-gap</title>
</head>
<body>
  <div class="photo-grid">
    <div class="photo">1</div>
    <div class="photo">2</div>
    <div class="photo">3</div>
    <div class="photo">4</div>
    <div class="photo">5</div>
    <div class="photo">6</div>
  </div>
</body>
</html>

style.css

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

.photo {
  background: #7c3aed;
  color: white;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

5. grid-area & Named Template Areas

grid-template-areas lets you literally draw your page layout in the CSS using names, then assign each child to a named area with grid-area. This is the most readable way to build a classic header/sidebar/main/footer page — the CSS looks like an ASCII-art map of the page.

grid-template-areas দিয়ে আপনি CSS-এর মধ্যে সরাসরি নাম দিয়ে পেজ লেআউট এঁকে ফেলতে পারেন, তারপর প্রতিটি child-কে grid-area দিয়ে একটি নামের area-তে বসাতে পারেন। classic header/sidebar/main/footer পেজ বানানোর এটি সবচেয়ে readable উপায় — CSS দেখতে যেন পেজের একটি ASCII-art মানচিত্র।

grid-areas.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>grid-template-areas</title>
</head>
<body>
  <div class="page">
    <header class="hd">Header</header>
    <nav class="sd">Sidebar</nav>
    <main class="mn">Main content</main>
    <footer class="ft">Footer</footer>
  </div>
</body>
</html>

style.css

.page {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer  footer";
  gap: 8px;
  height: 260px;
}

.hd { grid-area: header;  background: #0f172a; color: white; }
.sd { grid-area: sidebar; background: #39b549;  color: white; }
.mn { grid-area: main;    background: #e6f4e8; }
.ft { grid-area: footer;  background: #0f172a; color: white; }

.hd, .sd, .mn, .ft {
  padding: 10px;
  border-radius: 6px;
}

6. Placing Items: grid-column & grid-row Spanning

Instead of naming areas, you can place an item directly using line numbers: grid-column: 1 / 3 spans the item from column line 1 to line 3 (covering two column tracks). The shorthand span N means "stretch across N tracks from here," e.g. grid-column: span 2. This is how a single "featured" card can be made wider than its siblings in the same grid.

নাম দেওয়ার বদলে আপনি সরাসরি line number দিয়ে item বসাতে পারেন: grid-column: 1 / 3 item-টিকে column line 1 থেকে 3 পর্যন্ত বিস্তৃত করে (দুটি column track জুড়ে)। span N শর্টহ্যান্ডের অর্থ "এখান থেকে N-টি track জুড়ে বিস্তৃত হও," যেমন grid-column: span 2। একই grid-এ একটি "featured" card-কে তার বাকি সিবলিং-দের চেয়ে চওড়া করার এটাই উপায়।

grid-span.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>grid-column span</title>
</head>
<body>
  <div class="grid">
    <div class="featured">Featured (spans 2 columns)</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
  </div>
</body>
</html>

style.css

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

.featured {
  grid-column: span 2; /* takes up 2 of the 3 columns */
  background: #39b549;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.box {
  background: #93c5fd;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

Property	Purpose	বাংলায়
`grid-template-columns`	Defines column tracks and their sizes.	Column track ও তাদের সাইজ নির্ধারণ করে।
`grid-template-rows`	Defines row tracks and their sizes.	Row track ও তাদের সাইজ নির্ধারণ করে।
`gap`	Space between both rows and columns.	row ও column উভয়ের মধ্যে ফাঁকা জায়গা।
`grid-template-areas`	Names regions of the grid using a text map.	একটি টেক্সট মানচিত্র দিয়ে grid-এর অঞ্চল নাম দেয়।
`grid-area`	Assigns an item to a named area.	একটি item-কে নামের area-তে বসায়।
`grid-column` / `grid-row`	Places or spans an item by line number.	Line number দিয়ে item বসায় বা span করায়।

7. Flexbox vs Grid — When to Use Which

These two are not rivals — most real pages use both. Grid lays out the overall page skeleton; Flexbox handles the smaller one-dimensional pieces inside each grid area, like aligning icons next to text in a card, or spacing out buttons in a toolbar.

এই দুটি একে অপরের প্রতিদ্বন্দ্বী নয় — বাস্তবে বেশিরভাগ পেজ দুটোই ব্যবহার করে। Grid পুরো পেজের কাঠামো সাজায়; Flexbox প্রতিটি grid area-র ভেতরের ছোট একমাত্রিক অংশগুলো সামলায়, যেমন একটি card-এর ভেতর আইকন ও টেক্সট align করা, বা toolbar-এ বাটন সাজানো।

Flexbox (একমাত্রিক)

Best for one direction at a time (a row OR a column)
Content-driven — items size themselves naturally
Great for: navbars, toolbars, tag lists, centering
Wrapping items don't align neatly into a grid of columns

✅ CSS Grid (দ্বিমাত্রিক)

Best for two directions at once (rows AND columns)
Layout-driven — you define the structure up front
Great for: page skeletons, photo galleries, dashboards
Items align precisely into both rows and columns

Key insight Flexbox is good for laying out things in one direction (a single row or a single column) at a time. Grid is good for controlling rows and columns together.

Flexbox এক দিকের (এক row বা এক column) লেআউটের জন্য ভালো, আর Grid একসাথে row ও column নিয়ন্ত্রণের জন্য ভালো।

8. Practice Problems

Every problem has a Show Answer button with real, runnable CSS. Try it yourself first.

প্রতিটি প্রশ্নের সাথে Show Answer বাটন আছে, যেখানে চালু-করার-যোগ্য CSS দেওয়া আছে। প্রথমে নিজে চেষ্টা করুন।

Create a 3-column grid using repeat() with a 15px gap, containing six numbered cells.

repeat() ব্যবহার করে 15px gap সহ একটি 3-column grid বানান, যেখানে ছয়টি সংখ্যাযুক্ত cell থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans1.html
```
<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>
```
style.css
```
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.grid div { background: #39b549; color: white; padding: 20px; text-align: center; }
```
Build a 2-column layout where the first column is a fixed 250px and the second takes up the rest.

এমন একটি 2-column লেআউট বানান যেখানে প্রথম column fixed 250px এবং দ্বিতীয়টি বাকি সব জায়গা নেয়।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<div class="layout">
  <div class="left">250px fixed</div>
  <div class="right">Fills the rest</div>
</div>
```
style.css
```
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 10px;
  height: 120px;
}
.left  { background: #0f172a; color: white; padding: 12px; }
.right { background: #f8f9fa; padding: 12px; }
```

Use grid-template-areas to lay out a page with a header, a left sidebar, main content, and a footer.

grid-template-areas ব্যবহার করে header, বাম sidebar, main content ও footer সহ একটি পেজ লেআউট বানান।

✨ Show Answer (উত্তর দেখুন)

ans3.html

<div class="page">
  <header class="hd">Header</header>
  <nav class="sd">Sidebar</nav>
  <main class="mn">Main</main>
  <footer class="ft">Footer</footer>
</div>

style.css

.page {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 40px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer  footer";
  gap: 8px;
  height: 220px;
}
.hd { grid-area: header;  background: #0f172a; color: white; }
.sd { grid-area: sidebar; background: #39b549;  color: white; }
.mn { grid-area: main;    background: #e6f4e8; }
.ft { grid-area: footer;  background: #0f172a; color: white; }

In a 4-column grid, make the first item span all 4 columns as a banner.

একটি 4-column grid-এ প্রথম item-কে banner হিসেবে সবগুলো 4টি column জুড়ে span করান।

✨ Show Answer (উত্তর দেখুন)

ans4.html

<div class="grid">
  <div class="banner">Banner (spans 4 columns)</div>
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

style.css

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.banner { grid-column: span 4; background: #39b549; color: white; padding: 16px; text-align: center; }
.item { background: #93c5fd; padding: 16px; text-align: center; }

In two sentences, explain when you would reach for Flexbox instead of Grid.

দুই বাক্যে ব্যাখ্যা করুন — কখন Grid-এর বদলে Flexbox বেছে নেবেন।

✨ Show Answer (উত্তর দেখুন)

Answer: Choose Flexbox when items only need to be arranged along a single direction — like a row of nav links or a toolbar of buttons — where content size should drive layout. Choose Grid when you need to control rows and columns together, like an overall page skeleton or a photo gallery.

Flexbox বেছে নিন যখন item-গুলোকে শুধু একটি দিক বরাবর সাজাতে হয় — যেমন একসারি nav link বা toolbar-এর বাটন — যেখানে কনটেন্টের সাইজ লেআউট ঠিক করে। Grid বেছে নিন যখন row ও column একসাথে নিয়ন্ত্রণ করতে হয়, যেমন পুরো পেজের কাঠামো বা একটি ফটো গ্যালারি।

Summary — Module 17

display: grid plus grid-template-columns/grid-template-rows defines a two-dimensional track system. The fr unit and repeat() make sizing tracks concise; gap spaces them cleanly. grid-template-areas and grid-area name regions for readable page layouts, while grid-column/ grid-row place or span items by line number. Use Flexbox for one dimension, Grid for two.

display: grid ও grid-template-columns/grid-template-rows মিলে একটি দ্বিমাত্রিক track সিস্টেম তৈরি করে। fr ইউনিট ও repeat() track সাইজিং সংক্ষিপ্ত করে; gap পরিষ্কারভাবে স্পেসিং দেয়। grid-template-areas ও grid-area readable পেজ লেআউটের জন্য অঞ্চল নাম দেয়, আর grid-column/grid-row line number দিয়ে item বসায় বা span করায়। এক দিকের জন্য Flexbox, দুই দিকের জন্য Grid ব্যবহার করুন।

Next Module → Responsive Design & Media Queries — এক কোডবেস দিয়ে সব স্ক্রিন সাইজে কাজ করানো।

Previous: Flexbox: One-Dimensional Layout Next: Responsive Design & Media Queries