display হল CSS-এর সবচেয়ে গুরুত্বপূর্ণ প্রপার্টিগুলির মধ্যে একটি — এটি নিয়ন্ত্রণ করে একটি এলিমেন্ট কীভাবে একটি বক্স তৈরি করে এবং এর চাইল্ড এলিমেন্টগুলি কীভাবে সাজানো হয়।
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display আসলে দুটি জিনিস সেট করে: বক্সটি বাইরের দিকে কীভাবে আচরণ করে (block/inline) এবং এটি ভিতরের দিকে এর চাইল্ডদের কীভাবে সাজায় (flow/flex/grid)। display: flex মানে "এই বক্সটি ব্লক-লেভেল, এবং এর চাইল্ডরা flex আইটেম।"
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
একটি মূল পার্থক্য: display: none লেআউট কোলাপ্স করে (এবং স্ক্রিন রিডারদের কাছ থেকে লুকায়); visibility: hidden যেখানে এলিমেন্টটি ছিল সেখানে একটি ফাঁক রেখে যায়। সম্পূর্ণভাবে সরাতে display: none ব্যবহার করুন, লেআউট সংরক্ষণ করতে visibility: hidden ব্যবহার করুন।
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
আধুনিক লেআউট প্রায় সম্পূর্ণভাবে flex (1D — সারি বা কলাম) এবং grid (2D — সারি এবং কলাম একসাথে)-এর উপর নির্মিত।
display একটি এলিমেন্টের সম্পূর্ণ লেআউট আচরণ নির্ধারণ করে।
block বনাম inline বনাম inline-block জানা ডিফল্ট ফ্লো ব্যাখ্যা করে; flex/grid আধুনিক লেআউটের মূল; এবং none বনাম visibility পার্থক্য হল একটি ঘন ঘন পরীক্ষিত, ব্যবহারিকভাবে গুরুত্বপূর্ণ বিবরণ।