প্রতিক্রিয়া প্রয়োজন: আমরা কিভাবে CSS রাজমিস্ত্রি সংজ্ঞায়িত করা উচিত?

প্রকাশিত: সেপ্টেম্বর 19, 2024

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

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

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

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

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

কলাম সহ একটি বিন্যাস, আইটেমগুলি কলামগুলি পূরণ করে তা কোনও ফাঁক ছাড়াই করে৷
এই লেআউটে কলামগুলি সংজ্ঞায়িত করা হয়, তারপর আইটেমগুলি কঠোর সারিগুলির পরিবর্তে রাজমিস্ত্রির দ্বারা পূরণ করা হয়।

display: masonry

একটি রাজমিস্ত্রির বিন্যাস তৈরি করতে display সম্পত্তির জন্য masonry মান ব্যবহার করুন। এটি কলাম ট্র্যাকগুলির সাথে একটি রাজমিস্ত্রির বিন্যাস তৈরি করে যা আপনি সংজ্ঞায়িত করেন (বা বিষয়বস্তু দ্বারা সংজ্ঞায়িত) এবং অন্য অক্ষে রাজমিস্ত্রি। প্রথম আইটেমটি ব্লক এবং ইনলাইন স্টার্টে প্রদর্শিত হয় (অতএব ইংরেজিতে উপরের বাম দিকে), এবং আইটেমগুলি ইনলাইন দিক থেকে রাখা হয়।

ট্র্যাকগুলিকে সংজ্ঞায়িত করতে সিএসএস গ্রিড লেআউটে ব্যবহৃত ট্র্যাক তালিকার মান সহ masonry-template-tracks ব্যবহার করুন৷

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

display: grid

একটি রাজমিস্ত্রির বিন্যাস তৈরি করতে, প্রথমে display সম্পত্তির জন্য grid মান ব্যবহার করে একটি গ্রিড বিন্যাস তৈরি করুন। grid-template-columns বৈশিষ্ট্য সহ কলাম সংজ্ঞায়িত করুন, তারপর grid-template-rows masonry একটি মান দিন।

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

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

দুটি বিকল্পের মধ্যে বিবেচনা করার জন্য পয়েন্ট

এই পদ্ধতিগুলির মধ্যে একটি উল্লেখযোগ্য পার্থক্য হল display: masonry সংস্করণের সাথে, আপনি একটি রাজমিস্ত্রির বিন্যাস পাবেন এমনকি যদি আপনি masonry-template-tracks সাথে কোনও ট্র্যাক নির্দিষ্ট না করেন। তাই display: masonry আপনার প্রয়োজন হতে পারে. এর কারণ হল masonry-template-tracks প্রাথমিক মান হল repeat(auto-areas, auto) । লেআউটটি কন্টেইনারের সাথে মানানসই অনেকগুলি স্বয়ংক্রিয় আকারের ট্র্যাক তৈরি করে৷

রাজমিস্ত্রি সঙ্গে বিপরীত প্রবাহ

স্পেসিফিকেশনে রাজমিস্ত্রির প্রবাহের দিক পরিবর্তন করার উপায় অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ, আপনি ব্লক-এন্ড আপ থেকে প্রদর্শনের জন্য প্রবাহ পরিবর্তন করতে পারেন।

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

display: masonry

display: masonry , তারপর column-reverse মান সহ masonry-direction ব্যবহার করুন।

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  masonry-direction: column-reverse;
}

display: grid

display: grid এবং grid-template-rows: masonry । তারপর গ্রিড কন্টেইনারের ব্লক প্রান্ত থেকে আইটেমগুলিকে লেআউট করার জন্য row-reverse একটি নতুন মান সহ grid-auto-flow বৈশিষ্ট্য ব্যবহার করুন।

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

দুটি বিকল্পের মধ্যে বিবেচনা করার জন্য পয়েন্ট

display: masonry সংস্করণটি ফ্লেক্সবক্স কীভাবে কাজ করে তার সাথে খুব মিল মনে করে। column-reverse মান সহ masonry-direction বৈশিষ্ট্য ব্যবহার করে কলামগুলি যে দিকটি প্রবাহিত হয় তা পরিবর্তন করুন।

CSS গ্রিড সংস্করণ grid-auto-flow ব্যবহার করে। বর্তমানে সংজ্ঞায়িত grid-auto-flow: row-reverse এবং grid-auto-flow: column-reverse একই প্রভাব দেবে। এটি বিভ্রান্তিকর হতে পারে, কারণ আপনি তাদের থেকে ভিন্ন কিছু করার আশা করতে পারেন।

সারি জন্য রাজমিস্ত্রি

আপনি সারি সংজ্ঞায়িত করতে দিক পরিবর্তন করতে পারেন।

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

display: masonry

display: masonry , তারপর masonry-direction মান row সেট করুন। আপনি যদি না চান যে আপনার সারিগুলির একটি নির্দিষ্ট ব্লকের আকার থাকুক, ডিফল্ট auto হওয়ায় আপনাকে কোনো ট্র্যাকের আকার নির্দিষ্ট করতে হবে না, তাই ট্র্যাকগুলি যে সামগ্রীতে রয়েছে তার আকার হবে৷

.masonry {
  display: masonry;
  masonry-direction: row;
}

display: grid

.masonry {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 1fr);
}

দুটি বিকল্পের মধ্যে বিবেচনা করার জন্য পয়েন্ট

বিপরীত প্রবাহের মতো, display: masonry সংস্করণ, মানে masonry-direction মান পরিবর্তন করা। গ্রিড সংস্করণের সাথে, আপনাকে grid-template-columns এবং grid-template-rows বৈশিষ্ট্যের মান পরিবর্তন করতে হবে। অথবা, শর্টহ্যান্ড ব্যবহার করলে, সিনট্যাক্সের ক্রম পরিবর্তন করুন।

স্যুইচিং প্রবাহের এই দুটি উদাহরণের সাথে, display: masonry সংস্করণটি আরও স্বজ্ঞাত মনে হয়। প্রবাহ masonry-direction নিয়ন্ত্রণকারী একটি একক সম্পত্তি আছে, এটি নিম্নলিখিত মানগুলির মধ্যে একটি নেয়:

  • row
  • column
  • row-reverse
  • column-reverse

তারপরে আপনি masonry-template-tracks প্রয়োজনীয় যেকোন আকারের তথ্য যোগ করুন, ধরে নিন যে ডিফল্ট স্বয়ংক্রিয় মান আপনার যা প্রয়োজন তা নয়।

গ্রিডের সাথে, বিপরীত দিকটি করতে আপনাকে grid-auto-flow বৈশিষ্ট্য ব্যবহার করতে হবে এবং সারি রাজমিস্ত্রির জন্য grid-template-* বৈশিষ্ট্যের মান পরিবর্তন করতে হবে। বর্তমান গ্রিড সিনট্যাক্সে গ্রিড অক্ষের মান অনির্ধারিত রেখে দেওয়াও সম্ভব নয়। আপনাকে সর্বদা অক্ষের উপর grid-template-* বৈশিষ্ট্যগুলি নির্দিষ্ট করতে হবে যেগুলিতে masonry মান নেই।

অবস্থান আইটেম

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

display: masonry

নিম্নলিখিত CSS চারটি কলাম সহ একটি রাজমিস্ত্রির বিন্যাস সংজ্ঞায়িত করে। গ্রিড অক্ষ তাই কলাম. a এর ক্লাস সহ আইটেমটিকে প্রথম কলাম লাইন থেকে তৃতীয় কলাম লাইনে স্থাপন করা হয়, নতুন masonry-track-* বৈশিষ্ট্য সহ দুটি ট্র্যাক বিস্তৃত। এটিকে masonry-track: 1 / 3; .

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(4, 1fr);
}

.a {
  masonry-track-start: 1;
  masonry-track-end: 3;
}

display: grid

নিম্নলিখিত CSS চারটি কলাম সহ একটি রাজমিস্ত্রির বিন্যাস সংজ্ঞায়িত করে। গ্রিড অক্ষ তাই কলাম. একটি a সহ আইটেমটি প্রথম কলাম লাইন থেকে তৃতীয় কলাম লাইনে স্থাপন করা হয়, grid-column-* বৈশিষ্ট্য সহ দুটি ট্র্যাক বিস্তৃত। এটিকে grid-column: 1 / 3; .

যদি গ্রিড অক্ষটি কলাম হয় তবে grid-row-* বৈশিষ্ট্যগুলি উপেক্ষা করা হবে এবং যদি গ্রিড অক্ষটি সারি হয়, grid-columns-* বৈশিষ্ট্যগুলি উপেক্ষা করা হবে।

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

আপনি উভয় সিনট্যাক্সের সাথে নামযুক্ত লাইন ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণগুলি a নামে দুটি কলাম লাইন সহ একটি গ্রিড দেখায়।

display: masonry

নামযুক্ত রেখাগুলি masonry-template-tracks ট্র্যাক তালিকার মানতে সংজ্ঞায়িত করা হয়েছে। আইটেমটি a নামের যেকোনো লাইনের পরে স্থাপন করা যেতে পারে।

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

display: grid

grid-template-columns ট্র্যাক তালিকার মানগুলিতে নামযুক্ত লাইনগুলি সংজ্ঞায়িত করা হয়েছে। আইটেমটি a নামের প্রথম লাইনের পরে স্থাপন করা হয়। grid-row সম্পত্তি সংজ্ঞায়িত করা হলে এটি উপেক্ষা করা হবে।

.masonry {
  display: grid;
  grid-template-columns: 100px [a] auto [a] auto 100px;
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
  grid-row: a; /* ignored */
}

আপনি উভয় সিনট্যাক্সে নামযুক্ত এলাকাগুলিও ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণগুলি "a", "b", এবং "c" নামের তিনটি ট্র্যাক সহ একটি গ্রিড দেখায়।

display: masonry

ট্র্যাকগুলিকে masonry-template-areas মান হিসাবে নামকরণ করা হয়েছে। যেহেতু কোনো ট্র্যাকের মাপ সংজ্ঞায়িত করা হয়নি, তিনটিই ডিফল্ট auto আকারে। আইটেমটি "a" ট্র্যাকে স্থাপন করা হয়েছে।

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

আপনি সারি বা কলাম সংজ্ঞায়িত করছেন না কেন এটি একই কাজ করে; পার্থক্য শুধুমাত্র masonry-direction সম্পত্তি হবে.

display: grid

কলামের জন্য, সিনট্যাক্স মূলত অভিন্ন। একইভাবে, যেহেতু কোনও ট্র্যাকের মাপ সংজ্ঞায়িত করা হয়নি, তিনটিই auto আকারে ডিফল্ট, তবে আপনাকে এখনও স্পষ্টভাবে বলতে হবে যে অন্য অক্ষটি রাজমিস্ত্রি:

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

সারিগুলির জন্য, যাইহোক, মানটি আলাদাভাবে লিখতে হবে, কারণ grid-template-areas আসলে একটি দ্বি-মাত্রিক এলাকা সংজ্ঞায়িত করে এবং প্রতিটি সারি একটি পৃথক স্ট্রিং হিসাবে লেখা হয়:

.masonry {
  display: grid;
  grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
  grid-template-columns: masonry;
}

.item {
  grid-row: a;
}

দুটি বিকল্পের মধ্যে বিবেচনা করার জন্য পয়েন্ট

যেকোনো অবস্থানের সাথে, display: masonry সিনট্যাক্স যখন দিক পরিবর্তনের ক্ষেত্রে আসে তখন আরও ভাল কাজ করে। যেহেতু masonry-track-* প্রপার্টি গ্রিড অক্ষের যে দিকেই কাজ করে না কেন, দিক পরিবর্তন করার জন্য আপনাকে যা করতে হবে তা হল masonry-direction মান পরিবর্তন করা। গ্রিড সংস্করণের সাথে, স্যুইচিং সক্ষম করতে কমপক্ষে আপনার অপ্রয়োজনীয় বৈশিষ্ট্যগুলির প্রয়োজন হবে। যাইহোক, অন্যান্য উপায়গুলির জন্য পূর্ববর্তী উদাহরণগুলি দেখুন যেখানে দিক পরিবর্তন করা গ্রিড সংস্করণের সাথে আরও জটিল।

শর্টহ্যান্ডস

এই পোস্টে লংহ্যান্ডগুলি ব্যবহার করা হয়েছে কোন বৈশিষ্ট্যগুলি ব্যবহার করা হচ্ছে তা পরিষ্কার করার জন্য, তবে উভয় display: masonry এবং display: grid সংস্করণ শর্টহ্যান্ড ব্যবহার করে সংজ্ঞায়িত করা যেতে পারে।

display: masonry

display: masonry শর্টহ্যান্ড masonry কীওয়ার্ড ব্যবহার করে। মৌলিক রাজমিস্ত্রি লেআউট তৈরি করতে নিম্নলিখিত CSS ব্যবহার করুন:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr);
}

একটি সাধারণ সারি-ভিত্তিক রাজমিস্ত্রির লেআউট তৈরি করতে:

.masonry {
  display: masonry;
  masonry: row;
}

শর্টহ্যান্ড সহ ট্র্যাক এবং একটি সারি-ভিত্তিক লেআউট সংজ্ঞায়িত করতে:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

display: grid

grid শর্টহ্যান্ড ব্যবহার করে মৌলিক রাজমিস্ত্রির লেআউট তৈরি করতে।

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

একটি সাধারণ সারি-ভিত্তিক রাজমিস্ত্রির লেআউট তৈরি করতে:

.masonry {
  display: grid;
  grid: repeat(3, auto) / masonry;
}

আরও জটিল উদাহরণে, যেহেতু সামগ্রিক display:masonry সিনট্যাক্স সহজ, তাই এটি অতিরিক্ত জটিল না হয়ে শর্টহ্যান্ডে আরও বৈশিষ্ট্য একসাথে প্যাক করা যেতে পারে।

উদাহরণ স্বরূপ, "a", "b", এবং "c" নামে তিনটি কলাম তৈরি করার কল্পনা করুন, নীচে থেকে উপরে ভরা।

display:masonry

display: masonry , এই তিনটিই শর্টহ্যান্ডে একসাথে সেট করা যেতে পারে:

.masonry {
  display: masonry;
  masonry: column-reverse "a b c";
}

যেহেতু সেগুলি স্বয়ংক্রিয় আকারের, আপনাকে আকারগুলি নির্দিষ্ট করার দরকার নেই, তবে আপনি যদি পরিবর্তে একটি নির্দিষ্ট আকার চান তবে এটি যোগ করা যেতে পারে। যেমন: masonry: column-reverse 50px 100px 200px "ab c"; .

এছাড়াও, প্রতিটি উপাদান অবাধে পুনর্বিন্যাস করা যেতে পারে; আপনার মনে রাখার কোন নির্দিষ্ট অর্ডার নেই। এবং যদি আপনি পরিবর্তে সারিগুলি করতে চান তবে আপনাকে যা করতে হবে তা হল row বা row-reverse সাথে column-reverse অদলবদল করুন; বাকি সিনট্যাক্স একই থাকে।

display: grid

display: grid , ​​এই তিনটি দিক আলাদাভাবে সেট করতে হবে:

.masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

রাজমিস্ত্রির উদাহরণের মতো, এটি সমস্ত কলামের auto আকার তৈরি করে, তবে আপনি যদি স্পষ্ট আকার সরবরাহ করতে চান তবে আপনি তা করতে পারেন:

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

অথবা আপনি যদি একসাথে আকার এবং এলাকার নাম সেট করতে 'গ্রিড' ব্যবহার করতে চান:

.masonry {
  display: grid;
  grid: "a b c" masonry / 50px 100px 200px;
  grid-auto-flow: wrap-reverse;
}

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

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

অথবা, সেগুলিকে এক সংক্ষিপ্ত আকারে রাখতে:

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

দুটি বিকল্পের মধ্যে বিবেচনা করার জন্য পয়েন্ট

display: masonry শর্টহ্যান্ড ব্যাপকভাবে ব্যবহৃত হতে পারে, কারণ এটি তুলনামূলকভাবে সহজবোধ্য শর্টহ্যান্ড। অনেক ক্ষেত্রে, একটি "মানক" রাজমিস্ত্রির লেআউটের জন্য, আপনি শুধু ট্র্যাকের সংজ্ঞা সেট করবেন; অন্য সব মান ডিফল্ট ধরে নিতে পারে।

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

অন্যান্য বিবেচনা

এই পোস্টটি আজ কিছু সাধারণ ব্যবহারের ক্ষেত্রে দেখায়, তবে আমরা জানি না ভবিষ্যতে গ্রিড বা রাজমিস্ত্রির জন্য কী থাকতে পারে। আলাদা display: masonry সিনট্যাক্স হল এটি দুটিকে ভবিষ্যতে ভিন্ন হতে দেয়। বিশেষ করে প্রাথমিক মানগুলির সাথে - যেমন masonry-template-tracks জন্য - এটি গ্রিডের চেয়ে রাজমিস্ত্রিতে আলাদা কিছু করা কার্যকর হতে পারে। আমরা display: grid সংস্করণের সাথে গেলে আমরা গ্রিড ডিফল্ট পরিবর্তন করতে পারি না, এটি ভবিষ্যতে আমরা যা করতে চাই তা সীমিত করতে পারে।

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

আপনার মতামত প্রদান করুন

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