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

Rachel Andrew

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

সতর্কতা: পুরনো সিনট্যাক্স: এই পোস্টের কোড নমুনাগুলি "গ্রিড লেন লেআউট" নামে পরিচিত একটি প্রাথমিক খসড়ার উপর ভিত্তি করে তৈরি। সিনট্যাক্সের সর্বশেষ সংস্করণের জন্য css-grid-3 স্পেসিফিকেশন দেখুন।

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

অতএব, এই পোস্টের লক্ষ্য হল ব্যাখ্যা করা যে কেন Chrome-এ আমরা 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-* এর ছয়টি বৈশিষ্ট্যই ব্যবহার করতে পারে, কিন্তু Masonry শুধুমাত্র flexbox এর মতো একটি উপসেট ব্যবহার করে।

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

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