ব্রিক বাই ব্রিক: CSS মেসনারি তৈরি করতে আমাদের সাহায্য করুন

Patrick Brosset

Alison Maher

প্রকাশিত: ২৩ জুলাই, ২০২৫, শেষবার আপডেট করা হয়েছে: ১৩ ফেব্রুয়ারি, ২০২৬

Microsoft Edge ও Google Chrome টিম আনন্দের সাথে জানাচ্ছে যে Chrome ও Edge 140 থেকে ডেভেলপারদের প্রাথমিক টেস্টিংয়ের জন্য CSS মেসনরি রেডি।

CSS মেসনারি স্পেসিফিকেশন এবং সিনট্যাক্স সংক্রান্ত সমস্যা এখনও সমাধান করা বাকি আছে, তাই API-এর চূড়ান্ত রূপ নির্ধারণ করতে আপনার মতামত অত্যন্ত গুরুত্বপূর্ণ। ফিচারটি ব্যবহার করে দেখুন এবং আপনার মতামত আমাদের জানান।

আজই Chromium-এ CSS Masonry পরীক্ষা করুন

আজই CSS Masonry পরীক্ষা করতে:

1. Chrome বা Edge 140 বা তার পরবর্তী ভার্সন (অথবা একই ভার্সনের অন্য কোনও Chromium-ভিত্তিক ব্রাউজার) ব্যবহার করুন।
2. নতুন ট্যাবে about:flags-এ যান।
3. "CSS মেসনরি লেআউট" সার্চ করুন।
4. ফ্ল্যাগ চালু করুন।
5. ব্রাউজার রিস্টার্ট করুন।

ফিচারটি চালু থাকলে, আপনি Microsoft Edge ডেমো চেক করে (ডেমো সোর্স কোড দেখুন) এটি অ্যাকশনে দেখতে পারেন অথবা ফিচার এবং উপলভ্য সিনট্যাক্স সম্পর্কে আরও জানতে পড়া চালিয়ে যান।

রাজমিস্ত্রির কাজ কী?

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

CSS মেসনারি ব্যবহার করে আইটেমগুলিকে কলাম বা সারি ফর্ম্যাটে সাজানো যেতে পারে, যেখানে আইটেমগুলি সেই কলাম বা সারির মধ্যে কোলাপ্সড পদ্ধতিতে সাজানো থাকে।

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

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

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

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

এই অটোমেটিক প্লেসমেন্ট থেকে খুব আকর্ষণীয় ফলাফল পাওয়া যেতে পারে, যা ওয়েব ডিজাইনাররা অনেক দিন ধরে পাওয়ার চেষ্টা করছেন। উদাহরণস্বরূপ, নিউ ইয়র্ক সিটি ফটো গ্যালারি ডেমো চেক করে দেখুন, যেখানে দেখানো হয়েছে যে কীভাবে একাধিক কলামে কম্প্যাক্ট উপায়ে ফটো দেখানো যায়, পাশাপাশি নির্দিষ্ট আইটেম (এই উদাহরণে শীর্ষক) একাধিক কলাম জুড়ে দেখানো যায়:

মেসনারি গ্রিড আর কী কী কাজে ব্যবহার করা যেতে পারে তার কিছু উদাহরণ এখানে দেওয়া হল।

ব্লগ লেআউট, প্রতিটি পোস্টের থাম্বনেল ও বিবরণ দেখায়।

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

বিভিন্ন কলাম সাইজ সহ ফটোর সংগ্রহ এবং নির্দিষ্ট কিছু ফটো একাধিক কলাম জুড়ে রয়েছে।

সমাধান ও সেগুলির সীমাবদ্ধতা

বর্তমানে ওয়েবে এই ডিজাইন প্যাটার্ন প্রয়োগ করতে হলে আপনাকে জাভাস্ক্রিপ্ট লাইব্রেরি অথবা CSS গ্রিড, ফ্লেক্সবক্স বা মাল্টি-কলাম ব্যবহার করে এমন ওয়ার্কঅ্যারাউন্ড ব্যবহার করতে হবে। তবে, এটি করলে কিছু সমস্যা হতে পারে, যার মধ্যে রয়েছে:

• খারাপ পারফর্ম্যান্স: CSS মেসনারি অনুকরণ করার জন্য জাভাস্ক্রিপ্ট লাইব্রেরি বা কাস্টম কোডের উপর নির্ভর করলে পারফর্ম্যান্সের সাথে আপস করতে হয়, যার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হতে পারে।
• কোড আরও জটিল:
  • CSS মেসনারি লেআউট নকল করার জন্য CSS গ্রিড, ফ্লেক্সবক্স বা মাল্টি-কলামের মধ্যে আইটেমের সঠিক প্লেসমেন্ট এবং স্পেস ডিস্ট্রিবিউশনের গ্যারান্টি দেওয়া কঠিন।
  • একাধিক কলাম বা সারি জুড়ে থাকা আইটেম, আইটেমের কাস্টম অর্ডারিং বা ভিউপোর্টে অ্যাডজাস্ট করার মতো নির্দিষ্ট ফিচার ম্যানেজ করার ক্ষেত্রেও জটিলতা এবং সীমাবদ্ধতা দেখা দিতে পারে।
• রক্ষণাবেক্ষণের বোঝা বেশি: জটিল কাস্টম CSS বা JavaScript কোড রক্ষণাবেক্ষণ করা আরও কঠিন।

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

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

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

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

এখানে মনে রাখার মতো বিষয় হল, গ্রিড, ফ্লেক্সবক্স বা মাল্টি-কলাম লেআউট মেসনারি লেআউটের চেয়ে খারাপ নয়। এগুলি হল দুর্দান্ত ধরনের লেআউট যেগুলির অনেক ব্যবহার আছে। আসল কথা হল: আপনি যদি মেসনারি লেআউট চান, তাহলে CSS মেসনারি আপনাকে সেটি দেবে।

CSS মেসনারির অবস্থা

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

display: masonry ব্যবহার করুন

এই সিনট্যাক্স CSS মেসনারিকে নিজস্ব display টাইপ হিসেবে দেখায়। এই পদ্ধতি ও এর অনুপ্রেরণা সম্পর্কে আরও তথ্য Google Chrome টিমের মতামত প্রয়োজন: CSS মেসনারি কীভাবে সংজ্ঞায়িত করা উচিত? ব্লগ পোস্ট এবং এই পোস্টের বাকি অংশে পাওয়া যাবে। Chromium-এ বর্তমান প্রোটোটাইপ এই প্রস্তাবের উপর ভিত্তি করে তৈরি।

display: grid; grid-template-*: masonry;

এই সিনট্যাক্সে, CSS মেসনারি সরাসরি CSS গ্রিডে ইন্টিগ্রেট করা হয়। মেসনারি মোড ট্রিগার হয়, সারি-ভিত্তিক মেসনারি লেআউটের ক্ষেত্রে grid-template-columns সংজ্ঞায় masonry কীওয়ার্ড প্রয়োগ করে, অথবা কলাম-ভিত্তিক মেসনারি লেআউটের ক্ষেত্রে grid-template-rows সংজ্ঞায় কীওয়ার্ড প্রয়োগ করে।

এই প্রস্তাব এবং এর অনুপ্রেরণা সম্পর্কে আরও বিবরণ WebKit পোস্টে পাওয়া যাবে CSS-এ Masonry-এর জন্য চূড়ান্ত সিনট্যাক্স বেছে নিতে আমাদের সাহায্য করুন।

মনে রাখবেন যে এই প্রস্তাবের বিকল্প হল item-pack প্রপার্টি এবং collapse কীওয়ার্ড, যা দুটি গ্রিড টেমপ্লেট প্রপার্টির মধ্যে একটি ব্যবহার করার পরিবর্তে CSS মেসনারি ট্রিগার করবে।

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

আলোচনার বর্তমান স্ট্যাটাস সম্পর্কে আরও জানতে, সমস্যা 11593 দেখুন, যেখানে মেসনারি সিনট্যাক্স সংক্রান্ত আলোচনার বর্তমান বিষয়গুলি আউটলাইন করা হয়েছে এবং এখনও পর্যন্ত সিনট্যাক্স সংক্রান্ত বিতর্কের সারসংক্ষেপের জন্য সমস্যা 11243 দেখুন।

আপনার নিজস্ব CSS মেসনারি লেআউট তৈরি করুন

আসুন, একটু মজা করা যাক এবং একটি CSS মেসনারি লেআউট তৈরি করা যাক।

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

মেসনারি কন্টেনার তৈরি করুন

আপনার প্রথম কলাম-ভিত্তিক মেসনারি কন্টেনার তৈরি করতে, display:masonry ব্যবহার করুন এবং grid-template-columns ব্যবহার করে আপনার কলামের সাইজ নির্ধারণ করুন। যেহেতু masonry-direction ডিফল্ট হিসেবে column-এ সেট করা থাকে, তাই এই প্রপার্টি সেট করা ঐচ্ছিক।

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

পরিবর্তে সারি-ভিত্তিক মেসনারি কন্টেনারের জন্য, display:masonry ব্যবহার করুন, grid-template-rows ব্যবহার করে আপনার সারির সাইজ নির্ধারণ করুন এবং তারপর masonry-direction:row সেট করুন।

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

আপনি হয়ত লক্ষ্য করেছেন যে এই সিনট্যাক্স Google-এর আসল প্রস্তাব থেকে সামান্য আলাদা। CSS Masonry-এর জন্য ব্যবহৃত ট্রিগার যাই হোক না কেন, CSS ওয়ার্কিং গ্রুপ CSS Masonry লেআউটের মধ্যে গ্রিড টেমপ্লেটের সাইজ ও প্লেসমেন্ট প্রপার্টি আবার ব্যবহার করার সিদ্ধান্ত নিয়েছে।

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

ডিফল্ট ট্র্যাক সাইজ ব্যবহার করুন

নতুন ধরনের ডিসপ্লে আসার ফলে প্রপার্টির ডিফল্ট সেটিংস নিয়ে নতুন করে ভাবার সুযোগ পাওয়া যায়।

গ্রিডে, grid-template-columns এবং grid-template-rows ডিফল্ট হিসেবে none-এ সেট করা থাকে যা, বর্তমানে যেভাবে সংজ্ঞায়িত করা হয়েছে, সাধারণত একটি কলাম বা সারি দেখায়। মেসনারির ক্ষেত্রে, এই ডিফল্ট সেটিংয়ের ফলে, প্রায়শই, অবাঞ্ছিত লেআউট তৈরি হয়।

Chromium-এ প্রয়োগ করার ফলে none-এর জন্য নতুনভাবে প্রস্তাবিত সংজ্ঞা যোগ করা হয়, যা CSS মেসনারিতে ডিফল্ট ট্র্যাক সাইজকে পরিবর্তন করবে। এই নতুন ডিফল্ট ট্র্যাক সাইজ হল repeat(auto-fill, auto) ভ্যালু। এই ভ্যালু ট্র্যাক সাইজ নির্ধারণ না করেই একটি সুন্দর মেসনারি লেআউট তৈরি করে:

.masonry {
  display: masonry;
  gap: 10px;
}

ছবিতে যেমন দেখানো হয়েছে, মেসনারি কন্টেনার উপলভ্য স্পেসে যতগুলি অটো-সাইজ কলাম ফিট করবে ততগুলি তৈরি করে।

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

masonry শর্টহ্যান্ড প্রপার্টি ব্যবহার করে দেখুন

আগে যেমন উল্লেখ করা হয়েছে, Chromium-এ বর্তমান প্রয়োগ আপনার লেআউটে মেসনারি ট্র্যাক নির্ধারণ করার জন্য grid-template-* প্রপার্টির উপর নির্ভর করে। তবে, মেসনারির শুধুমাত্র একটি ডাইমেনশন থাকার কারণে, আমরা masonry শর্টহ্যান্ড প্রপার্টিও প্রয়োগ করেছি, যা আপনি মেসনারি ডিরেকশন এবং ট্র্যাক ডেফিনেশন, দুটিই একবারে সংজ্ঞায়িত করতে ব্যবহার করতে পারবেন, বিভ্রান্তিকর grid- প্রিফিক্সড প্রপার্টি ছাড়াই।

যেমন, নিম্নলিখিত দুটি কোড স্নিপেট একই ধরনের CSS মেসনারি কন্টেনার তৈরি করবে।

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

masonry শর্টহ্যান্ড এখনও CSS ওয়ার্কিং গ্রুপের আলোচনার অধীনে আছে। আজই এটি ব্যবহার করে দেখুন এবং আপনার মতামত আমাদের জানান।

কাস্টম ট্র্যাক সাইজ ব্যবহার করুন

ট্র্যাকের সাইজ নির্ধারণ করার ক্ষেত্রে, মেসনারি গ্রিডের মতোই নমনীয়, যা আপনাকে লেআউট ট্র্যাকের সংখ্যা এবং সাইজ সূক্ষ্মভাবে টিউন করতে দেয়। মেসনারি ট্র্যাকের সবকটি একই সাইজের হতে হবে না, যেমন:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

এই উদাহরণে, আমরা প্রথমে দুটি 3rem ট্র্যাক, তারপরে বিভিন্ন সংখ্যক 5rem ট্র্যাক এবং তারপরে একটি 12rem ট্র্যাক সংজ্ঞায়িত করছি।

একাধিক ট্র্যাক জুড়ে বিস্তৃত

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

যেমন:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

এছাড়াও, আপনি একাধিক ট্র্যাক জুড়ে এই ক্ষমতা ব্যবহার করে নির্দিষ্ট আইটেমকে কন্টেনারের সম্পূর্ণ দৈর্ঘ্যের সমান করতে পারেন:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

নিউজ সাইটের ডেমো এটি ব্যবহার করে নিবন্ধের মধ্যে সাবস্ক্রিপশন বিজ্ঞাপন দেখায়।

মেসনারি আইটেম প্লেসমেন্ট ফাইন টিউন করা হচ্ছে

CSS মেসনারিতে, আইটেমগুলি কলাম বা সারিতে রাখা হয় যার সবচেয়ে ছোট রানিং পজিশন আছে।

দুটি কলামের মেসনারি কন্টেনার কল্পনা করুন। কন্টেনারের প্রথম কলামে ১১০ পিক্সেল উচ্চতার আইটেম এবং দ্বিতীয় কলামে ১০০ পিক্সেল উচ্চতার আইটেম থাকলে, তৃতীয় আইটেমটি দ্বিতীয় কলামে রাখা হবে, যেখানে এটি মেসনারি ডিরেকশনের শুরুর থেকে ১০ পিক্সেল কাছে থাকবে।

আপনি যদি মনে করেন যে আপনার ক্ষেত্রে রানিং পজিশনে ১০ পিক্সেলের পার্থক্য যথেষ্ট ছোট এবং সোর্স অর্ডার আরও ভালভাবে ম্যাচ করার জন্য প্রথম কলামে তৃতীয় আইটেমটি রাখতে চান, তাহলে item-tolerance প্রপার্টি ব্যবহার করুন।

নতুন item-tolerance প্রপার্টি আইটেম প্লেসমেন্টের ক্ষেত্রে সংবেদনশীলতা নিয়ন্ত্রণ করে।

আগের উদাহরণে, আইটেম প্লেসমেন্টের পরিবর্তনশীলতা কাস্টমাইজ করতে আপনি কন্টেনারে item-tolerance: 10px; প্রয়োগ করতে পারেন:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

মনে রাখবেন যে ড্রাফ্ট স্পেসিফিকেশন এই প্রপার্টিকে item-slack বলে। CSS ওয়ার্কিং গ্রুপ সম্প্রতি সিদ্ধান্ত নিয়েছে যে এর পরিবর্তে item-tolerance নামটি ব্যবহার করা হবে এবং স্পেসিফিকেশন শীঘ্রই আপডেট করা হবে।

উপলভ্য অন্যান্য প্রপার্টি

আপনি CSS গ্রিডের মতো মেসনারি কন্টেনারের গ্রিড অ্যাক্সিসে আইটেমের সাইজ ও প্লেসমেন্ট নির্ধারণ করতে একই টেমপ্লেট সাইজ ও প্লেসমেন্ট প্রপার্টি ব্যবহার করতে পারেন, যেমন grid-row, grid-column, grid-area, grid-template-areas বা order। আপনার মেসনারি লেআউট তৈরি করার সময় CSS গ্রিডের সম্পূর্ণ ক্ষমতা অনুভব করুন।

মতামতের জন্য কল করুন

আপনি CSS মেসনারি এক্সপ্লোর করুন, ক্রিয়েটিভ হয়ে উঠুন এবং এর মাধ্যমে আনলক করা যায় এমন নতুন ক্ষমতা আবিষ্কার করুন, আমরা তার জন্য অধীর আগ্রহে অপেক্ষা করছি। শুরু করার একটি দুর্দান্ত উপায় হল আমাদের ডেমো এবং তাদের সোর্স কোড চেক করা এবং Chromium-এ আপনার নিজস্ব উদাহরণ তৈরি করা শুরু করা (প্রথমে ফ্ল্যাগ চালু করতে ভুলবেন না)।

API-কে আকার দিতে এবং এটি ওয়েবে আপনার প্রয়োজন মেটানোর জন্য ডিজাইন করা হয়েছে কিনা তা চেক করতে আপনার মতামত গুরুত্বপূর্ণ। মেসনারি ব্যবহার করে দেখুন এবং আপনার মতামত আমাদের জানান!

API-এর আকার সম্পর্কে আপনার কোনও মতামত বা সাজেশন থাকলে, সমস্যা 11243-এ কমেন্ট করে আমাদের জানান অথবা, আপনি নিজের ব্লগ বা সোশ্যাল মিডিয়াতে পোস্ট লিখতে চাইলে, X বা LinkedIn-এ আমাদের জানাতে ভুলবেন না।

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

ফিচারটি পরীক্ষা করার সময় কোনও সমস্যা দেখতে পেলে, Chromium-এ নতুন সমস্যা খুলে আপনার মতামত শেয়ার করুন।