পাশাপাশি দুটি ডিভ প্রদর্শনের 3 উপায় (ফ্লোট, ফ্লেক্সবক্স, সিএসএস গ্রিড)

এখানে 3টি উপায়ে আপনি HTML div উপাদানগুলিকে পাশাপাশি রাখতে CSS ব্যবহার করতে পারেন৷

(প্রতিটি বিভাগে যেতে ক্লিক করুন)

• ফ্লোট পদ্ধতি
• ফ্লেক্সবক্স পদ্ধতি
• সিএসএস গ্রিড পদ্ধতি

ফ্লোট পদ্ধতি

ফ্লোট পদ্ধতিতে, আমরা নিম্নলিখিত HTML মার্কআপ ব্যবহার করব:

<div class="float-container">

  <div class="float-child">
    <div class="green">Float Column 1</div>
  </div>
  
  <div class="float-child">
    <div class="blue">Float Column 2</div>
  </div>
  
</div>

.float-container শুধুমাত্র অভিভাবক উপাদান যা .float-child উভয়ই ধারণ করে উপাদান।

ডিভগুলি পাশাপাশি পেতে, আমরা নিম্নলিখিত CSS নিয়মগুলি ব্যবহার করব:

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}  

ফলাফল কোড এই মত দেখাবে:

আমি ডিভগুলিতে সীমানা এবং প্যাডিং যুক্ত করেছি যাতে আপনি ঠিক কী ঘটছে তা আরও সহজে দেখতে পারেন। বাইরের দিকে ঘন ঘন সাদা সীমানা হল .float-container div, যার 20px প্যাডিং আছে।

তারপর প্রতিটি .float-child উপাদানটির একটি পাতলা লাল সীমানা এবং আরও কিছু প্যাডিং রয়েছে। তারপর প্রকৃত রঙের ব্লকগুলি হল .float-child এর চাইল্ড উপাদান উপাদান (কেন একটু পরেই দেখতে পাবেন।)

ডিভগুলিকে পাশাপাশি রাখার জন্য, আমরা float ব্যবহার করছি প্রতিটি .float-child ভাসানোর সম্পত্তি বাম দিকের উপাদান।

যেহেতু তারা উভয়ই বাম দিকে ভাসছে, উভয়ের জন্য উপযুক্ত জায়গা থাকলে তারা পাশাপাশি প্রদর্শন করবে। তারা মানানসই কারণ আমাদের দুটি .float-child আছে divs, প্রতিটি 50% প্রস্থে।

এবং প্রতিটি .float-child-এ প্যাডিং যোগ করে ডিভগুলির মধ্যে স্থান তৈরি করা হয় div, যা পরে রঙ ব্লক ধারণ করে।

প্রতিটি কলাম একটি বাইরের ডিভিতে নেস্ট করে কলামগুলির মধ্যে স্থান যোগ করুন

রঙের ব্লকগুলির জন্য একটি বাইরের ডিভ থাকা আবশ্যক (.float-child ) স্থান যোগ করার জন্য এবং উভয় ব্লক পাশাপাশি মানানসই।

আচ্ছা, যদি আমাদের শুধুমাত্র .float-child থাকত প্যাডিং ছাড়াই div, এবং পরিবর্তে একটি margin-right বসিয়ে স্থান যোগ করার চেষ্টা করে প্রথম ব্লকের মান এইরকম?

HTML:

<div class="float-container">

  <div class="float-child green">
    Float Column 1
  </div>
  
  <div class="float-child blue">
    Float Column 2
  </div>
  
</div>

CSS:

.float-child.green {
    margin-right: 20px;
}

এই ক্ষেত্রে, উভয় .float-child উপাদানগুলি মোট প্রস্থের 50% গ্রহণ করবে। কিন্তু প্রথম সবুজ উপাদানটিরও 20px মার্জিন থাকবে।

এর মানে হল যে উভয় ব্লক 50% + 20px + 50% প্রস্থ গ্রহণ করবে। এটি 100% প্রস্থের 20px বেশি হবে, যার অর্থ উভয়ের পাশাপাশি থাকার জন্য পর্যাপ্ত জায়গা নেই।

দ্বিতীয় নীল ব্লকটি প্রথম ব্লকের নীচে পরবর্তী সারিতে মোড়ানো হবে এবং সেখানে বাম দিকে ভাসবে:

আপনি প্রস্থগুলিকে পরিবর্তন করার চেষ্টা করতে পারেন যাতে সেগুলি 48% বা অন্য কোন সংখ্যা 50% এর কম হয় যাতে তাদের মাপসই করা যায়। কিন্তু এটা সঠিক হবে না।

এই কারণেই আমি ব্যক্তিগতভাবে ব্লকগুলিকে 50% প্রস্থে একটি বাইরের ডিভ সেটে মোড়ানো পছন্দ করি, যাতে ডিভগুলির মধ্যে স্থান যোগ করার জন্য প্যাডিং থাকে৷

আজকাল, সিএসএস-এ ফ্লোটের পরিবর্তে ডিভগুলি পাশাপাশি রাখার জন্য অন্যান্য, নতুন পদ্ধতিগুলি ব্যবহার করা সহজ৷

আসুন এর মধ্যে একটি দেখে নেওয়া যাক:ফ্লেক্সবক্স পদ্ধতি!

ফ্লেক্সবক্স পদ্ধতি

ফ্লেক্সবক্সের সাহায্যে, আমরা আমাদের দুটি ডিভ উপাদান সারিবদ্ধ করার আরও স্বজ্ঞাত উপায় ব্যবহার করতে পারি।

HTML:

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

CSS:

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

flexbox এর সাথে, আমরা display: flex সেট করেছি অভিভাবক .flex-container-এ উপাদান এটি ফ্লেক্সবক্স চালু করে।

তারপর প্রতিটি .flex-child-এ উপাদান, আমরা flex: 1 সেট করছি . এই সংখ্যাটি পিতামাতার ফ্লেক্স উপাদানের প্রতিটি সন্তানের প্রস্থের সাথে তুলনা করার অনুপাতের মতো৷

যেহেতু তারা একই, উপলব্ধ স্থান সমানভাবে ভাগ করা হবে। এবং যেহেতু আমাদের দুটি শিশু উপাদান রয়েছে, সেগুলি প্রতিটি 50% গ্রহণ করবে।

ফলাফল কোডটি দেখতে কেমন হবে তা এখানে:

একটি মার্জিন ব্যবহার করে ডিভগুলির মধ্যে স্থান যোগ করুন এবং এটি এখনও ফিট হবে!

লক্ষ্য করুন যে আমরা margin-right: 20px যোগ করে স্থান যোগ করেছি শুধুমাত্র প্রথম .flex-child-এ উপাদান যাইহোক, ফ্লেক্সবক্স যথেষ্ট বুদ্ধিমান যে অতিরিক্ত 20px বিবেচনায় নেওয়ার সময় বাকি উপলব্ধ প্রস্থকে বিভক্ত করার সময়।

এর মানে আপনি সঠিক পিক্সেল গণনা না করেই মার্জিন সহ স্থান যোগ করতে পারেন। Flexbox আপনার জন্য বিষয়বস্তু মাপসই হবে!

এটি একটি বড় কারণ যে আমি ফ্লেক্সবক্স পছন্দ করি৷

যাইহোক, যদি আপনার একাধিক উপাদান থাকে যা আপনি একটি প্রতিক্রিয়াশীল গ্রিডে লেআউট করতে চান, তাহলে উপাদানগুলির মধ্যে সেই স্থানটি কোথায় যোগ করতে হবে তা আপনি সবসময় জানেন না।

আমাদের ক্ষেত্রে, আমরা যদি মোবাইলের জন্য দুটি ডিভকে একটির নিচে একটির নিচে স্ট্যাক করতে চাই, তাহলে আমাদের সেই margin-rightটি বের করতে হবে। মোবাইল প্রস্থের জন্য সম্পত্তি।

অথবা আপনি প্রতিটি .flex-child এর জন্য একটি অতিরিক্ত বাইরের উপাদান প্লাস প্যাডিং যোগ করতে পারেন উপাদান, যা আমরা ফ্লোট পদ্ধতিতে করেছি।

এটি 100% স্বজ্ঞাত নয়, তবে এটি এখনও কাজ করবে। আপনি যদি ফ্লেক্সবক্সের সাথে আরও জটিল প্রতিক্রিয়াশীল লেআউট তৈরি করতে চান তবে আপনাকে এটি মনে রাখতে হবে৷

চলুন এখন দেখে নেওয়া যাক নতুন পদ্ধতি যা আপনি ডিভগুলি পাশাপাশি রাখার জন্য ব্যবহার করতে পারেন:CSS গ্রিড৷

সিএসএস গ্রিড পদ্ধতি

এবং এখানে আপনি CSS গ্রিড ব্যবহার করে কিভাবে দুটি ডিভ পাশাপাশি রাখতে পারেন:

HTML:

<div class="grid-container">

    <div class="grid-child purple">
        Grid Column 1
    </div>

    <div class="grid-child green">
        Grid Column 2
    </div>
  
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

এবং কোডটি দেখতে কেমন হবে তা এখানে:

গ্রিডের সাথে একটি বড় পরিবর্তন হল আপনি প্রথমে নির্ধারণ করুন গ্রিড টেমপ্লেটটি কেমন হবে। মানে আপনি আপনার লেআউটে কতগুলি কলাম এবং/অথবা সারি চান৷

আমাদের ক্ষেত্রে, আমরা সমান প্রস্থের দুটি কলাম চাই। তাই অভিভাবক .grid-container-এ উপাদান, আমরা display: grid দিয়ে গ্রিড চালু করি . তারপর আমরা grid-template-columns দিয়ে আমাদের লেআউটে কতগুলি কলাম চাই তা যোগ করি সম্পত্তি।

আমরা সমান প্রস্থের দুটি কলাম চাই, তাই আমরা এটি 1fr 1fr এ সেট করেছি . এটি ব্রাউজারকে একটি দুই-কলামের লেআউট তৈরি করতে বলে এবং প্রতিটি কলাম 1fr নেয় (fr =ভগ্নাংশের একক) স্থানের।

fr ইউনিট হল প্রতিটি কলামের সাথে অন্য একটি অনুপাত, flex: 1 এর অনুরূপ নিয়ম আমরা flexbox পদ্ধতি ব্যবহার. কলামগুলি 1fr 1fr এ সেট করা মানে প্রতিটি কলাম একই পরিমাণ স্থান গ্রহণ করবে।

গ্রিড-গ্যাপ বৈশিষ্ট্য সহ গ্রিড আইটেমগুলির মধ্যে স্থান যোগ করা

CSS গ্রিড ব্যবহার করার একটি বড় সুবিধা হল গ্রিড আইটেমগুলির মধ্যে স্থান যোগ করার জন্য আপনাকে প্যাডিং বা মার্জিন ব্যবহার করতে হবে না।

আপনি grid-gap ব্যবহার করতে পারেন (বা gap নতুন ব্রাউজারে) স্বয়ংক্রিয়ভাবে আপনার গ্রিড টেমপ্লেটে স্থান যোগ করতে।

আমরা grid-gap সেট করেছি 20px পর্যন্ত, তাই ব্রাউজারটি সমস্ত আইটেমের মধ্যে 20px স্থান যোগ করতে জানবে, সেগুলি পাশাপাশি হোক বা স্ট্যাক করা হোক।

এবং আপনি হয়তো লক্ষ্য করেছেন যে গ্রিডের জন্য সমস্ত CSS বৈশিষ্ট্য প্যারেন্ট .grid-container-এ সেট করা ছিল উপাদান আমাদের আসলে বাচ্চা .grid-child-এর জন্য কোনো CSS লিখতে হয়নি উপাদান!