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

Patrick Brosset

Alison Maher

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

মাইক্রোসফট এজ এবং গুগল ক্রোম টিম আনন্দের সাথে ঘোষণা করছে যে ক্রোম এবং এজ ১৪০ থেকে সিএসএস ম্যাসনরি প্রাথমিক ডেভেলপার পরীক্ষার জন্য প্রস্তুত।

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

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

আজই CSS Masonry পরীক্ষা করার জন্য:

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

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

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

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

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

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

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

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

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

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

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

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

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

বিভিন্ন কলামের আকারের ছবির সংগ্রহ, এবং একাধিক কলামে বিস্তৃত কিছু ছবি।

সমাধান এবং তাদের সীমাবদ্ধতা

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

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

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

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

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

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

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

সিএসএস রাজমিস্ত্রির অবস্থা

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

display: masonry

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

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

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

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

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

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

আলোচনার বর্তমান অবস্থা সম্পর্কে আরও বিস্তারিত জানার জন্য, সংখ্যা ১১৫৯৩ দেখুন, যা বর্তমান রাজমিস্ত্রির বাক্য গঠন আলোচনার বিষয়গুলির রূপরেখা দেয়, এবং সংখ্যা ১১২৪৩ এখন পর্যন্ত বাক্য গঠন বিতর্কের সারসংক্ষেপের জন্য দেখুন।

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

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

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

একটি রাজমিস্ত্রির পাত্র তৈরি করুন

আপনার প্রথম কলাম-ভিত্তিক রাজমিস্ত্রির কন্টেইনার তৈরি করতে, 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;
}

আপনি হয়তো লক্ষ্য করেছেন, এই সিনট্যাক্সটি গুগলের মূল প্রস্তাব থেকে কিছুটা ভিন্ন। 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 শর্টহ্যান্ডটি এখনও আলোচনার অধীনে রয়েছে । আজই এটি ব্যবহার করে দেখুন এবং আপনার মতামত আমাদের জানান।

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

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

.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 Masonry-তে, আইটেমগুলিকে সেই কলাম বা সারিতে স্থাপন করা হয় যার চলমান অবস্থান সবচেয়ে কম।

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

যদি আপনি মনে করেন যে রানিং পজিশনে ১০ পিক্সেলের পার্থক্য আপনার ক্ষেত্রে যথেষ্ট ছোট, এবং তৃতীয় আইটেমটি প্রথম কলামে রাখা পছন্দ করেন, তাহলে সোর্স অর্ডারের সাথে আরও ভালোভাবে মিল করার জন্য, 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-এর আকার সম্পর্কে আপনার যদি কোন মতামত বা মতামত থাকে, তাহলে Issue 11243- এ মন্তব্য করে আমাদের জানান, অথবা, যদি আপনি আপনার নিজের ব্লগে বা সোশ্যাল মিডিয়াতে একটি পোস্ট লিখতে চান, তাহলে X বা LinkedIn- এ আমাদের জানাতে ভুলবেন না।

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

বৈশিষ্ট্যটি পরীক্ষা করার সময় যদি আপনি কোনও বাগ খুঁজে পান, তাহলে একটি নতুন Chromium বাগ খুলে আপনার প্রতিক্রিয়া জানান।