CSS Grid — সারি আর কলামে দুই দিকের লেআউট

১ · কেন Grid — এক দিক যথেষ্ট নয় যখন

আগের দুই পর্বে আপনি Flexbox শিখেছেন — জিনিসগুলোকে একটি লাইন ধরে সাজানোর পদ্ধতি। navbar-এর লিংক, বোতামের ভেতরের আইকন আর লেখা, কার্ডের নিচের দাম আর “কিনুন” বোতাম — এগুলো সব এক দিকের সমস্যা। কিন্তু এবার একটি অনলাইন দোকানের হোমপেজ ভাবুন। ওপরে হেডার, বাঁ দিকে ক্যাটাগরির তালিকা, মাঝে পণ্যের কার্ড — চারটি করে পাশাপাশি, কয়েক সারি — আর নিচে ফুটার। এখানে আপনি একই সাথে দুটি জিনিস চান: কার্ডগুলো আড়াআড়ি কলামে মিলে থাকুক, আবার খাড়া সারিতেও মিলে থাকুক।

Flexbox-এ flex-wrap দিয়ে কার্ডগুলোকে কয়েক লাইনে ভাঙা যায় ঠিকই, কিন্তু প্রতিটি লাইন নিজের মতো করে জায়গা ভাগ করে। শেষ লাইনে দুটি কার্ড থাকলে সেগুলো টেনে বড় হয়ে যায়, বা ওপরের কলামের সাথে মেলে না। কারণ Flexbox-এর কাছে প্রতিটি লাইন আলাদা — ওপরের লাইনের কোন কার্ড কোথায়, নিচের লাইন তা জানে না। এই সমস্যার সমাধানের জন্যই তৈরি CSS Grid Layout.

আজ Grid সব আধুনিক ব্রাউজারে আছে — ভাষায় বললে Baseline Widely available, বহু বছর ধরে। তাই এই পর্বের মূল অংশ কোনো fallback ছাড়াই নিশ্চিন্তে ব্যবহার করতে পারেন।

২ · Grid container আর grid item — প্রথম grid

Grid-এ দুই রকম ভূমিকা। যে element-এ display: grid লেখেন, সে হয় grid container — ছক কাটা কাগজ। তার সরাসরি সন্তানরা হয় grid item — ঘরে বসানো জিনিস। নাতি-নাতনিরা (সন্তানের ভেতরের element) grid item নয়; তারা নিজের parent-এর ভেতরে সাধারণ নিয়মেই থাকে। Flexbox-এও ঠিক এমনই ছিল।

ছকের ভাষাটাও চিনে নিন, কারণ CSS-এর property-র নামগুলো এই শব্দ দিয়েই তৈরি:

এবার প্রথম grid. নিচের এডিটরে ছয়টি নম্বর-দেওয়া বাক্স আছে (বাক্সের রং আর দাগ আগে থেকেই দেওয়া, যাতে আপনি শুধু লেআউটে মন দিতে পারেন)। CSS-এ কলাম তিনটি, প্রতিটি 120px, আর সারি দুটি, প্রতিটি 60px:

.g {
  display: grid;                             /* ছক কাটা শুরু */
  grid-template-columns: 120px 120px 120px;  /* ৩টি কলাম */
  grid-template-rows: 60px 60px;             /* ২টি সারি */
  gap: 10px;                                 /* ঘরের মাঝে ফাঁক */
}

গাছের কাঠামো নিয়ে একটি কথা: grid item নিজে আবার display: grid বা display: flex হতে পারে। পণ্যের কার্ডগুলো বাইরের grid-এর item, আবার প্রতিটি কার্ডের ভেতরটা নিজস্ব flex. বাস্তবের পাতায় এই মিশ্রণই সবচেয়ে বেশি দেখা যায়।

৩ · কলাম আর সারির মাপ — px, %, auto, fr আর repeat()

grid-template-columns-এ প্রতিটি মান একটি কলামের মাপ, ফাঁকা জায়গা দিয়ে আলাদা করা। grid-template-rows একই কাজ করে সারির জন্য। মাপ লেখার কয়েকটি উপায়:

• নির্দিষ্ট মাপ — 200px, 12rem: যা লিখবেন তাই।
• শতাংশ — 25%: container-এর চওড়ার ভাগ। কিন্তু সাবধান — gap এর সাথে যোগ হয়, তাই 25% 25% 25% 25% আর gap: 10px একসাথে দিলে ছক container থেকে 30px বেরিয়ে যায়।
• auto — ভেতরের জিনিসের মাপ অনুযায়ী; অন্য কোনো কলাম জায়গা না চাইলে বাড়তি জায়গাও নিয়ে নেয়।
• fr — Grid-এর নিজস্ব একক, “fraction” বা ভগ্নাংশের সংক্ষেপ।

fr বোঝার সবচেয়ে ভালো উপায় একটি পরিবারের মাসের বাজেট। বেতন এলে আগে বাড়িভাড়া আর বিদ্যুৎ বিল — এগুলো নির্দিষ্ট, বাদ দিতেই হবে। তারপর যা থাকে, সেটা অনুপাতে ভাগ হয় — বাজারে দুই ভাগ, সঞ্চয়ে এক ভাগ। ব্রাউজারও ঠিক এভাবে হিসাব করে: আগে নির্দিষ্ট মাপের কলাম আর gap সরিয়ে রাখে, তারপর বাকি জায়গা (free space) fr-এর অনুপাতে ভাগ করে। নিচের ডায়াগ্রামে একটি 600px চওড়া container ধরে হিসাবটি ধাপে ধাপে দেখুন:

একই মাপ বারবার লিখতে না হলে repeat() আছে: repeat(4, 1fr) মানে 1fr 1fr 1fr 1fr. প্যাটার্নও পুনরাবৃত্তি করা যায় — repeat(2, 100px 1fr) মানে 100px 1fr 100px 1fr. নিচে নিজে মিশিয়ে দেখুন:

.g {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
  gap: 10px;
}

/* একটি করে বসিয়ে দেখুন:
   repeat(3, 1fr)
   auto 1fr auto
   25% 25% 50%         ← gap থাকায় বেরিয়ে যাবে!
   repeat(2, 80px 1fr)
*/

ব্রাউজার আসলে কত px হিসাব করল, সেটা JavaScript দিয়েও পড়া যায়। getComputedStyle() দিয়ে gridTemplateColumns পড়লে fr-এর বদলে আসল px মান ফেরত আসে। নিচে একটি 600px চওড়া grid-এ তিনটি ভিন্ন প্যাটার্ন মেপে দেখানো হলো:

const grid = document.querySelector('.g');

(function measure() {
  if (!document.body.offsetWidth) return setTimeout(measure, 50);
  const tracks = () => getComputedStyle(grid).gridTemplateColumns;

  console.log('200px 1fr 2fr  →', tracks());

  grid.style.gridTemplateColumns = 'repeat(3, 1fr)';
  console.log('repeat(3, 1fr) →', tracks());

  grid.style.gridTemplateColumns = '1fr 3fr';
  console.log('1fr 3fr        →', tracks());
})();

gap নিয়ে শেষ কথা: gap: 10px সারি আর কলাম দুই দিকেই ফাঁক দেয়; আলাদা চাইলে gap: 20px 10px (আগে সারির ফাঁক, পরে কলামের) বা row-gap আর column-gap. gap শুধু track-এর মাঝে বসে, কিনারায় নয় — বাইরের ফাঁকের জন্য container-এর padding. পুরোনো কোডে grid-gap, grid-row-gap দেখবেন; এগুলো আগের নাম, এখনো কাজ করে, কিন্তু নতুন কোডে gap লিখুন — একই property এখন Flexbox-এও চলে।

৪ · Grid line আর লাইন নম্বর — ছকের ঠিকানা

ঘর ভরানোর ব্যাপারটা ব্রাউজারের হাতে ছেড়ে না দিয়ে নিজে বলতে চাইলে প্রথমে ঠিকানা লাগবে। Grid-এ ঠিকানা দেওয়া হয় ঘর দিয়ে নয়, দাগ দিয়ে। প্রতিটি grid line-এর একটি নম্বর আছে, ১ থেকে শুরু। সহজ সূত্র: n টি track মানে n + 1 টি লাইন — ৩টি কলাম হলে খাড়া লাইন ৪টি, ২টি সারি হলে আড়াআড়ি লাইন ৩টি। ঠিক যেমন রুটিনের ছকে তিনটি কলাম কাটতে চারটি খাড়া দাগ টানতে হয়।

৫ · item বসানো — grid-column, grid-row আর span

ডায়াগ্রামে যা দেখলেন, এবার নিজে লিখুন। grid-column আসলে দুটি property-র shorthand: grid-column-start আর grid-column-end; grid-row-ও তেমনি। লেখার ধরনগুলো:

নিচের এডিটরে চারটি সমান কলাম, আর তিনটি বাক্সকে নিজে বসানো হয়েছে। বাকিগুলো খালি ঘর খুঁজে নিজেরাই বসবে:

.g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 60px;
  gap: 8px;
}
.b1 { grid-column: 1 / 3; }          /* লাইন ১ থেকে ৩: দুই কলাম */
.b2 { grid-column: 3;                /* তৃতীয় কলাম, */
      grid-row: 1 / span 2; }        /* দুই সারি উঁচু */
.b7 { grid-column: 1 / -1; }         /* পুরো চওড়া */

৬ · Explicit আর implicit grid — grid-auto-rows আর grid-auto-flow

grid-template-columns আর grid-template-rows দিয়ে আপনি যে ছক নিজে কাটেন, তার নাম explicit grid. কিন্তু item যদি ছকের ঘরের চেয়ে বেশি হয়? ধরুন ছক বানালেন ৪ × ২ = ৮ ঘরের, অথচ পণ্য এলো ১০টি। Grid তখন জিনিস ফেলে দেয় না — প্রয়োজনমতো নতুন সারি নিজেই যোগ করে নেয়। এই আপনা-আপনি তৈরি অংশের নাম implicit grid. বিয়েবাড়িতে অতিথি বেশি এলে বাড়তি চেয়ার পেতে দেওয়ার মতো — চেয়ারগুলো আগে থেকে পরিকল্পনায় ছিল না, কিন্তু দরকারে এসে গেল।

নতুন সারিগুলোর মাপ কত হবে? ডিফল্ট হলো auto — ভেতরের জিনিস যতটা চায়। নিজে ঠিক করতে চাইলে grid-auto-rows (আর কলামের জন্য grid-auto-columns). আর item-রা কোন দিকে ঘর ভরাবে — সারি ধরে না কলাম ধরে — সেটা ঠিক করে grid-auto-flow. নিচের ডায়াগ্রামে ব্রাউজারের ঘর-ভরানোর প্রক্রিয়াটি ধাপে ধাপে দেখুন। ৪ নম্বর item দুই ঘর চওড়া (span 2):

এবার explicit আর implicit অংশ নিজে আলাদা করে দেখুন। এখানে explicit ছক ২ × ২, অথচ বাক্স আটটি:

.g {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* explicit: ২টি কলাম */
  grid-template-rows: 70px 70px;    /* explicit: ২টি সারি */

  grid-auto-rows: 35px;             /* বাড়তি সারির মাপ */
  grid-auto-columns: 60px;          /* বাড়তি কলামের মাপ */
  gap: 8px;
}

একটি গুরুত্বপূর্ণ খুঁটিনাটি: ঋণাত্মক লাইন নম্বর গোনা হয় শুধু explicit grid-এর শেষ থেকে। উপরের এডিটরে কোনো বাক্সকে grid-row: 1 / -1 দিলে সে শুধু দুটি explicit সারি জুড়বে, implicit সারিগুলো পর্যন্ত যাবে না। তাই “পুরো উচ্চতা জুড়ে সাইডবার” বানাতে 1 / -1 তখনই কাজ করে, যখন সারিগুলো grid-template-rows-এ লেখা থাকে।

dense — সুন্দর, কিন্তু সাবধানে

ছবির গ্যালারি বা ড্যাশবোর্ডে, যেখানে কিছু item বড় আর কিছু ছোট, dense ফাঁকগুলো ভরিয়ে দেয়। কিন্তু চোখের ক্রম আর HTML-এর ক্রম আলাদা হয়ে যায়। নিচের বাক্সগুলো বোতাম, তাই কীবোর্ড দিয়ে চালানো যায়:

.g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  gap: 8px;
  grid-auto-flow: row;     /* এখানে row dense লিখে দেখুন */
}
.wide { grid-column: span 2; }
button:focus-visible { outline: 3px solid #dc2626; outline-offset: 2px; }

৭ · Grid-এ সারিবদ্ধ করা — items, content আর self

Grid-এ দুটি আলাদা প্রশ্ন আছে, আর সেগুলো গুলিয়ে ফেলাই সবচেয়ে সাধারণ ভুল। এক: প্রতিটি ঘরের ভেতরে item কোথায় বসবে — ঘর ভরে, নাকি বাঁয়ে, মাঝে, ডানে? দুই: পুরো ছকটা যদি container-এর চেয়ে ছোট হয়, তাহলে ছকটাই container-এর কোথায় বসবে? প্রথমটি *-items আর *-self-এর কাজ, দ্বিতীয়টি *-content-এর।

দিকের নামও মনে রাখুন: justify- মানে লেখা চলার দিক (inline axis) — বাংলা বা ইংরেজিতে আড়াআড়ি; align- মানে block-এর দিক (block axis) — খাড়া। Flexbox-এ flex-direction বদলালে দিক উল্টে যায়, কিন্তু Grid-এ এই দুই দিক স্থির। এই পুরো ব্যবস্থার নাম CSS Box Alignment — Flexbox আর Grid একই property ভাগ করে নেয়।

ডিফল্ট মান stretch-এর মতো আচরণ করে — item পুরো ঘর ভরে থাকে। এজন্যই আগের এডিটরগুলোতে সব বাক্স ঘরের সমান ছিল। start, center, end দিলে item নিজের মাপে ফিরে যায় আর ঘরের ভেতরে সরে। নিচের এডিটরে ঘর বড়, ছকও container-এর চেয়ে ছোট — তাই সব property-র প্রভাব একসাথে দেখা যায়:

.g {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 70px);
  gap: 8px;
  height: 220px;              /* container ছকের চেয়ে বড় */

  justify-items: start;       /* ঘরের ভেতরে: আড়াআড়ি */
  align-items: center;        /* ঘরের ভেতরে: খাড়া */

  justify-content: center;    /* পুরো ছক: আড়াআড়ি */
  align-content: end;         /* পুরো ছক: খাড়া */
}
.b5 { justify-self: stretch; align-self: end; }

একটি বিখ্যাত কৌশল এখান থেকেই আসে: কোনো কিছু ঠিক মাঝখানে বসাতে container-এ শুধু দুই লাইন — display: grid; place-items: center;. বহু বছর ওয়েব ডেভেলপারদের রসিকতা ছিল “CSS-এ জিনিস খাড়াভাবে মাঝখানে আনা যায় না”; Flexbox আর Grid সেই রসিকতার অবসান ঘটিয়েছে। place-items-এ দুটি মান দিলে প্রথমটি align (খাড়া), দ্বিতীয়টি justify (আড়াআড়ি) — উল্টো ক্রম নয়, মনে রাখুন।

৮ · একই ঘরে একাধিক item — overlap আর z-index

Grid-এর একটি অসাধারণ সুবিধা: দুই বা ততোধিক item-কে একই ঘরে বসানো যায়, আর তারা একে অপরের ওপর স্তরে স্তরে থাকে। পর্ব ২৪-এ এই কাজ করেছেন position: absolute দিয়ে — কিন্তু absolute item স্বাভাবিক flow থেকে বেরিয়ে যায়, তার মাপ parent জানে না। Grid-এ overlap করা item-রা ছকের ভেতরেই থাকে; সবচেয়ে বড়টির মাপে ঘর বাড়ে, কিছু উপচে পড়ে না।

কে কার ওপরে থাকবে? ডিফল্টে HTML-এ যে পরে আসে, সে ওপরে আঁকা হয়। বদলাতে চাইলে z-index — আর মজার কথা, grid item-এ z-index কাজ করে position ছাড়াই (সাধারণ block-এ যা করে না)। নিচে একটি পণ্যের কার্ড — ছবি, ছাড়ের ব্যাজ আর নাম, তিনটিই একই ঘরে:

.card {
  display: grid;
  width: 260px;
  font: 700 17px system-ui, sans-serif;
}
.card > * {
  grid-row: 1;            /* সবাই সারি ১-এ */
  grid-column: 1;         /* সবাই কলাম ১-এ — একই ঘর */
}
.photo { height: 170px; border-radius: 12px;
         background: linear-gradient(135deg, #f59e0b, #b91c1c); }
.badge { justify-self: end; align-self: start; margin: 10px;
         background: #111; color: #fff; padding: 4px 10px;
         border-radius: 99px; }
.name  { align-self: end; margin: 0; padding: 12px; color: #fff; }

এখানে দুটি অ্যাক্সেসিবিলিটির খুঁটিনাটিও খেয়াল করুন। ছবিটি একটি div-এর ব্যাকগ্রাউন্ড, তাই তার অর্থ বোঝাতে role="img" আর aria-label দেওয়া হয়েছে (আসল ছবি হলে <img alt="…"> ভালো)। আর ছবির ওপর সাদা লেখা বসালে রঙের contrast যথেষ্ট কি না, যাচাই করতে হয় — উজ্জ্বল ছবিতে লেখার নিচে একটু গাঢ় gradient রাখাই নিরাপদ।

৯ · Flexbox না Grid? DevTools-এ grid দেখা, আর সামনে যা আসছে

“Grid এসেছে, তাহলে কি Flexbox বাদ?” — একেবারেই না। দুটি দুই রকম চিন্তার টুল। Rachel Andrew-এর একটি বহুল উদ্ধৃত ব্যাখ্যা সবচেয়ে কাজের: Flexbox কাজ করে content-out — জিনিসগুলোর নিজের মাপ থেকে লেআউট তৈরি হয়, আপনি শুধু বলেন কীভাবে জায়গা ভাগাভাগি করবে। Grid কাজ করে layout-in — আগে আপনি ছক ঠিক করেন, তারপর জিনিসগুলো সেই ছকে বসে। নিজেকে প্রশ্ন করুন: “আমি কি জিনিসগুলোকে সাজাতে দিচ্ছি, নাকি জিনিসগুলোর জন্য জায়গা ঠিক করে দিচ্ছি?”

বাস্তবে সবচেয়ে ভালো ফল আসে দুটো মিলিয়ে — পাতার কাঠামো Grid, প্রতিটি অংশের ভেতর Flexbox. এগুলো নিয়ে বাস্তব নকশা — sidebar, holy grail, dashboard — পর্ব ২৯-এ।

DevTools-এ grid চোখে দেখা

Grid-এর লাইনগুলো পাতায় অদৃশ্য, তাই ভুল ধরতে DevTools-এর grid overlay অপরিহার্য। Chrome বা Edge-এ কোনো পাতায় ডান-ক্লিক করে “Inspect” চাপুন; Elements প্যানেলে grid container-এর পাশে ছোট একটি grid ব্যাজ দেখবেন। সেটাতে চাপলে পাতার ওপর ছকটি রঙিন দাগে আঁকা হয়। পাশের Layout ট্যাবে কয়েকটি কাজের বিকল্প আছে — লাইন নম্বর দেখানো (ধনাত্মক, ঋণাত্মক বা দুটোই), প্রতিটি track-এর মাপ দেখানো, আর লাইনগুলো পাতার কিনারা পর্যন্ত টেনে দেওয়া। Firefox-এ Inspector-এর Layout প্যানেলের Grid অংশে একই রকম সুবিধা — আর ঐতিহাসিকভাবে Firefox-ই এমন grid inspector সবার আগে এনেছিল।

পর্ব ২৮-এ যা আসছে

এই পর্বে Grid-এর ভিত্তি শেষ হলো। পরের পর্বে তিনটি শক্তিশালী কৌশল, এখানে শুধু এক ঝলক:

/* ১. নাম দিয়ে ছক আঁকা — grid-template-areas */
.page { grid-template-areas: "head head" "side main"; }

/* ২. মিডিয়া কোয়েরি ছাড়াই যত কলাম ধরে — auto-fit + minmax() */
.gallery { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ৩. ভেতরের grid বাইরের ছকের লাইন মানবে — subgrid */
.card { grid-row: span 3; display: grid; grid-template-rows: subgrid; }

subgrid ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে আছে; এর সাহায্যে আলাদা আলাদা কার্ডের শিরোনাম, লেখা আর বোতাম সব কার্ডে একই উচ্চতায় মেলানো যায় — যা এতদিন প্রায় অসম্ভব ছিল।

১০ · AI-এর যুগে — Grid-এর কাজ AI-কে দিলে কী দেখবেন

“একটা পণ্যের গ্যালারি বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে কোড দেয়, আর প্রথম দেখায় সেটা ঠিকঠাকই লাগে। কিন্তু AI শিখেছে ইন্টারনেটের বহু বছরের কোড থেকে — যার বড় অংশ Grid আসার আগের। তাই প্রায়ই সে float, Bootstrap-এর row/col div, অদরকারি wrapper-এর স্তূপ (div-soup) বা পুরোনো prefix নিয়ে আসে। আর চোখের ক্রম বদলালে কীবোর্ড ব্যবহারকারীর কী হয়, সেটা সে নিজে থেকে প্রায় কখনো ভাবে না।

AI সাধারণত যেসব Grid-ভুল করে

AI-এর দেওয়া Grid কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এ grid overlay চালু করে লাইন নম্বর মিলিয়েছি — AI-এর দেওয়া তালিকার সাথে প্রতিটি item মিলেছে, অনাকাঙ্ক্ষিত implicit সারি নেই
• device toolbar-এ ৩২০px চওড়ায় দেখেছি — পাশে স্ক্রল নেই, কিছু বেরিয়ে যায়নি
• শুধু Tab চেপে পুরো পাতা ঘুরেছি — focus চোখের ক্রমেই এগিয়েছে
• একটি কার্ডে লেখা তিন গুণ লম্বা করেছি — সারি বেড়েছে, কিছু উপচে পড়েনি বা কাটা পড়েনি
• HTML validator.w3.org-এ যাচাই করেছি, অচেনা property MDN-এ পড়েছি, Can I use-এ সাপোর্ট দেখেছি, আর Lighthouse-এর অ্যাক্সেসিবিলিটি রিপোর্ট চালিয়েছি