মডার্ন ওয়েব লেআউটের জন্য CSS Flexbox এবং Grid মাস্টার গাইড

Introduction to CSS Flexbox and Grid.

১. মডার্ন ওয়েব লেআউটের বিবর্তন: Floats এবং Tables থেকে Flexbox

ওয়েব ডিজাইনের শুরুতে, লেআউট তৈরি করা একটি অত্যন্ত কঠিন এবং বিরক্তিকর কাজ ছিল। ডেভেলপারদের কাছে লেআউট তৈরির জন্য ডেডিকেটেড কোনো সিএসএস মডিউল ছিল না, ফলে তাদেরকে বিভিন্ন হ্যাক এবং ওয়ার্কঅ্যারাউন্ডের ওপর নির্ভর করতে হতো। চলুন দেখে নিই কীভাবে আমরা আজকের মডার্ন লেআউট সিস্টেমে পৌঁছালাম।

অতীতের লেআউট মেথড: Tables এবং Floats

Table-based Layouts: নব্বইয়ের দশকের শেষের দিকে এবং ২০০০ সালের শুরুতে, পুরো ওয়েবসাইট ডিজাইন করা হতো HTML <table> ট্যাগ ব্যবহার করে। এর প্রধান সমস্যা ছিল এটি সম্পূর্ণ আনসিম্যান্টিক (unsemantic)। টেবিল মূলত ডেটা দেখানোর জন্য তৈরি, লেআউট স্ট্রাকচার করার জন্য নয়। এর ফলে কোডবেস অনেক ভারী হয়ে যেত, স্ক্রিন রিডারদের জন্য ওয়েবসাইট পড়া কঠিন হতো এবং রেসপন্সিভ ডিজাইন করা প্রায় অসম্ভব ছিল।

Float-based Layouts: এরপর আসলো float। ফ্লোট মূলত তৈরি করা হয়েছিল ইমেজের চারপাশে টেক্সট র‍্যাপ (wrap) করার জন্য (যেমন নিউজপেপারে দেখা যায়)। কিন্তু ডেভেলপাররা এটিকে লেআউট তৈরির প্রধান হাতিয়ার হিসেবে ব্যবহার করতে শুরু করেন। ফ্লোট ব্যবহার করে কলাম তৈরি করা সম্ভব হলেও, এর কিছু ভয়াবহ সমস্যা ছিল:

Clearfix Hack: ফ্লোটেড এলিমেন্টগুলো তাদের প্যারেন্ট কন্টেইনারের হাইট নষ্ট করে দিতো, যার ফলে ‘clearfix’ নামক হ্যাক ব্যবহার করতে হতো।
Vertical Alignment: ফ্লোট ব্যবহার করে কোনো এলিমেন্টকে ভার্টিক্যালি সেন্টারে আনা ছিল দুঃস্বপ্নের মতো।
Equal Height Columns: দুটি কলামের হাইট সমান করা ফ্লোট দিয়ে সরাসরি করা যেত না, এর জন্য ফেক-ব্যাকগ্রাউন্ড বা জাভাস্ক্রিপ্ট ব্যবহার করতে হতো।

Flexbox-এর আগমন: এক নতুন যুগের সূচনা

পুরোনো লেআউট মেথডের সমস্ত সীমাবদ্ধতা দূর করার জন্য W3C নিয়ে আসে Flexible Box Layout Module বা সংক্ষেপে Flexbox। ফ্লেক্সবক্স মূলত একটি One-dimensional (এক-মাত্রিক) লেআউট সিস্টেম। এর মানে হলো, এটি একই সময়ে হয় সারি (row) বা কলাম (column) বরাবর কাজ করে, কিন্তু একই সাথে উভয় দিকে নয়।

ফ্লেক্সবক্সের মূল উদ্দেশ্য হলো কন্টেইনারের ভেতরের আইটেমগুলোর মধ্যে স্পেস ডিস্ট্রিবিউশন এবং অ্যালাইনমেন্ট নিখুঁতভাবে করা, এমনকি যখন আইটেমগুলোর সাইজ অজানা বা ডাইনামিক হয়।

Flexbox Fundamentals: Main Axis এবং Cross Axis

ফ্লেক্সবক্স সঠিকভাবে বোঝার জন্য আপনাকে এর অক্ষ (Axis) সিস্টেম বুঝতে হবে। ফ্লেক্সবক্সে দুটি অক্ষ থাকে:

Main Axis (প্রধান অক্ষ): এটি ফ্লেক্স কন্টেইনারের প্রাথমিক অক্ষ। flex-direction প্রপার্টি দিয়ে এটি নির্ধারিত হয়। যদি দিক ‘row’ হয়, তবে মেইন অ্যাক্সিস হবে বাম থেকে ডানে। আর ‘column’ হলে উপর থেকে নিচে।
Cross Axis (পার্শ্ব অক্ষ): এটি সর্বদা মেইন অ্যাক্সিসের সাথে লম্ব (perpendicular) থাকে।

Flex Container: কন্টেইনারের জন্য প্রয়োজনীয় প্রপার্টিসমূহ

কোনো এলিমেন্টকে ফ্লেক্স কন্টেইনার বানানোর জন্য এর সিএসএস-এ display: flex; ডিক্লেয়ার করতে হয়। এরপর কন্টেইনারের ওপর বেশ কিছু শক্তিশালী প্রপার্টি অ্যাপ্লাই করা যায়:

১. flex-direction

এটি নির্ধারণ করে আইটেমগুলো কন্টেইনারের ভেতর কোন দিকে সাজানো থাকবে।

.container {
  display: flex;
  flex-direction: row; /* ডিফল্ট: বাম থেকে ডানে */
  /* অন্যান্য ভ্যালু: row-reverse, column, column-reverse */
}

২. justify-content

এই প্রপার্টিটি Main Axis বরাবর আইটেমগুলোকে অ্যালাইন করে এবং অতিরিক্ত স্পেস ডিস্ট্রিবিউট করে।

flex-start: আইটেমগুলোকে মেইন অ্যাক্সিসের শুরুতে নিয়ে যায় (ডিফল্ট)।
flex-end: আইটেমগুলোকে মেইন অ্যাক্সিসের শেষে নিয়ে যায়।
center: আইটেমগুলোকে মেইন অ্যাক্সিসের মাঝখানে রাখে।
space-between: প্রথম আইটেমটি শুরুতে এবং শেষেরটি শেষে থাকে, বাকি স্পেস আইটেমগুলোর মাঝে সমানভাবে ভাগ হয়।
space-around: প্রতিটি আইটেমের চারপাশে সমান স্পেস থাকে।
space-evenly: প্রতিটি আইটেমের মাঝখানে এবং দুই পাশে ঠিক একই পরিমাণ স্পেস থাকে।

৩. align-items

এটি Cross Axis বরাবর আইটেমগুলোকে অ্যালাইন করার জন্য ব্যবহৃত হয়। ফ্লোটের যুগে ভার্টিক্যাল সেন্টারিং যে কতটা কষ্টের ছিল, align-items: center; তা এক নিমেষে সমাধান করে দিয়েছে।

stretch: কন্টেইনারের পুরো হাইট বা উইডথ জুড়ে আইটেমগুলোকে টেনে বড় করে (ডিফল্ট)।
flex-start: ক্রস অ্যাক্সিসের শুরুতে অ্যালাইন করে।
flex-end: ক্রস অ্যাক্সিসের শেষে অ্যালাইন করে।
center: ক্রস অ্যাক্সিসের ঠিক মাঝখানে (ভার্টিক্যালি সেন্টার) অ্যালাইন করে।
baseline: আইটেমগুলোর ভেতরের টেক্সটের বেসলাইন অনুযায়ী অ্যালাইন করে।

এই বেসিক কনসেপ্টগুলো ফ্লেক্সবক্সের ভিত্তি। মেইন এবং ক্রস অ্যাক্সিসের আচরণ বুঝতে পারলে ফ্লেক্সবক্স ব্যবহার করে যেকোনো এক-মাত্রিক লেআউট অনায়াসে তৈরি করা সম্ভব। পরবর্তী সেকশনে আমরা ফ্লেক্সবক্সের আরও কিছু অ্যাডভান্সড প্যাটার্ন এবং রিয়েল-ওয়ার্ল্ড ইউজ-কেস দেখবো।

২. অ্যাডভান্সড Flexbox প্যাটার্ন: Wrapping, Sizing এবং রিয়েল-ওয়ার্ল্ড ইউজ-কেস

ফ্লেক্সবক্সের বেসিক প্রপার্টিগুলো দিয়ে সাধারণ লেআউট তৈরি করা গেলেও, এর আসল ক্ষমতা লুকিয়ে আছে এর অ্যাডভান্সড প্রপার্টিগুলোর মধ্যে। যখন আমাদের ডাইনামিক কন্টেন্ট বা রেসপন্সিভ ডিজাইনের প্রয়োজন হয়, তখন ফ্লেক্সবক্সের এই ফিচারগুলো গেম-চেঞ্জার হিসেবে কাজ করে।

Flex Wrapping (ফ্লেক্স র‍্যাপিং)

ডিফল্টভাবে, ফ্লেক্স কন্টেইনার সব আইটেমকে একটি সিঙ্গেল লাইনে ফিট করার চেষ্টা করে, এমনকি যদি তাদের সংকুচিত (shrink) করতে হয় তবুও। কিন্তু আমরা যদি চাই আইটেমগুলো জায়গা না পেলে পরের লাইনে চলে যাক, তাহলে flex-wrap প্রপার্টি ব্যবহার করতে হয়।

.container {
  display: flex;
  flex-wrap: wrap; /* ডিফল্ট হলো nowrap */
}

flex-wrap: wrap; দিলে কন্টেইনারের উইডথ শেষ হয়ে গেলে আইটেমগুলো সুন্দরভাবে পরের লাইনে নেমে আসে, যা গ্রিড-লাইক লেআউট তৈরির জন্য দারুণ কার্যকর।

Flex Items-এর ম্যাজিক: Sizing এবং Flexibility

এতক্ষণ আমরা কন্টেইনারের প্রপার্টি নিয়ে কথা বলেছি। এবার দেখবো কন্টেইনারের ভেতরে থাকা Flex Items-এর ওপর প্রয়োগ করা যায় এমন কিছু শক্তিশালী প্রপার্টি।

১. flex-grow, flex-shrink এবং flex-basis

এই তিনটি প্রপার্টি নির্ধারণ করে একটি ফ্লেক্স আইটেম কতটা জায়গা দখল করবে:

flex-grow: এটি নির্ধারণ করে কন্টেইনারে বাড়তি জায়গা থাকলে আইটেমটি কতটুকু বড় হবে। ডিফল্ট ভ্যালু 0। যদি একটি আইটেমের flex-grow: 1 এবং অন্যটির flex-grow: 2 হয়, তবে দ্বিতীয়টি প্রথমটির দ্বিগুণ বাড়তি জায়গা নেবে।
flex-shrink: কন্টেইনারের জায়গা কমে গেলে আইটেমটি কতটুকু সংকুচিত হবে তা নির্ধারণ করে। ডিফল্ট ভ্যালু 1।
flex-basis: এটি আইটেমের প্রাথমিক (default) সাইজ নির্ধারণ করে। এটি width বা height এর মতো কাজ করে, তবে অ্যাক্সিসের ওপর ভিত্তি করে।

এই তিনটিকে একসাথে flex শর্টহ্যান্ডের মাধ্যমে লেখা যায়, যা সবচেয়ে বেশি ব্যবহৃত হয়:

.item {
  flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
}

flex: 1; হলো flex: 1 1 0%; এর শর্টহ্যান্ড, যা আইটেমটিকে সম্ভাব্য পুরো জায়গা দখল করতে নির্দেশ দেয়।

২. order

order প্রপার্টি দিয়ে আপনি HTML স্ট্রাকচার পরিবর্তন না করেই ভিজ্যুয়ালি আইটেমগুলোর ক্রম পরিবর্তন করতে পারেন। রেসপন্সিভ ডিজাইনের ক্ষেত্রে (যেমন মোবাইলে ইমেজ আগে এবং টেক্সট পরে দেখানো) এটি অত্যন্ত কাজের। ডিফল্ট order হলো 0।

.item-first-visually {
  order: -1; /* এটি সবার আগে চলে আসবে */
}

৩. align-self

কন্টেইনারের align-items প্রপার্টি সব আইটেমের ওপর একসাথে প্রয়োগ হয়। কিন্তু আপনি যদি নির্দিষ্ট কোনো একটি আইটেমের অ্যালাইনমেন্ট আলাদা করতে চান, তবে align-self ব্যবহার করতে পারেন (যেমন: flex-start, flex-end, center)।

রিয়েল-ওয়ার্ল্ড প্যাটার্ন ১: রেসপন্সিভ নেভিগেশন বার

ফ্লেক্সবক্স দিয়ে একটি আধুনিক এবং রেসপন্সিভ নেভিগেশন বার তৈরি করা অত্যন্ত সহজ। নিচে একটি উদাহরণ দেওয়া হলো যেখানে লোগো একপাশে এবং মেনু লিঙ্কগুলো অন্যপাশে থাকবে:

/* HTML Structure: 
<nav class="navbar">
  <div class="logo">MyLogo</div>
  <ul class="nav-links">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
*/

.navbar {
  display: flex;
  justify-content: space-between; /* লোগো বামে, লিঙ্কগুলো ডানে */
  align-items: center; /* ভার্টিক্যালি সেন্টারিং */
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 1.5rem; /* লিঙ্কগুলোর মাঝে স্পেস (মডার্ন সিএসএস ফিচার) */
  list-style: none;
}

/* মোবাইল রেসপন্সিভনেস */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column; /* মোবাইলে উপর-নিচ হবে */
    text-align: center;
  }
}

রিয়েল-ওয়ার্ল্ড প্যাটার্ন ২: Sticky Footer বা কার্ড লেআউট

অনেক সময় আমরা চাই ফুটার সর্বদা পেজের বা কার্ডের একদম নিচে থাকুক, এমনকি কন্টেন্ট কম হলেও। flex: 1; ব্যবহার করে এটি ম্যাজিকের মতো করা যায়।

.card {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.card-content {
  flex: 1; /* এটি সমস্ত ফাঁকা জায়গা দখল করে নেবে */
}

.card-footer {
  /* এটি সর্বদা নিচে থাকবে কারণ .card-content উপরের সব জায়গা নিয়ে নিয়েছে */
}

ফ্লেক্সবক্স এক-মাত্রিক (One-dimensional) লেআউটের জন্য রাজা। কিন্তু যখন আমাদের সারি (Rows) এবং কলাম (Columns) উভয় দিকেই জটিল কন্ট্রোল প্রয়োজন হয়, তখন আমাদের আরও শক্তিশালী টুলের দরকার হয়। আর তখনই আসে CSS Grid-এর ধারণা। পরবর্তী সেকশনে আমরা CSS Grid-এর ফান্ডামেন্টালস নিয়ে গভীরে আলোচনা করবো।

৩. CSS Grid ফান্ডামেন্টালস: টু-ডাইমেনশনাল (Two-dimensional) লেআউটের মাস্টারক্লাস

ফ্লেক্সবক্স অসাধারণ হলেও এর একটি সীমাবদ্ধতা হলো—এটি একই সময়ে কেবল একটি অক্ষ (হয় সারি, না হয় কলাম) নিয়ে কাজ করতে পারে। কিন্তু ওয়েব লেআউট প্রায়শই আরও জটিল হয়, যেখানে আমাদের একই সাথে সারি এবং কলামের নিখুঁত নিয়ন্ত্রণ প্রয়োজন। এখানেই CSS Grid Layout বা সংক্ষেপে CSS Grid গেম-চেঞ্জার হিসেবে আবির্ভূত হয়। এটি ওয়েবের জন্য তৈরি প্রথম সত্যিকারের Two-dimensional (দ্বি-মাত্রিক) লেআউট সিস্টেম।

গুরুত্বপূর্ণ Grid টার্মিনোলজি (Terminology)

গ্রিড সঠিকভাবে আয়ত্ত করার আগে এর মূল পরিভাষাগুলো বুঝতে হবে:

Grid Container: যে এলিমেন্টে display: grid; অ্যাপ্লাই করা হয়। এটি পুরো গ্রিডের প্যারেন্ট।
Grid Item: গ্রিড কন্টেইনারের ভেতরের সরাসরি চাইল্ড এলিমেন্টগুলো।
Grid Line: গ্রিডের বিভাজন রেখাগুলো। এগুলো হরাইজন্টাল (সারি) বা ভার্টিক্যাল (কলাম) হতে পারে। গ্রিড লাইনগুলো ১ থেকে শুরু করে গণনা করা হয়।
Grid Track: পরপর দুটি গ্রিড লাইনের মাঝখানের অংশ। সহজ কথায়, গ্রিডের একটি পূর্ণাঙ্গ সারি (row) বা কলাম (column) হলো গ্রিড ট্র্যাক।
Grid Cell: গ্রিডের সবচেয়ে ছোট একক। দুটি পাশাপাশি হরাইজন্টাল এবং ভার্টিক্যাল গ্রিড লাইন যেখানে মিলিত হয়, তার মাঝখানের স্থান।
Grid Area: এক বা একাধিক গ্রিড সেলের সমন্বয়ে তৈরি একটি আয়তাকার জায়গা।

গ্রিড তৈরি করা: Columns এবং Rows ডিফাইন করা

একটি বেসিক গ্রিড তৈরি করতে কন্টেইনারে display: grid; দিয়ে grid-template-columns এবং grid-template-rows প্রপার্টি ব্যবহার করতে হয়।

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* ৩টি কলাম, প্রতিটি ২০০পিক্সেল */
  grid-template-rows: 100px 100px; /* ২টি সারি, প্রতিটি ১০০পিক্সেল */
  gap: 20px; /* আইটেমগুলোর মাঝের ফাঁকা জায়গা বা গাটার */
}

ফ্র্যাকশনাল ইউনিট (The ‘fr’ Unit) এবং repeat() ফাংশন

গ্রিডের সাথে সিএসএস-এ একটি নতুন ইউনিটের আগমন ঘটে, তা হলো fr (Fractional unit)। এটি কন্টেইনারের ফাঁকা জায়গা (available space) নির্দেশ করে।

.grid-container {
  /* প্রথম কলাম ১০০px, দ্বিতীয়টি বাকি জায়গার ১ ভাগ, তৃতীয়টি ২ ভাগ নেবে */
  grid-template-columns: 100px 1fr 2fr; 
}

একই মাপের একাধিক কলাম তৈরির জন্য repeat() ফাংশন দারুণ কার্যকর:

.grid-container {
  /* সমান মাপের ৩টি কলাম তৈরি করবে (1fr 1fr 1fr) */
  grid-template-columns: repeat(3, 1fr); 
}

আইটেম পজিশনিং (Positioning Items on the Grid)

ডিফল্টভাবে, গ্রিড আইটেমগুলো একে একে ফাঁকা সেলে বসে যায় (যাকে Grid Auto-placement বলে)। কিন্তু আমরা চাইলে নির্দিষ্ট আইটেমকে নির্দিষ্ট জায়গায় বসাতে পারি Grid Lines ব্যবহার করে।

.header-item {
  grid-column-start: 1; /* ১ নম্বর কলাম লাইন থেকে শুরু */
  grid-column-end: 4;   /* ৪ নম্বর কলাম লাইন পর্যন্ত বিস্তৃত (অর্থাৎ ৩টি কলাম জুড়ে) */
}

/* এর একটি সুন্দর শর্টহ্যান্ড আছে: */
.header-item {
  grid-column: 1 / 4; /* start / end */
}

.sidebar-item {
  grid-row: 2 / 5; /* ২ নম্বর থেকে ৫ নম্বর সারি লাইন পর্যন্ত */
}

Grid Template Areas: লেআউট তৈরির সবচেয়ে সহজ এবং ভিজ্যুয়াল পদ্ধতি

গ্রিড লাইন দিয়ে লেআউট তৈরি করা শক্তিশালী হলেও, বড় লেআউটের ক্ষেত্রে লাইন নাম্বার মনে রাখা কষ্টকর হতে পারে। এর একটি চমৎকার সমাধান হলো grid-template-areas। এটি ব্যবহার করে আপনি সিএসএস-এর ভেতরেই পুরো লেআউটের একটি ভিজ্যুয়াল ম্যাপ (Visual Map) তৈরি করতে পারেন!

প্রথমে প্রতিটি গ্রিড আইটেমকে একটি নাম দিতে হবে grid-area প্রপার্টি ব্যবহার করে:

.header { grid-area: hd; }
.sidebar { grid-area: sd; }
.content { grid-area: main; }
.footer { grid-area: ft; }

এরপর কন্টেইনারে grid-template-areas ব্যবহার করে ম্যাপটি ডিফাইন করুন:

.grid-container {
  display: grid;
  grid-template-columns: 250px 1fr; /* সাইডবার ২৫০px, বাকিটা কন্টেন্ট */
  grid-template-rows: 80px auto 60px; /* হেডার, কন্টেন্ট, ফুটার হাইট */
  grid-template-areas:
    "hd hd"    /* হেডার পুরোটা জুড়ে (দুটি কলামেই hd) */
    "sd main"  /* বামে সাইডবার, ডানে মেইন কন্টেন্ট */
    "ft ft";   /* ফুটার পুরোটা জুড়ে */
}

এই পদ্ধতিটি এতোটাই রিডেবল (readable) যে, শুধু সিএসএস কোড দেখেই যেকোনো ডেভেলপার বুঝতে পারবেন লেআউটটি দেখতে কেমন হবে। রেসপন্সিভ ডিজাইনের সময় মিডিয়া কোয়েরিতে শুধু ম্যাপটি পরিবর্তন করে দিলেই পুরো লেআউটের চেহারা বদলে যাবে!

গ্রিড অত্যন্ত শক্তিশালী, তবে এর মানে এই নয় যে এটি ফ্লেক্সবক্সের বিকল্প। বরং এই দুটি টেকনোলজি একে অপরের পরিপূরক। পরবর্তী এবং চূড়ান্ত সেকশনে আমরা দেখবো কীভাবে Flexbox এবং Grid একত্রে ব্যবহার করে একটি সম্পূর্ণ, জটিল এবং প্রোডাকশন-রেডি ওয়েব অ্যাপ্লিকেশন লেআউট তৈরি করা যায়।

৪. Flexbox এবং Grid-এর সমন্বয়: একটি রিয়েল-ওয়ার্ল্ড ওয়েব অ্যাপ লেআউট

ওয়েব ডিজাইনার এবং ডেভেলপারদের মধ্যে একটি সাধারণ প্রশ্ন হলো—”আমি কি ফ্লেক্সবক্স ব্যবহার করবো নাকি গ্রিড?” এর সবচেয়ে নিখুঁত উত্তর হলো: “ম্যাক্রো লেআউটের জন্য গ্রিড (Grid for the macro-layout) এবং মাইক্রো লেআউটের জন্য ফ্লেক্সবক্স (Flexbox for the micro-layout) ব্যবহার করুন।”

সহজ কথায়, পেজের বড় স্ট্রাকচার (যেমন: হেডার, সাইডবার, মেইন কন্টেন্ট এরিয়া) সাজাতে CSS Grid ব্যবহার করুন। আর সেই স্ট্রাকচারের ভেতরের ছোট ছোট উপাদানগুলো (যেমন: হেডারের ভেতরের মেনু লিঙ্ক, সার্চ বার, বাটনের ভেতরের আইকন ও টেক্সট) নিখুঁতভাবে সাজাতে Flexbox ব্যবহার করুন।

প্রজেক্ট: একটি আধুনিক অ্যাডমিন ড্যাশবোর্ড তৈরি

চলুন উপরের গোল্ডেন রুলটি মেনে একটি সম্পূর্ণ রেসপন্সিভ অ্যাডমিন ড্যাশবোর্ডের বেসিক লেআউট তৈরি করি।

ধাপ ১: ম্যাক্রো-লেআউট (Grid ব্যবহার করে)

প্রথমে পুরো পেজটিকে (body) একটি গ্রিড কন্টেইনার বানাবো। আমরা চাই লেআউটটি স্ক্রিনের পুরো হাইট (100vh) জুড়ে থাকুক।

body {
  margin: 0;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 250px 1fr; /* সাইডবার ২৫০px, কন্টেন্ট বাকি জায়গা */
  grid-template-rows: 70px 1fr; /* হেডার ৭০px, কন্টেন্ট এরিয়া বাকি জায়গা */
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

.sidebar { grid-area: sidebar; background: #2c3e50; color: white; }
.header  { grid-area: header; background: #ecf0f1; }
.main    { grid-area: main; background: #fff; padding: 20px; }

ব্যাস! মাত্র কয়েকটি লাইন কোড দিয়ে আমরা একটি নিখুঁত ড্যাশবোর্ড স্ট্রাকচার তৈরি করে ফেললাম, যা ফ্লোট ব্যবহার করে করতে গেলে অনেক ঝামেলা পোহাতে হতো।

ধাপ ২: মাইক্রো-লেআউট (Flexbox ব্যবহার করে)

এবার হেডারের ভেতরের কন্টেন্টগুলো সাজানোর পালা। হেডারের বাম পাশে থাকবে একটি পেজ টাইটেল এবং ডান পাশে থাকবে ইউজার প্রোফাইল ও নোটিফিকেশন আইকন। এর জন্য ফ্লেক্সবক্স সবচেয়ে উপযুক্ত।

.header {
  display: flex;
  justify-content: space-between; /* বামে এবং ডানে দুই ভাগে ভাগ করা */
  align-items: center; /* ভার্টিক্যালি সেন্টারে রাখা */
  padding: 0 20px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px; /* আইকন এবং টেক্সটের মাঝে ফাঁকা জায়গা */
}

ধাপ ৩: CSS Grid-এর ম্যাজিক ട്രিক – Media Query ছাড়াই রেসপন্সিভ কার্ড লেআউট

ড্যাশবোর্ডের মেইন কন্টেন্ট এরিয়াতে সাধারণত কিছু অ্যানালিটিক্স কার্ড থাকে। আমরা চাই এই কার্ডগুলো বড় স্ক্রিনে পাশাপাশি থাকুক, আর ছোট স্ক্রিনে স্বয়ংক্রিয়ভাবে নিচে নিচে চলে আসুক। এর জন্য গ্রিডের auto-fit এবং minmax() ফাংশনের কম্বিনেশন ব্যবহার করা যায়, যা মিডিয়া কোয়েরি ছাড়াই সম্পূর্ণ রেসপন্সিভ!

.card-container {
  display: grid;
  gap: 20px;
  /* 
    ম্যাজিক লাইন: 
    প্রতিটি কার্ড ন্যূনতম ৩০০px হবে, কিন্তু জায়গা থাকলে সমানভাবে বড় (1fr) হবে। 
    জায়গা না থাকলে পরের লাইনে চলে যাবে (auto-fit)।
  */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  /* কার্ডের ভেতরের কন্টেন্ট সাজাতে আবারও Flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

উপসংহার

CSS Flexbox এবং Grid ওয়েব ডিজাইনের জগতে একটি বিশাল বিপ্লব নিয়ে এসেছে। float এবং টেবিল হ্যাকের দিন এখন অতীত। ফ্লেক্সবক্স আপনাকে দেয় এক-মাত্রিক (one-dimensional) লেআউটে অসাধারণ নমনীয়তা এবং নিয়ন্ত্রণ, আর গ্রিড আপনাকে দেয় দ্বি-মাত্রিক (two-dimensional) লেআউটে নিখুঁত আর্কিটেকচার তৈরির ক্ষমতা।

এই দুটি টুলের শক্তিমত্তা বুঝতে পারা এবং এদের সঠিক জায়গায় একসাথে ব্যবহার করতে পারাটাই একজন সাধারণ ডেভেলপারকে একজন মাস্টার ইউআই (UI) ডেভেলপার-এ পরিণত করে। আপনি যদি এই গাইডের প্যাটার্নগুলো নিজের প্রজেক্টে প্রয়োগ করা শুরু করেন, তবে আপনি দেখতে পাবেন যে আপনার সিএসএস কোড আগের চেয়ে অনেক বেশি পরিচ্ছন্ন, রেসপন্সিভ এবং মেইনটেইন করা সহজ হয়ে উঠেছে। শুভ কোডিং!