CSS Flexbox vs Grid — কখন কোনটি ব্যবহার করবেন?

Flexbox আর Grid নিয়ে সবসময় confusion থাকে। কোন situation-এ কোনটি ব্যবহার করা উচিত, পার্থক্য কী — সহজ উদাহরণ সহ বোঝানো হয়েছে।

CSS layout করতে গেলে প্রায়ই দ্বিধায় পড়ি — এখানে Flexbox নেব নাকি Grid? এই প্রশ্নের সহজ উত্তর আছে। একবার বুঝে ফেললে সিদ্ধান্ত নেওয়া অনেক সহজ হয়ে যাবে।

Flexbox — One-Dimensional Layout

Flexbox কাজ করে একটি axis-এ — হয় row (horizontal) নয়তো column (vertical)। এটি item-গুলোকে একটি লাইনে সাজায়। Navigation bar, button group, centering — এই কাজগুলোর জন্য Flexbox আদর্শ।

প্রধান properties:

display: flex — Flexbox enable করে
flex-direction — row বা column
justify-content — main axis-এ alignment
align-items — cross axis-এ alignment
flex-wrap — items wrap করবে কিনা

CSS Grid — Two-Dimensional Layout

Grid কাজ করে দুটো axis-এ — row এবং column একসাথে। পুরো page layout, card grid, magazine-style layout — এই কাজগুলোর জন্য Grid আদর্শ।

প্রধান properties:

display: grid — Grid enable করে
grid-template-columns — column সংখ্যা ও size
grid-template-rows — row সংখ্যা ও size
gap — item-গুলোর মধ্যে ফাঁক
grid-column / grid-row — item কত cell জুড়ে থাকবে

কখন কোনটি?

Flexbox ব্যবহার করুন: Navbar, button group, একটি লাইনে items সাজানো, centering, dynamic-sized items।

Grid ব্যবহার করুন: Page layout, card grid, complex two-dimensional layout, items নির্দিষ্ট position-এ রাখা।

একসাথে ব্যবহার করুন

Flexbox ও Grid একসাথে ব্যবহার করা যায় এবং প্রায়ই এটিই সবচেয়ে ভালো approach। যেমন: Grid দিয়ে page layout করুন, Flexbox দিয়ে card-এর ভেতরের content সাজান।

Responsive Design

Grid-এর auto-fill ও minmax() দিয়ে media query ছাড়াই responsive grid তৈরি করা যায়: grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))।