CSS মাল্টি-কলাম মডিউল দিয়ে একটি লেআউট বাস্তবায়ন করা

আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

CSS মাল্টি-কলাম লেআউট মডিউল একটি শক্তিশালী টুল যা আপনাকে সহজেই আপনার ওয়েব পৃষ্ঠাগুলির জন্য মাল্টি-কলাম লেআউট তৈরি করতে দেয়। প্রতিক্রিয়াশীল ডিজাইনের উত্থানের অর্থ হল এই মডিউলটি কীভাবে ব্যবহার করবেন তা বোঝা গুরুত্বপূর্ণ।

আপনি নমনীয় এবং গতিশীল লেআউট তৈরি করতে কলাম বৈশিষ্ট্য ব্যবহার করতে পারেন যা বিভিন্ন স্ক্রীন আকারের সাথে খাপ খায়।

---

---

দিনের মেকইউজের ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

কলাম সংখ্যা, প্রস্থ, এবং ফাঁক নির্দিষ্ট করা

আপনার পৃষ্ঠার সামগ্রীর জন্য একটি উপযুক্ত মাল্টি-কলাম লেআউট তৈরি করতে, আপনি কতগুলি কলাম স্প্যান করতে চান তা নির্ধারণ করে শুরু করা উচিত। মাল্টি-কলাম মডিউলের সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্যগুলির মধ্যে একটি হল কলাম-গণনা সম্পত্তি, যা আপনি সামগ্রীকে ভাগ করতে কলামের সংখ্যা সেট করতে ব্যবহার করেন।

উদাহরণ স্বরূপ:

 .container { 
  column-count: 3; 
} 

আপনি কলামগুলির প্রস্থ এবং ফাঁকও নির্দিষ্ট করতে পারেন। আপনি যেকোনো একটি ব্যবহার করে কলামের প্রস্থের মান সেট করতে পারেন সমর্থিত CSS ইউনিট পছন্দ px , ভিতরে , বা % .

যদি কলাম প্রস্থ তৈরি স্বয়ংক্রিয় , ব্রাউজার প্রতিটি কলামের প্রস্থের উপর ভিত্তি করে গণনা করবে কলাম-গণনা সম্পত্তি এবং আপনার লেআউটের ভিতরে উপলব্ধ স্থান।

উদাহরণস্বরূপ, এই CSS ঘোষণা করে 3 কলাম, প্রতিটি এর প্রস্থ সহ 200 পিক্সেল:

---

---

 .container { 
  column-count: 3; 
  column-width: 200px; 
}  

দ্য কলাম-ব্যবধান বৈশিষ্ট্য একটি মাল্টি-কলাম বিন্যাসে কলামগুলির মধ্যে ফাঁক বা স্থান নির্দিষ্ট করে। এটি সংলগ্ন কলামগুলির মধ্যে খালি ফাঁকা স্থানগুলির আকার নির্ধারণ করবে এবং পিক্সেল, ইএমএস বা অন্য কোনও সমর্থিত ইউনিটে দৈর্ঘ্যের মান নিতে পারে।

উদাহরণ স্বরূপ:

---

---

 .container { 
  column-count: 3; 
  column-gap: 20px; /* sets the gap between columns to 20 pixels */ 
} 

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

নিশ্চিত কলাম ব্যালেন্স করা

CSS কলাম একটি লেআউটের ভিতরে সমস্ত উপলব্ধ স্থান পূরণ করার চেষ্টা করে। এটি কখনও কখনও কলামগুলির ফলাফল হতে পারে যেগুলির উচ্চতা উল্লেখযোগ্যভাবে আলাদা, লেআউটটিকে অসম দেখায়৷

কলামের ভারসাম্য বজায় রাখতে, আপনাকে নিশ্চিত করতে হবে যে আপনার লেআউটের প্রতিটি কলামে প্রায় একই পরিমাণ সামগ্রী রয়েছে।

আপনি CSS সেট করে এটি অর্জন করতে পারেন column-fill সম্পত্তি ভারসাম্য . একটি ব্রাউজার তারপর সমস্ত কলাম জুড়ে সমানভাবে সামগ্রী বিতরণ করার চেষ্টা করবে যাতে সেগুলি প্রায় একই উচ্চতায় থাকে।

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

এখানে কিভাবে ব্যবহার করবেন তার একটি উদাহরণ column-fill একটি বহু-কলাম বিন্যাসে কলামের ভারসাম্যের জন্য সম্পত্তি:

 .multi-column-layout { 
  column-count: 3; 
  column-gap: 20px; 
  column-fill: balance; 
} 

এই উদাহরণে, আমাদের কাছে তিনটি কলাম সহ একটি বহু-কলাম বিন্যাস রয়েছে এবং প্রতিটি কলামের মধ্যে 20 পিক্সেলের ব্যবধান রয়েছে। সেট করে column-fill সম্পত্তি ভারসাম্য , আমরা নিশ্চিত করি যে বিষয়বস্তু কলাম জুড়ে সমানভাবে বিতরণ করা হয়, যার ফলে কলামের উচ্চতা সুষম হয়।

এটা লক্ষ্য করা গুরুত্বপূর্ণ যে column-fill সম্পত্তি সমস্ত লেআউটের জন্য ভাল কাজ নাও করতে পারে এবং এর ফলে কলামগুলির মধ্যে অসম ব্যবধান হতে পারে। এই ধরনের ক্ষেত্রে, আপনাকে ম্যানুয়ালি কলামগুলির ভারসাম্য বজায় রাখতে JavaScript ব্যবহার করতে হতে পারে। সর্বোত্তম অভ্যাস অনুসরণ করতে মনে রাখবেন এবং প্রগতিশীল বর্ধন ব্যবহার করুন যাতে আপনি জাভাস্ক্রিপ্টের উপর নির্ভর না করেন।

সবগুলোকে একত্রে রাখ

আপনি CSS কলামগুলির সাথে একটি লেআউট বাস্তবায়ন সম্পর্কে যা শিখেছেন তা একত্রিত করতে পারেন এবং একটি ম্যাগাজিন-স্টাইল লেআউট তৈরি করতে এটি ব্যবহার করতে পারেন৷

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

ডুয়াল বুট অপশন উইন্ডোজ ১০ এ দেখা যাচ্ছে না

 <!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="CSScolumns.css" /> 
  </head> 
  <body> 
    <!-- Container Element --> 
    <div class="magazine-layout"> 
 
      <!-- Child Elements --> 
      <div class="article"> 
        <h2>Article Title</h2> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in 
        magna vel lorem pharetra bibendum.</p> 
      </div> 
 
      <div class="article"> 
        <h2>Article Title</h2> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in 
        magna vel lorem pharetra bibendum.</p> 
      </div> 
 
      <div class="article"> 
        <h2>Article Title</h2> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in 
        magna vel lorem pharetra bibendum.</p> 
      </div> 
 
    </div> 
  </body> 
</html> 

CSS মাল্টি-কলাম মডিউল ব্যবহার করে একটি ম্যাগাজিন-স্টাইল লেআউট তৈরি করতে, একত্রিত করুন কলাম-গণনা , কলাম প্রস্থ , কলাম-ব্যবধান , এবং column-fill বৈশিষ্ট্য:

 .magazine-layout { 
  column-count: 3; 
  column-width: 300px; 
  column-gap: 20px; 
  column-fill: balance; 
} 
 
.article { 
  background-color: #f8f8f8; 
  border-radius: 4px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
  padding: 10px; 
  break-inside: avoid-column; 
} 

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

অসমর্থিত ব্রাউজারগুলির জন্য ফলব্যাক ব্যবহার করা

এটা লক্ষ্য করা গুরুত্বপূর্ণ যে কলাম-গণনা সম্পত্তি সব ব্রাউজারে সমর্থিত নয়। যে ব্রাউজার সমর্থন করে না কলাম-গণনা , পরিবর্তে একটি একক কলামে বিষয়বস্তু প্রদর্শন করবে।

অসমর্থিত ব্রাউজারগুলির জন্য ফলব্যাক শৈলী প্রদান করতে, আপনি বৈশিষ্ট্য অনুসন্ধানগুলি ব্যবহার করতে পারেন @সমর্থন করে জন্য সমর্থন সনাক্ত করতে কলাম-গণনা সম্পত্তি এবং বিকল্প শৈলী প্রদান যখন সম্পত্তি সমর্থিত না.

উদাহরণ স্বরূপ:

 .container { 
  /* Fallback for browsers that do not support column-count */ 
  width: 100%; 
} 
 
/* Detect support for column-count */ 
@supports (column-count: 3) { 
  .container { 
    column-count: 3; 
  } 
} 

এই উদাহরণে, আমরা ব্যবহার করি @সমর্থন করে জন্য সমর্থন সনাক্ত করতে বৈশিষ্ট্য ক্যোয়ারী কলাম-গণনা সম্পত্তি যদি ব্রাউজার কলাম-গণনা সমর্থন করে, তাহলে ধারক উপাদান তিনটি কলামে প্রদর্শিত হবে। যদি ব্রাউজার কলাম-গণনা সমর্থন না করে, তাহলে এটি ব্যবহার করে একটি একক কলামে সামগ্রী প্রদর্শন করবে প্রস্থ সম্পত্তি

কলামে কন্টেন্ট ভাঙা

সামগ্রিকভাবে, CSS কলামগুলি নমনীয় এবং প্রতিক্রিয়াশীল মাল্টি-কলাম লেআউট তৈরি করার একটি ব্যবহারিক এবং শক্তিশালী উপায় প্রদান করে যা ওয়েব সামগ্রীর ব্যবহারযোগ্যতা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়ায়।

CSS কলাম এবং জাভাস্ক্রিপ্ট একসাথে ব্যবহার করে, আপনি আরও পরিশীলিত এবং গতিশীল লেআউট তৈরি করতে পারেন যা বিভিন্ন ব্যবহারকারীর পছন্দ এবং ডিভাইসের আকারের সাথে খাপ খায়, আপনার ওয়েব সামগ্রীকে আপনার ব্যবহারকারীদের জন্য আরও অ্যাক্সেসযোগ্য এবং আকর্ষক করে তোলে।