প্রকাশিত: জুলাই 23, 2025
মাইক্রোসফ্ট এজ এবং গুগল ক্রোম টিমগুলি ঘোষণা করতে উচ্ছ্বসিত যে CSS রাজমিস্ত্রি Chrome এবং Edge 140 থেকে প্রাথমিক বিকাশকারী পরীক্ষার জন্য প্রস্তুত৷
CSS রাজমিস্ত্রির স্পেসিফিকেশন এবং সিনট্যাক্সের আশেপাশের খোলা সমস্যাগুলির সাথে, আপনার প্রতিক্রিয়া আমাদের API-এর চূড়ান্ত আকারকে সিমেন্ট করতে সাহায্য করার জন্য অত্যন্ত গুরুত্বপূর্ণ। বৈশিষ্ট্যটি ব্যবহার করে দেখুন এবং আপনি কী মনে করেন তা আমাদের জানান।
আজ Chromium-এ CSS রাজমিস্ত্রির পরীক্ষা করুন
আজ সিএসএস রাজমিস্ত্রি পরীক্ষা করতে:
- Chrome বা Edge 140 বা তার পরে ব্যবহার করুন (অথবা মিলে যাওয়া সংস্করণ সহ অন্য একটি Chromium-ভিত্তিক ব্রাউজার)।
- একটি নতুন ট্যাবে
about:flagsএ যান। - "CSS রাজমিস্ত্রি লেআউট" অনুসন্ধান করুন।
- পতাকা সক্ষম করুন।
- ব্রাউজার রিস্টার্ট করুন।
বৈশিষ্ট্যটি সক্ষম করার সাথে, আপনি Microsoft এজ ডেমোগুলি পরীক্ষা করে ( ডেমো সোর্স কোড দেখুন), বা বৈশিষ্ট্য এবং উপলব্ধ সিনট্যাক্স সম্পর্কে আরও জানতে পড়া চালিয়ে যেতে পারেন।
রাজমিস্ত্রি কি?
CSS রাজমিস্ত্রি হল একটি বিন্যাস মোড যা আপনাকে আইটেমগুলির একটি ইটের মতো বিন্যাস তৈরি করতে দেয়, এমনভাবে যা CSS গ্রিড, ফ্লেক্সবক্স বা বহু-কলাম বিন্যাসের সাথে সহজে পাওয়া যায় না।
সিএসএস রাজমিস্ত্রি একটি কলাম বা সারি বিন্যাসে আইটেমগুলিকে সেই কলাম বা সারির মধ্যে রাখা আইটেমগুলিকে ভেঙে ফেলা পদ্ধতিতে সাজাতে ব্যবহার করা যেতে পারে।
রাজমিস্ত্রিকে একটি মোটরওয়ে হিসাবে ভাবুন, যেখানে একমাত্র সীমাবদ্ধতা হল বিভিন্ন ড্রাইভিং লেনের সংখ্যা এবং আকার। লেনের মধ্যে, যানবাহনগুলি তাদের ইচ্ছামত যেকোন দৈর্ঘ্য নিতে পারে এবং তারা সর্বদা তাদের গন্তব্যের সবচেয়ে কাছের হতে চেষ্টা করে, যা রাজমিস্ত্রির বিন্যাসের শুরু।
আপনার লেআউট আইটেমগুলি শুধুমাত্র এক দিকে সীমাবদ্ধ এবং অন্য দিকে অবাধে শ্বাস নিতে পারে, কাছাকাছি থাকা অন্যান্য আইটেম নির্বিশেষে। রাজমিস্ত্রি গ্রিড থেকে আলাদা যে এর ট্র্যাকগুলি শুধুমাত্র একটি একক দিকে সংজ্ঞায়িত করা হয়।
গাঁথনিতে, আইটেমগুলির চাক্ষুষ ক্রম চূড়ান্ত নকশার চেয়ে কম গুরুত্বপূর্ণ। রাজমিস্ত্রি আপনাকে উপলব্ধ স্থানের সর্বাধিক ব্যবহার করতে দেয়, আপনার কাছে যাই হোক না কেন আইটেম। এটি দৃশ্যত নিবিড় পৃষ্ঠাগুলির জন্য এটি একটি দুর্দান্ত পছন্দ করে তোলে এবং যেখানে সামগ্রীর ভিজ্যুয়াল ক্রম চূড়ান্ত ফলাফলের মতো গুরুত্বপূর্ণ নয়৷
রাজমিস্ত্রির একটি আকর্ষণীয় দিক হল যে এটি গ্রিডের মতো আইটেমগুলিকে একাধিক ট্র্যাক স্প্যান করতে দেয়। যখন এটি ঘটে, তখন আইটেমগুলি এমনভাবে স্থাপন করা যেতে থাকে যা যতটা সম্ভব উপলব্ধ স্থান পূরণ করে।
এই অটো-প্লেসমেন্ট আচরণ খুব আকর্ষণীয় ফলাফলের দিকে নিয়ে যেতে পারে, যা ওয়েব ডিজাইনাররা দীর্ঘ সময়ের জন্য অর্জন করার চেষ্টা করেছেন। একটি উদাহরণের জন্য, নিউ ইয়র্ক সিটি ফটো গ্যালারি ডেমো দেখুন, যা দেখায় কিভাবে ফটোগুলিকে একাধিক কলামের সাথে একটি কম্প্যাক্ট উপায়ে প্রদর্শন করা যেতে পারে, যখন নির্দিষ্ট আইটেমগুলিকে (এই উদাহরণের শিরোনাম) একাধিক কলাম জুড়ে বিস্তৃত করার অনুমতি দেয়:
এখানে রাজমিস্ত্রির জন্য ব্যবহার করা যেতে পারে কিছু অন্যান্য উদাহরণ আছে.
একটি ব্লগ লেআউট, প্রতিটি পোস্টের থাম্বনেইল এবং বিবরণ দেখাচ্ছে।
একটি সংবাদ সাইট, যেখানে নিবন্ধগুলি কলামগুলিতে প্রদর্শিত হয়, কিছু নিবন্ধ অন্যদের তুলনায় প্রশস্ত হয় এবং নায়কের ছবিগুলি পৃষ্ঠার পুরো প্রস্থ জুড়ে থাকে৷
বিভিন্ন কলামের আকার সহ ফটোগুলির একটি সংগ্রহ এবং একাধিক কলামে বিস্তৃত কিছু ফটো।
সমাধান এবং তাদের সীমাবদ্ধতা
আজকে ওয়েবে এই ডিজাইন প্যাটার্নটি বাস্তবায়নের জন্য আপনাকে JavaScript লাইব্রেরি বা সমাধান ব্যবহার করতে হবে যা CSS গ্রিড, ফ্লেক্সবক্স বা মাল্টি-কলাম ব্যবহার করে। যাইহোক, এটি করার ফলে খারাপ দিকগুলি আসতে পারে, যার মধ্যে রয়েছে:
- খারাপ কর্মক্ষমতা : CSS রাজমিস্ত্রির অনুকরণ করার জন্য জাভাস্ক্রিপ্ট লাইব্রেরি বা কাস্টম কোডের উপর নির্ভর করা কর্মক্ষমতা ট্রেডঅফের সাথে আসে, যা নেতিবাচক ব্যবহারকারীর অভিজ্ঞতার দিকে নিয়ে যেতে পারে।
- উচ্চতর কোড জটিলতা :
- একটি CSS রাজমিস্ত্রির বিন্যাস অনুকরণ করার জন্য আইটেমগুলির সঠিক স্থান নির্ধারণ এবং CSS গ্রিড, ফ্লেক্সবক্স বা মাল্টি-কলামের মধ্যে স্থান বন্টনের গ্যারান্টি দেওয়া কঠিন।
- নির্দিষ্ট বৈশিষ্ট্যগুলি পরিচালনা করা যেমন আইটেমগুলি একাধিক কলাম বা সারিতে বিস্তৃত, আইটেমগুলির কাস্টম ক্রম বা ভিউপোর্টের সাথে সামঞ্জস্য করা জটিলতা এবং সীমাবদ্ধতার দিকে নিয়ে যেতে পারে।
- বড় রক্ষণাবেক্ষণের বোঝা : জটিল কাস্টম CSS বা জাভাস্ক্রিপ্ট কোড বজায় রাখা আরও কঠিন।
CSS গ্রিড হল একটি আশ্চর্যজনক লেআউট মোড যা খুবই নমনীয় এবং আপনাকে বিভিন্ন ধরনের লেআউট তৈরি করতে দেয়, তা একটি সম্পূর্ণ ওয়েবপেজ বা একটি কম্পোনেন্টের জন্য, অথবা শুধুমাত্র পৃথক আইটেমগুলিকে সারিবদ্ধ করার জন্য। যাইহোক, এর গাঁথনি হিসাবে একই বৈশিষ্ট্য নেই।
CSS গ্রিডে, সারি এবং কলামগুলি কঠোরভাবে সংজ্ঞায়িত করা হয় এবং আইটেমগুলি শুধুমাত্র গ্রিড ঘরের মধ্যেই থাকতে পারে। আপনি যদি একটি অক্ষ বরাবর আইটেমগুলি প্যাক করার চেষ্টা করছেন, কিন্তু আইটেমগুলি তাদের নিজ নিজ কক্ষে মাপসই করা হয় না, তাহলে আপনাকে আইটেমগুলির মধ্যে ফাঁক রেখে বা ফাঁকা স্থান পূরণ করতে তাদের প্রসারিত করার মধ্যে বেছে নিতে হবে।
রাজমিস্ত্রির মতোই, ফ্লেক্সবক্স শুধুমাত্র একটি দিক সম্পর্কে চিন্তা করে এবং আইটেমগুলিকে অন্য দিক দিয়ে তারা যে স্থান দখল করতে চায় তা নির্ধারণ করতে দেয়। এর মানে হল যে আপনি ফ্লেক্সবক্স ব্যবহার করে একটি রাজমিস্ত্রির লেআউটের মতো দেখতে একটি লেআউট পেতে পারেন, যতক্ষণ না আপনি ব্লকের দিক থেকে আইটেমগুলিকে একটি সময়ে একটি কলামে রাখার জন্য খুশি হন। ফ্লেক্স ধারকটিরও একটি সংজ্ঞায়িত ব্লক-আকার বা উচ্চতা প্রয়োজন, যাতে আইটেমগুলিকে একটি নতুন ফ্লেক্স লাইনে মোড়ানো হয়, এইভাবে একটি নতুন কলাম তৈরি করা হয়।
মাল্টি-কলাম একটি লেআউট তৈরি করতে পারে যা রাজমিস্ত্রির মতো দেখায়, আবার আইটেমগুলিকে কলামে সাজিয়ে। উপরন্তু, মাল্টি-কলাম আপনাকে প্রতিটি কলামকে আলাদাভাবে আকার দিতে দেয় না। এগুলি একই আকারের, যেখানে আইটেমগুলি প্যাক করা ট্র্যাকগুলিকে সংজ্ঞায়িত করার ক্ষেত্রে রাজমিস্ত্রি অনেক নমনীয়তা প্রদান করে।
এখানে মনে রাখতে হবে যে গ্রিড, ফ্লেক্সবক্স বা মাল্টি-কলামগুলি রাজমিস্ত্রির চেয়ে খারাপ লেআউট নয়। এগুলি দুর্দান্ত ধরণের লেআউট যা প্রচুর ব্যবহারের ক্ষেত্রে রয়েছে। বিন্দু হল: আপনি যা চান তা যদি একটি রাজমিস্ত্রির বিন্যাস হয়, তাহলে CSS রাজমিস্ত্রি আপনাকে এটি দেবে।
সিএসএস রাজমিস্ত্রির অবস্থা
CSS ওয়ার্কিং গ্রুপ CSS গ্রিড লেভেল 3 স্পেসিফিকেশনে রাজমিস্ত্রির খসড়া তৈরি করছে। স্পেসিফিকেশন এখনও নির্মাণাধীন এবং অস্থায়ীভাবে দুটি ভিন্ন প্রস্তাবিত বাক্য গঠন অন্তর্ভুক্ত। এর মধ্যে প্রথমটি display সম্পত্তির জন্য একটি নতুন কীওয়ার্ড ব্যবহার করে, যখন দ্বিতীয়টিতে রাজমিস্ত্রি সরাসরি CSS গ্রিড বিন্যাসে একত্রিত হয়।
display: masonry
এই সিনট্যাক্স CSS রাজমিস্ত্রির নিজস্ব display টাইপ হিসাবে পরিচয় করিয়ে দেয়। পন্থা এবং এর অনুপ্রেরণার আশেপাশে আরও বিশদ বিবরণ ব্লগ পোস্টে পাওয়া যেতে পারে প্রতিক্রিয়া প্রয়োজন: কীভাবে আমাদের সিএসএস গাঁথনিকে সংজ্ঞায়িত করা উচিত? Google Chrome টিম থেকে, সেইসাথে এই পোস্টের অবশিষ্ট বিভাগে। ক্রোমিয়ামের বর্তমান প্রোটোটাইপ এই প্রস্তাবের উপর ভিত্তি করে।
display: grid; grid-template-*: masonry;
এই সিনট্যাক্সে, সিএসএস গাঁথনি সরাসরি সিএসএস গ্রিডে একত্রিত হয়। রাজমিস্ত্রির মোডটি একটি সারি-ভিত্তিক রাজমিস্ত্রির বিন্যাসের ক্ষেত্রে grid-template-columns সংজ্ঞায় বা কলাম-ভিত্তিক রাজমিস্ত্রির বিন্যাসের ক্ষেত্রে grid-template-rows সংজ্ঞায় কীওয়ার্ড masonry প্রয়োগ করে ট্রিগার করা হয়।
এই প্রস্তাব এবং এর প্রেরণা সম্পর্কে আরও বিশদ বিবরণ ওয়েবকিট পোস্টে পাওয়া যাবে CSS-এ রাজমিস্ত্রির জন্য চূড়ান্ত বাক্য গঠন করতে আমাদের সাহায্য করুন ।
মনে রাখবেন যে এই প্রস্তাবের একটি বিকল্প হল item-pack সম্পত্তি এবং collapse কীওয়ার্ড, যা দুটি গ্রিড টেমপ্লেট বৈশিষ্ট্যগুলির একটি ব্যবহার করার পরিবর্তে CSS রাজমিস্ত্রি ট্রিগার করবে।
Chrome এবং WebKit টিমের পোস্ট প্রকাশের পর থেকে, CSSWG সামগ্রিক সিনট্যাক্সের সাথে এগিয়ে যাওয়ার জন্য আলোচনা অব্যাহত রেখেছে। আপনার প্রতিক্রিয়া এই ফোরামের মধ্যে আরও উন্নয়ন জানাতে সাহায্য করতে পারে।
আলোচনার বর্তমান অবস্থা সম্পর্কে আরও বিশদ বিবরণের জন্য, সংখ্যা 11593 দেখুন, যা রাজমিস্ত্রির সিনট্যাক্স আলোচনার বিষয়গুলির বর্তমান সেটের রূপরেখা দেয় এবং সিনট্যাক্স বিতর্কের সংক্ষিপ্তসারের জন্য সংখ্যা 11243 ।
আপনার নিজস্ব CSS রাজমিস্ত্রি লেআউট তৈরি করুন
আসুন কিছু মজা করি এবং একটি CSS রাজমিস্ত্রি লেআউট তৈরি করি।
যদিও CSS রাজমিস্ত্রির জন্য সিনট্যাক্স এখনও আলোচনার অধীনে রয়েছে, আমাদের বৈশিষ্ট্যটির বাস্তবায়ন আজ ক্রোমিয়ামে পরীক্ষা করা যেতে পারে 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-এর মূল প্রস্তাব থেকে কিছুটা আলাদা। সিএসএস রাজমিস্ত্রির জন্য ব্যবহৃত ট্রিগার নির্বিশেষে, সিএসএস ওয়ার্কিং গ্রুপ সিএসএস রাজমিস্ত্রির বিন্যাসের মধ্যে গ্রিড টেমপ্লেট সাইজিং এবং প্লেসমেন্ট বৈশিষ্ট্যগুলি পুনরায় ব্যবহার করার সিদ্ধান্ত নিয়েছে ।
যদিও এটি লেআউট প্রকারের মধ্যে বৃহত্তর সম্পত্তি পুনঃব্যবহারের অনুমতি দেয়, আপনি এটিকে বিভ্রান্তিকর বলে মনে করতে পারেন এবং আমরা এই বিষয়ে আপনার কাছ থেকে শুনতে চাই। আমরা grid-template-columns এবং grid-template-rows , যেমন template-columns বা template-rows , যা গ্রিড এবং রাজমিস্ত্রি উভয়ের জন্য ব্যবহার করা যেতে পারে, এর মতো বৈশিষ্ট্যগুলির জন্য আরও জেনেরিক উপনাম তৈরি করতে পারি।
ডিফল্ট ট্র্যাক আকার ব্যবহার করুন
একটি নতুন ডিসপ্লে টাইপের সাথে সম্পত্তি ডিফল্ট পুনর্বিবেচনা করার সুযোগ আসে।
গ্রিডে, grid-template-columns এবং grid-template-rows কোনোটিতেই ডিফল্ট none যা বর্তমানে সংজ্ঞায়িত করা হয়েছে, সাধারণত একটি একক কলাম বা সারিতে পরিণত হয়। রাজমিস্ত্রির জন্য, এই ডিফল্টটি প্রায়শই নয়, একটি অবাঞ্ছিত বিন্যাস তৈরি করবে।
Chromium-এ বাস্তবায়ন নতুন প্রস্তাবিত সংজ্ঞা for none যোগ করে, যা CSS রাজমিস্ত্রিতে ডিফল্ট ট্র্যাকের আকার প্রতিস্থাপন করবে। এই নতুন ডিফল্ট ট্র্যাক আকার হল repeat(auto-fill, auto) মান। এই মানটি মোটেও ট্র্যাকের আকারগুলি সংজ্ঞায়িত না করেই একটি সুন্দর রাজমিস্ত্রির বিন্যাস তৈরি করে:
.masonry {
display: masonry;
gap: 10px;
}
ছবিতে দেখানো হয়েছে, রাজমিস্ত্রির ধারকটি উপলব্ধ স্থানের মধ্যে যতগুলি স্বয়ংক্রিয় আকারের কলাম তৈরি করবে।
CSS গ্রিডের সাহায্যে, সমস্ত আইটেম ট্র্যাক আকারের আগে স্থাপন করা হয়, যার মানে এই ট্র্যাক স্বয়ংক্রিয় আকারের সংজ্ঞা সম্ভব নয়। যাইহোক, CSS রাজমিস্ত্রির সাথে, এই নিষেধাজ্ঞা আর প্রযোজ্য নয়, কারণ বসানো এবং সাইজিং একে অপরের সাথে জড়িত এবং সরলীকৃত। এই নিষেধাজ্ঞা প্রত্যাহার করা হলে, এটি আমাদের রাজমিস্ত্রির লেআউটের জন্য আরও দরকারী ট্র্যাক ডিফল্ট আকার সরবরাহ করতে দেয়।
masonry শর্টহ্যান্ড সম্পত্তি চেষ্টা করুন
আগেই উল্লেখ করা হয়েছে, আপনার লেআউটে রাজমিস্ত্রির ট্র্যাক সংজ্ঞায়িত করতে ক্রোমিয়ামের বর্তমান বাস্তবায়ন 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 রাজমিস্ত্রিতে, আইটেমগুলি কলাম বা সারিতে স্থাপন করা হয় যার চলমান অবস্থান সবচেয়ে কম।
একটি দুই কলাম রাজমিস্ত্রির ধারক কল্পনা করুন. যদি পাত্রের প্রথম কলামে 110px উচ্চ আইটেম থাকে এবং দ্বিতীয় কলামে 100px উচ্চ আইটেম থাকে, তাহলে একটি তৃতীয় আইটেমটি দ্বিতীয় কলামে স্থাপন করা হবে, যেখানে এটি রাজমিস্ত্রির দিকনির্দেশের শুরুর 10px কাছাকাছি হবে।
আপনি যদি চলমান অবস্থানের একটি 10px পার্থক্যকে আপনার ক্ষেত্রে যথেষ্ট ছোট বলে মনে করেন এবং এর পরিবর্তে তৃতীয় আইটেমটিকে প্রথম কলামে রাখতে পছন্দ করেন, উত্সের ক্রমকে আরও ভালভাবে মেলাতে, item-tolerance বৈশিষ্ট্যটি ব্যবহার করুন।
নতুন item-tolerance বৈশিষ্ট্য আইটেম স্থাপনের সংবেদনশীলতা নিয়ন্ত্রণ করে।
পূর্ববর্তী উদাহরণে, আপনি item-tolerance: 10px; আইটেম স্থাপনের পরিবর্তনশীলতা কাস্টমাইজ করতে আপনার পাত্রে:
.masonry {
display: masonry;
masonry: 200px 200px;
gap: 10px;
item-tolerance: 10px;
}
উল্লেখ্য যে খসড়া স্পেসিফিকেশন এই সম্পত্তিটিকে item-slack বলে। CSS ওয়ার্কিং গ্রুপ সম্প্রতি পরিবর্তে নাম হিসাবে item-tolerance ব্যবহার করার সিদ্ধান্ত নিয়েছে এবং স্পেকটি শীঘ্রই আপডেট করা হবে।
অন্যান্য উপলব্ধ বৈশিষ্ট্য
আপনি সিএসএস গ্রিডের সাথে যেমন grid-row , grid-column , গ্রিড-এরিয়া , grid-area grid-template-areas , বা order মতো একটি রাজমিস্ত্রির কন্টেইনারের গ্রিড অক্ষে আইটেমগুলিকে আকার এবং স্থাপন করতে একই টেমপ্লেট আকার এবং স্থান নির্ধারণের বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। আপনার রাজমিস্ত্রির লেআউট তৈরি করার সময় CSS গ্রিডের সম্পূর্ণ শক্তির অভিজ্ঞতা নিন।
মতামতের জন্য কল করুন
আমরা আপনার জন্য CSS রাজমিস্ত্রি অন্বেষণ করার জন্য অপেক্ষা করতে পারি না, সৃজনশীল হন এবং নতুন ক্ষমতাগুলি আবিষ্কার করতে পারেন যা এটি আপনাকে আনলক করতে সাহায্য করতে পারে৷ শুরু করার একটি দুর্দান্ত উপায় হল আমাদের ডেমো এবং তাদের উত্স কোড পরীক্ষা করা এবং Chromium-এ আপনার নিজের উদাহরণ তৈরি করা শুরু করা ( প্রথমে পতাকা সক্ষম করতে মনে রাখবেন)।
আপনার প্রতিক্রিয়া আমাদেরকে API আকৃতি দিতে এবং ওয়েবে আপনার প্রয়োজন মেটানোর জন্য ডিজাইন করা হয়েছে কিনা তা পরীক্ষা করতে সাহায্য করার জন্য গুরুত্বপূর্ণ। রাজমিস্ত্রি চেষ্টা করে দেখুন এবং আপনি কি মনে করেন তা আমাদের জানান!
এপিআই-এর আকার সম্পর্কে আপনার যদি চিন্তা বা প্রতিক্রিয়া থাকে, তাহলে ইস্যু 11243- এ মন্তব্য করে আমাদের জানান বা, আপনি যদি আপনার নিজের ব্লগে বা সোশ্যাল মিডিয়াতে একটি পোস্ট লিখতে পছন্দ করেন, তাহলে X বা LinkedIn- এ আমাদের জানাতে ভুলবেন না।
CSS রাজমিস্ত্রি এখনও Chromium এ প্রয়োগ করা হচ্ছে। আপনি যদি এটি পরীক্ষা করেন তবে সচেতন থাকুন যে আমরা এখনও এটিতে সক্রিয়ভাবে কাজ করছি এবং আপনি এমন ক্ষেত্রে সম্মুখীন হতে পারেন যেখানে এটি প্রত্যাশা অনুযায়ী আচরণ করে না। বর্তমান কিছু সীমাবদ্ধতার মধ্যে রয়েছে ঘন প্যাকিং, রিভার্স প্লেসমেন্ট, সাবগ্রিড সাপোর্ট, আউট-অফ-ফ্লো সাপোর্ট, বেসলাইন সাপোর্ট, ডেভটুল সাপোর্ট, ফ্র্যাগমেন্টেশন সাপোর্ট, গ্যাপ ডেকোরেশন সাপোর্ট ইত্যাদি।
বৈশিষ্ট্যটি পরীক্ষা করার সময় আপনি যদি একটি বাগ খুঁজে পান, একটি নতুন Chromium বাগ খুলে আপনার প্রতিক্রিয়া শেয়ার করুন৷