CSS গাঁথনি জন্য একটি বিকল্প প্রস্তাব

Rachel Andrew

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

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

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

রাজমিস্ত্রি গ্রিডের অংশ হওয়া উচিত?

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

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

দ্রষ্টব্য: এই পোস্টটি প্রতিটির সম্পূর্ণ এবং বিশদ ব্যাখ্যা দেওয়ার পরিবর্তে মূল সমস্যাগুলি হাইলাইট করার চেষ্টা করে। সম্পূর্ণ বিবরণের জন্য লিঙ্ক করা সমস্যা দেখুন.

কর্মক্ষমতা

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

অতএব, আপনার যদি grid-template-columns: 200px auto 200px — গ্রিডে করা একটি খুব সাধারণ জিনিস—আপনি সমস্যায় পড়তে শুরু করেন। আপনি একবার সাবগ্রিড যোগ করলে এই সমস্যাগুলি সূচকীয় হয়ে ওঠে ।

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

প্রতিটি লেআউট পদ্ধতিতে যে জিনিসগুলি বোঝা যায় না সেগুলি সম্পর্কে আমরা কী করব?

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

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

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

এছাড়াও এমন নিদর্শন রয়েছে যা রাজমিস্ত্রিতে অর্থবহ হবে, উদাহরণস্বরূপ grid-template-columns: repeat(auto-fill, max-content) , কারণ আপনার ক্রস সীমাবদ্ধতা নেই, তবে গ্রিডে অবৈধ থাকতে হবে। নিম্নলিখিত বৈশিষ্ট্যগুলির একটি তালিকা যা আমরা ভিন্নভাবে আচরণ করার আশা করি বা ভিন্ন বৈধ মান আছে৷

• grid-template-areas : গাঁথনিতে আপনি শুধুমাত্র প্রাথমিক সারিটি নন-মেনরি দিক নির্দেশ করতে পারেন।
• grid-template : শর্টহ্যান্ডকে সমস্ত পার্থক্যের জন্য অ্যাকাউন্ট করতে হবে।
• আইনি মানগুলির পার্থক্যের কারণে grid-template-columns এবং grid-template-rows জন্য সাইজিং মানগুলি ট্র্যাক করুন৷
• grid-auto-flow রাজমিস্ত্রির ক্ষেত্রে প্রযোজ্য নয় এবং masonry-auto-flow গ্রিডে প্রযোজ্য নয়। আপনি যে লেআউট পদ্ধতিতে আছেন তার কারণে সেগুলিকে একত্রিত করা জিনিসগুলির সমস্যা তৈরি করবে যা অবৈধ৷
• গ্রিডের চারটি স্থান নির্ধারণের বৈশিষ্ট্য রয়েছে ( grid-column-start এবং আরও অনেক কিছু), রাজমিস্ত্রির রয়েছে মাত্র দুটি।
• গ্রিড justify-* এবং align-* বৈশিষ্ট্যগুলির ছয়টি ব্যবহার করতে পারে, তবে রাজমিস্ত্রি শুধুমাত্র ফ্লেক্সবক্সের মতো একটি উপসেট ব্যবহার করে।

ডেভেলপারদের দ্বারা সৃষ্ট সমস্ত নতুন ত্রুটির ক্ষেত্রে কী ঘটবে তা নির্দিষ্ট করার প্রয়োজন হবে এমন একটি মান ব্যবহার করে যা গ্রিড-ওয়াথ-মেসনরি বা গ্রিড-বিহীন রাজমিস্ত্রিতে বৈধ নয়। উদাহরণস্বরূপ, grid-template-columns: masonry বা grid-template-rows: masonry ব্যবহার করা বৈধ কিন্তু উভয়ই একবারে নয়। আপনি একবারে উভয় ব্যবহার করলে কি হবে? এই বিবরণগুলি নির্দিষ্ট করতে হবে যাতে সমস্ত ব্রাউজার একই জিনিস করে।

এই সব এখন এবং ভবিষ্যতে একটি স্পেসিফিকেশন দৃষ্টিকোণ থেকে জটিল হয়ে ওঠে। আমাদের নিশ্চিত করতে হবে যে সবকিছুই রাজমিস্ত্রির বিবেচনায় নেয় এবং এটি রাজমিস্ত্রিতে কাজ করে বা না করে। এটি বিকাশকারীদের দৃষ্টিকোণ থেকেও বিভ্রান্তিকর। কেন আপনার মাথায় রাখা উচিত যে display: grid কাজ করে না?

একটি বিকল্প প্রস্তাব

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

দ্রষ্টব্য: উদাহরণগুলি display: masonry এবং masonry-* বৈশিষ্ট্য, masonry ব্যবহার করার জন্য সেরা নাম কিনা তা নিয়ে একটি পৃথক সমস্যা রয়েছে।

ক্লাসিক রাজমিস্ত্রির বিন্যাস

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

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

বিভিন্ন কলাম প্রস্থের জন্য গ্রিড টাইপ ট্র্যাক সাইজিং ব্যবহার করুন

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

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

গাঁথনি জন্য অতিরিক্ত ট্র্যাক আকার

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

অটো-ফিলিং max-content আকারের ট্র্যাক।

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, max-content);
  gap: 1rem;
}

অটো-ফিলিং auto আকারের ট্র্যাক, যা একই আকারের ট্র্যাক তৈরি করবে, সবচেয়ে বড়টিকে মিটমাট করার জন্য স্বয়ংক্রিয় আকারের ট্র্যাক তৈরি করবে৷

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

বিষয়বস্তুকে কলাম স্প্যান করার অনুমতি দিন এবং রাজমিস্ত্রির লেআউটে আইটেম রাখুন

একটি পৃথক রাজমিস্ত্রির স্পেসিফিকেশনে কলাম বিস্তৃত বিষয়বস্তু না থাকার কোন কারণ নেই। এটি একটি masonry-track সম্পত্তি ব্যবহার করতে পারে, masonry-track-start এবং masonry-track-end একটি সংক্ষিপ্ত হস্ত যেহেতু একটি রাজমিস্ত্রির বিন্যাসে থাকাকালীন জিনিসগুলিকে বিস্তৃত করার জন্য আপনার কাছে শুধুমাত্র একটি মাত্রা থাকে।

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
}

.span-2 {
  masonry-track: span 2; /* spans two columns */
}

.placed {
  masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}

সাব-মেসনরি বা সাবগ্রিড রাজমিস্ত্রির ট্র্যাক গ্রহণ করে

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

উপসংহার

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

আপনার যদি কোনো প্রতিক্রিয়া থাকে, তাহলে ইস্যু 9041- এ আলোচনায় যোগ দিন।

ব্রামাস, ট্যাব অ্যাটকিন্স-বিটনার, উনা ক্র্যাভেটস, ইয়ান কিলপ্যাট্রিক এবং ক্রিস হ্যারেলসনকে ধন্যবাদ এই পোস্টের পর্যালোচনা এবং আলোচনার জন্য