প্রকাশিত: ১৯ সেপ্টেম্বর, ২০২৪, সর্বশেষ আপডেট: ১৩ ফেব্রুয়ারী, ২০২৬
সিএসএস ওয়ার্কিং গ্রুপ দুটি সিএসএস মেসনরি প্রস্তাবকে একটি খসড়া স্পেসিফিকেশনে একত্রিত করেছে। গ্রুপটি আশা করে যে এটি দুটির তুলনা করা এবং চূড়ান্ত সিদ্ধান্ত নেওয়া সহজ করবে। ক্রোম টিম এখনও বিশ্বাস করে যে একটি পৃথক মেসনরি সিনট্যাক্স এগিয়ে যাওয়ার সর্বোত্তম উপায় হবে। যদিও আমাদের পূর্ববর্তী পোস্টে উল্লেখিত সবচেয়ে বড় পারফরম্যান্স সমস্যাটি সমাধান করা হয়েছে, তবুও সিনট্যাক্স, প্রাথমিক মান এবং গ্রিডের সাথে মিলিত একটি সংস্করণ শেখা কতটা সহজ হবে তা নিয়ে এখনও উদ্বেগ রয়েছে।
তবে আমাদের অনুমান পরীক্ষা করার জন্য, আমরা কিছু উদাহরণের মাধ্যমে কাজ করেছি যাতে দেখা যায় যে প্রতিটি সংস্করণের সাথে রাজমিস্ত্রি কীভাবে কাজ করবে। এই পোস্টের উদাহরণগুলি একবার দেখুন এবং আমাদের আপনার মতামত জানান, যাতে আমরা সিদ্ধান্ত নিতে পারি এবং এই বৈশিষ্ট্যটি নিয়ে এগিয়ে যেতে পারি।
এই পোস্টে সম্ভাব্য সকল ব্যবহারের বিষয় অন্তর্ভুক্ত করা হয়নি, তবে এটা স্পষ্ট যে গ্রিড লেআউট থেকে রাজমিস্ত্রি আলাদা করার ফলে বৈশিষ্ট্যটির কার্যকারিতার অভাব হবে না। আসলে, বিপরীতটি সত্য হতে পারে। আপনি এই পোস্টে দেখতে পাবেন, display: masonry সংস্করণটি নতুন সুযোগ এবং একটি সহজ বাক্য গঠন তৈরি করে। এছাড়াও, অনেক ডেভেলপার রাজমিস্ত্রি দিয়ে আইটেমগুলি পুনরায় অর্ডার করার সম্ভাবনা সম্পর্কে উদ্বেগ প্রকাশ করেছেন যা অ্যাক্সেসযোগ্যতার সমস্যা সৃষ্টি করে। প্রস্তাবিত reading-flow বৈশিষ্ট্যের মাধ্যমে সিনট্যাক্সের উভয় সংস্করণের জন্যও এটি সমাধান করা হচ্ছে।
একটি মৌলিক রাজমিস্ত্রির বিন্যাস
রাজমিস্ত্রির কাজ করার সময় বেশিরভাগ মানুষ এই লেআউটটি কল্পনা করে। জিনিসপত্র সারিতে প্রদর্শিত হয় এবং প্রথম সারি স্থাপনের পরে, পরবর্তী জিনিসগুলি ছোট জিনিসপত্র দ্বারা অবশিষ্ট স্থানে চলে যায়।
display: masonry
একটি রাজমিস্ত্রির লেআউট তৈরি করতে, display প্রোপার্টির জন্য masonry মান ব্যবহার করুন। এটি আপনার দ্বারা সংজ্ঞায়িত (অথবা বিষয়বস্তু দ্বারা সংজ্ঞায়িত) কলাম ট্র্যাক এবং অন্য অক্ষে রাজমিস্ত্রির সাথে একটি রাজমিস্ত্রির লেআউট তৈরি করে। প্রথম আইটেমটি ব্লক এবং ইনলাইন স্টার্টে প্রদর্শিত হয় (অতএব ইংরেজিতে উপরে বাম দিকে), এবং আইটেমগুলি ইনলাইন দিকে সাজানো হয়।
ট্র্যাক সংজ্ঞায়িত করতে CSS গ্রিড লেআউটে ব্যবহৃত ট্র্যাক তালিকার মান সহ 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 সহ কোনও ট্র্যাক নির্দিষ্ট না করলেও একটি masonry লেআউট পাবেন। অতএব 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 ব্যবহার করে একটি masonry layout তৈরি করুন। তারপর grid-auto-flow property ব্যবহার করে row-reverse এর একটি নতুন মান ব্যবহার করুন যাতে আইটেমগুলিকে গ্রিড কন্টেইনারের ব্লক এন্ড থেকে লেআউট করা যায়।
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
দুটি বিকল্পের মধ্যে বিবেচনা করার বিষয়গুলি
display: masonry ভার্সনটি flexbox এর কাজ করার সাথে অনেকটাই মিলে যায়। masonry-direction প্রোপার্টি ব্যবহার করে column-reverse মান দিয়ে কলাম প্রবাহের দিক পরিবর্তন করুন।
CSS গ্রিড সংস্করণটি grid-auto-flow ব্যবহার করে। বর্তমানে সংজ্ঞায়িত grid-auto-flow: row-reverse এবং grid-auto-flow: column-reverse একই প্রভাব দেবে। এটি বিভ্রান্তিকর হতে পারে, কারণ আপনি আশা করতে পারেন যে তারা ভিন্ন কিছু করবে।
সারিগুলির জন্য রাজমিস্ত্রি
আপনি সারি নির্ধারণের জন্য দিক পরিবর্তন করতে পারেন।
display: masonry
display: masonry ব্যবহার করে একটি masonry layout তৈরি করুন, তারপর 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 তে প্রয়োজনীয় যেকোনো আকারের তথ্য যোগ করবেন, ধরে নিয়ে যে ডিফল্ট auto মান আপনার প্রয়োজন তা নয়।
গ্রিডের ক্ষেত্রে, বিপরীত দিকটি করতে আপনাকে 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;
}
তবে rows এর জন্য, মানটি ভিন্নভাবে লিখতে হবে, কারণ 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 কীওয়ার্ড ব্যবহার করা হয়েছে। মৌলিক 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"; ।
এছাড়াও, প্রতিটি উপাদান অবাধে পুনর্বিন্যাস করা যেতে পারে; আপনার মনে রাখার জন্য কোনও নির্দিষ্ট ক্রম নেই। এবং যদি আপনি এর পরিবর্তে rows করতে চান, তাহলে আপনাকে কেবল column-reverse row অথবা row-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- এ আমাদের জানাতে ভুলবেন না।