CSS গ্রিডের অন্তর্নিহিত গ্রিড এবং অটো-প্লেসমেন্ট ক্ষমতাগুলি অন্বেষণ করা

CSS গ্রিড নিয়ে কাজ করার সময় প্রথমেই সেট করতে হবে display: grid আমরা একটি গ্রিড ধারক হতে চান যে উপাদান. তারপর আমরা স্পষ্টভাবে একটি সমন্বয় ব্যবহার করে গ্রিড সংজ্ঞায়িত grid-template-columns, grid-template-rows, এবং grid-template-areas. এবং সেখান থেকে, পরবর্তী ধাপ হল গ্রিডের ভিতরে আইটেম স্থাপন করা।

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

"অন্তর্নিহিত স্পষ্ট? নরক এখানে কি ঘটছে?"

অদ্ভুত পদ, তাই না? ইতিমধ্যেই ম্যানুয়েল মাতুজুভিচ হয়েছে একটি ভাল ব্যাখ্যা আমরা সিএসএস গ্রিডে "অন্তর্নিহিত" এবং "স্পষ্ট" দ্বারা কী করতে পারি, তবে আসুন সরাসরি কী খনন করি দ্য specification বলেছেন:

সার্জারির grid-template-rows, grid-template-columns, এবং grid-template-areas বৈশিষ্ট্য একটি নির্দিষ্ট সংখ্যক ট্র্যাক সংজ্ঞায়িত করে যা গঠন করে স্পষ্ট গ্রিড. যখন গ্রিড আইটেমগুলি এই সীমার বাইরে অবস্থান করা হয়, গ্রিড ধারক গ্রিডে অন্তর্নিহিত গ্রিড লাইন যুক্ত করে অন্তর্নিহিত গ্রিড ট্র্যাক তৈরি করে। এই লাইনগুলি একত্রে স্পষ্ট গ্রিড ফর্মের সাথে অন্তর্নিহিত গ্রিড.

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

স্বয়ংক্রিয় বসানো সম্পর্কে কি?

অন্তর্নিহিত গ্রিড ধারণার অনুরূপ, স্বয়ংক্রিয় বসানো ব্রাউজার স্বয়ংক্রিয়ভাবে গ্রিড ভিতরে আইটেম স্থাপন করার ক্ষমতা. আমরা সবসময় প্রতিটি আইটেমের অবস্থান দিতে হবে না.

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

গতিশীল সাইডবার

এখানে, আমাদের তিনটি ভিন্ন লেআউট রয়েছে কিন্তু আমাদের শুধুমাত্র একটি গ্রিড কনফিগারেশন রয়েছে যা তাদের সকলের জন্য কাজ করে।

main {
  display: grid;
  grid-template-columns: 1fr;
}

শুধুমাত্র একটি কলাম সমস্ত ফাঁকা জায়গা নিচ্ছে৷ এটি আমাদের "স্পষ্ট" গ্রিড। এটি একটি গ্রিড আইটেম ফিট করার জন্য সেট আপ করা হয়েছে main গ্রিড ধারক। এখানেই শেষ. একটি কলাম এবং একটি সারি:

কিন্তু যদি আমরা সেখানে অন্য উপাদান ড্রপ করার সিদ্ধান্ত নিয়েছে, একটি বলে aside (আমাদের গতিশীল সাইডবার)। যেহেতু এটি বর্তমানে (এবং স্পষ্টভাবে) সংজ্ঞায়িত করা হয়েছে, আমাদের গ্রিডকে সেই উপাদানটির জন্য একটি স্থান খুঁজে পেতে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে হবে। এবং যদি আমরা আমাদের CSS এর সাথে অন্য কিছু না করি, তাহলে DevTools আমাদের যা বলছে তা হচ্ছে।

আমরা সরাতে পারি <aside> পাশে একটি কলামে <section>:

aside {
  grid-column-start: 2;
}

এবং DevTools এখন আমাদের যা বলে তা এখানে:

আমরা আমাদের উপাদানটি দ্বিতীয় কলামে রাখি কিন্তু... আমাদের দ্বিতীয় কলাম নেই। অদ্ভুত, তাই না? আমরা একটি দ্বিতীয় কলাম ঘোষণা <main> গ্রিড ধারক, কিন্তু ব্রাউজার আমাদের জন্য একটি তৈরি করেছে! আমরা যে স্পেসিফিকেশন দেখেছি তার মূল অংশটি হল:

যখন গ্রিড আইটেমগুলি এই সীমার বাইরে অবস্থান করা হয়, গ্রিড ধারক গ্রিডে অন্তর্নিহিত গ্রিড লাইন যুক্ত করে অন্তর্নিহিত গ্রিড ট্র্যাক তৈরি করে।

এই শক্তিশালী বৈশিষ্ট্য আমাদের গতিশীল বিন্যাস আছে অনুমতি দেয়. যদি আমরা শুধুমাত্র আছে <section> উপাদান, আমরা একটি কলাম পেতে সব. কিন্তু যদি আমরা একটি যোগ <aside> মিশ্রণে উপাদান, এটি ধারণ করার জন্য একটি অতিরিক্ত কলাম তৈরি করা হয়।

আমরা স্থাপন করতে পারে <aside> পূর্বে <section> পরিবর্তে এই মত:

aside {
  grid-column-end: -2;
} 

এটি গ্রিডের শুরুতে অন্তর্নিহিত কলাম তৈরি করে, পূর্ববর্তী কোডের বিপরীতে যা শেষে অন্তর্নিহিত কলাম রাখে।

আমরা ব্যবহার করে আরো সহজে একই জিনিস করতে পারেন grid-auto-flow কোনো এবং সমস্ত অন্তর্নিহিত ট্র্যাকগুলিকে প্রবাহিত করার জন্য একটি সম্পত্তি column অভিমুখ:

এখন নির্দিষ্ট করার দরকার নেই grid-column-start স্থাপন করার জন্য <aside> এর ডানদিকে উপাদান <section>! প্রকৃতপক্ষে, অন্য যেকোন গ্রিড আইটেম যেকোন সময় আমরা সেখানে নিক্ষেপ করার সিদ্ধান্ত নিই তা এখন একটি কলামের দিকে প্রবাহিত হবে, প্রতিটি তার নিজস্ব অন্তর্নিহিত গ্রিড ট্র্যাকগুলিতে স্থাপন করা হবে। এমন পরিস্থিতির জন্য উপযুক্ত যেখানে গ্রিডে আইটেমের সংখ্যা আগে থেকে জানা যায় না!

যে বলেন, আমরা এখনও প্রয়োজন আছে grid-column-end যদি আমরা এটির বাম দিকে একটি কলামে এটি স্থাপন করতে চাই কারণ, অন্যথায়, <aside> সুস্পষ্ট কলাম দখল করবে যা, ঘুরে, ধাক্কা দেয় <section> স্পষ্ট গ্রিডের বাইরে এবং এটিকে অন্তর্নিহিত কলাম নিতে বাধ্য করে।

আমি জানি আমি জানি. যে একটু বিভ্রান্তিকর. এখানে আরেকটি উদাহরণ রয়েছে যা আমরা এই সামান্য ব্যঙ্গটিকে আরও ভালভাবে বোঝার জন্য ব্যবহার করতে পারি:

প্রথম উদাহরণে, আমরা কোনো স্থান নির্ধারণ করিনি। এই ক্ষেত্রে, ব্রাউজার প্রথমে স্থাপন করবে <aside> স্পষ্ট কলামে উপাদান যেহেতু এটি DOM-এ প্রথম আসে। দ্য <section>, ইতিমধ্যে, ব্রাউজার স্বয়ংক্রিয়ভাবে (বা অন্তর্নিহিতভাবে) আমাদের জন্য তৈরি করে গ্রিড কলামে স্বয়ংক্রিয়ভাবে স্থাপন করা হয়।

দ্বিতীয় উদাহরণে, আমরা সেট করেছি <aside> স্পষ্ট গ্রিডের বাইরে উপাদান:

aside {
  grid-column-end: -2;
}

এখন এটা কোন ব্যাপার না <aside> HTML এ প্রথম আসে। পুনর্নির্ধারণ করে <aside> অন্য কোথাও, আমরা তৈরি করেছি <section> স্পষ্ট কলাম নেওয়ার জন্য উপলব্ধ উপাদান।

ইমেজ গ্রিড

আসুন চিত্রগুলির একটি গ্রিড দিয়ে ভিন্ন কিছু চেষ্টা করি যেখানে আমাদের একটি বড় চিত্র এবং এটির পাশে (বা এটির নীচে) কয়েকটি থাম্বনেল রয়েছে।

আমাদের দুটি গ্রিড কনফিগারেশন আছে। কিন্তু অনুমান করতে পার কি? আমি কোনো গ্রিড সংজ্ঞায়িত করছি না! আমি যা করছি তা হল:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

অপেক্ষা করুন! হয় না grid-area যে সম্পত্তি আমরা সংজ্ঞায়িত করতে ব্যবহার করি নামকৃত এলাকা এর পরিবর্তে উপাদানগুলি কোথায় শুরু হয় এবং গ্রিডে শেষ হয়?

হ্যাঁ, তবে এটি আরও বেশি করে। আমরা সম্পর্কে আরো অনেক কিছু লিখতে পারে grid-area, কিন্তু এই বিশেষ ক্ষেত্রে:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

শর্টহ্যান্ড সংস্করণটি প্রসারিত করতে ওপেন DevTools ক্র্যাক করার সময় আমরা একই জিনিস দেখতে পারি:

এর মানে হল যে গ্রিডের প্রথম চিত্র উপাদানটি স্প্যান করতে হবে তিনটি কলাম এবং তিন সারি. কিন্তু যেহেতু আমরা কোনো কলাম বা সারি নির্ধারণ করিনি, তাই ব্রাউজার আমাদের জন্য এটি করে।

3⨉3 গ্রিড নেওয়ার জন্য আমরা মূলত HTML-এ প্রথম ছবি রেখেছি। এর মানে হল যে অন্য কোনও ছবি নতুন কিছু নির্দিষ্ট করার প্রয়োজন ছাড়াই একই তিনটি কলামে স্বয়ংক্রিয়ভাবে স্থাপন করা হবে।

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

এই সব CSS এর এক লাইন থেকে! এটি "অন্তর্নিহিত" গ্রিড এবং স্বয়ংক্রিয়-স্থাপনের শক্তি।

সেই ডেমোতে দ্বিতীয় গ্রিড কনফিগারেশনের জন্য, আমি যা করেছি তা হল স্বয়ংক্রিয় প্রবাহের দিক পরিবর্তন করে grid-auto-flow: column একইভাবে আমরা একটি স্থাপন করার সময় আগে করেছি <aside> a এর পাশের উপাদান <section>. এটি ব্রাউজারকে একটি তৈরি করতে বাধ্য করে চতুর্থ কলাম এটি অবশিষ্ট ছবি স্থাপন করতে ব্যবহার করতে পারেন. এবং যেহেতু আমাদের তিনটি সারি আছে, অবশিষ্ট চিত্রগুলি একই উল্লম্ব কলামের ভিতরে স্থাপন করা হবে।

কোনও ওভারফ্লো ছাড়াই গ্রিডের ভিতরে সুন্দরভাবে ফিট করে তা নিশ্চিত করতে আমাদের চিত্রগুলিতে কয়েকটি বৈশিষ্ট্য যুক্ত করতে হবে:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

এবং অবশ্যই, আমরা একটি মান সামঞ্জস্য করে আরও ছবি বিবেচনা করার জন্য সহজেই গ্রিড আপডেট করতে পারি। যে হবে 3 বড় ইমেজ জন্য শৈলী মধ্যে. আমাদের এই আছে:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

কিন্তু আমরা এটি পরিবর্তন করে একটি চতুর্থ কলাম যোগ করতে পারি 4 পরিবর্তে:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

আরও ভাল: জিনিসগুলিকে আপডেট করা আরও সহজ করতে একটি কাস্টম সম্পত্তি হিসাবে সেট আপ করা যাক৷

ডাইনামিক লেআউট

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

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

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

বিট যখন আমরা দ্বিতীয় উপাদান যোগ করি, আমরা ব্যবহার করে আরেকটি (অন্তর্ভুক্ত) কলাম তৈরি করি grid-column-start: 2.

যখন আমরা একটি তৃতীয় উপাদান যোগ করি, তখন এটি দুটি কলামের প্রস্থ গ্রহণ করা উচিত - তাই আমরা ব্যবহার করি grid-column-start: span 2, কিন্তু শুধুমাত্র যদি এটি হয় :last-child কারণ যদি (এবং কখন) আমরা একটি চতুর্থ উপাদান যোগ করি, তবে সেটি শুধুমাত্র একটি কলাম গ্রহণ করা উচিত।

যে আপ যোগ, আমরা আছে চারটি গ্রিড কনফিগারেশন শুধুমাত্র সাথে দুটি ঘোষণা এবং অন্তর্নিহিত গ্রিডের যাদু:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

আসুন আরেকটি চেষ্টা করি:

আমরা প্রথম এবং দ্বিতীয় ক্ষেত্রে কিছুই করছি না যেখানে আমাদের শুধুমাত্র এক বা দুটি উপাদান আছে। যখন আমরা একটি তৃতীয় উপাদান যোগ করি, যদিও, আমরা ব্রাউজারকে বলি যে - যতক্ষণ না এটি :last-child - এটি দুটি কলাম স্প্যান করা উচিত। যখন আমরা একটি চতুর্থ উপাদান যোগ করি, তখন আমরা ব্রাউজারকে বলি যে উপাদানটি দ্বিতীয় কলামে স্থাপন করা প্রয়োজন।

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

আপনি কৌশল পেতে শুরু? আমরা উপাদানের সংখ্যার উপর ভিত্তি করে ব্রাউজারকে নির্দিষ্ট নির্দেশনা দিই (ব্যবহার করে :nth-child) এবং, কখনও কখনও, একটি নির্দেশ সম্পূর্ণরূপে লেআউট পরিবর্তন করতে পারে।

এটি লক্ষ করা উচিত যে আমরা যখন বিভিন্ন বিষয়বস্তু নিয়ে কাজ করি তখন আকার একই হবে না:

যেহেতু আমরা আমাদের আইটেমগুলির জন্য কোনো আকার সংজ্ঞায়িত করিনি, তাই ব্রাউজার স্বয়ংক্রিয়ভাবে তাদের বিষয়বস্তুর উপর ভিত্তি করে আমাদের জন্য সেগুলিকে আকার দেয় এবং আমরা যা দেখেছি তার থেকে ভিন্ন আকারের সাথে শেষ হতে পারে৷ এটা কাটিয়ে উঠতে হবে স্পষ্টভাবে উল্লেখ করুন যে সমস্ত কলাম এবং সারি সমান আকারের:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

আরে, আমরা এখনও সেই সম্পত্তি নিয়ে খেলিনি! grid-auto-rows এবং grid-auto-columns একটি গ্রিড পাত্রে যথাক্রমে অন্তর্নিহিত সারি এবং কলামের আকার সেট করুন। বা, হিসাবে বৈশিষ্ট এটি ব্যাখ্যা করে:

সার্জারির grid-auto-columns এবং grid-auto-rows বৈশিষ্ট্য দ্বারা একটি মাপ বরাদ্দ না করা ট্র্যাকগুলির আকার নির্দিষ্ট করে৷ grid-template-rows or grid-template-columns.

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

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

এটা দিয়ে কি হচ্ছে grid-auto-rows এবং কেন এটি তিনটি মান নেয়? আমরা কি তিনটি সারি সংজ্ঞায়িত করছি?

না, আমরা তিনটি সারি সংজ্ঞায়িত করছি না। কিন্তু আমরা হয় আমাদের অন্তর্নিহিত সারিগুলির জন্য একটি প্যাটার্ন হিসাবে তিনটি মান সংজ্ঞায়িত করা। যুক্তিটি নিম্নরূপ:

• যদি আমাদের একটি সারি থাকে তবে এটি প্রথম মানের সাথে আকার পাবে।
• যদি আমাদের দুটি সারি থাকে, প্রথমটি প্রথম মান এবং দ্বিতীয়টি দ্বিতীয় মান পায়।
• আমাদের তিনটি সারি থাকলে, তিনটি মান ব্যবহার করা হবে।
• যদি আমাদের চারটি সারি থাকে (এবং এখানে আকর্ষণীয় অংশটি আসে), আমরা প্রথম তিনটি সারির জন্য তিনটি মান ব্যবহার করি এবং আমরা চতুর্থ সারির জন্য আবার প্রথম মানটি পুনরায় ব্যবহার করি। এই কারণেই এটি এক ধরণের প্যাটার্ন যা আমরা সমস্ত অন্তর্নিহিত সারির আকারের জন্য পুনরাবৃত্তি করি।
• যদি আমাদের 100টি সারি থাকে, তাহলে সেগুলির আকার তিন-বাই-তিন হবে 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1frইত্যাদি

অসদৃশ grid-template-rows যা সারির সংখ্যা এবং তাদের আকার নির্ধারণ করে, grid-auto-rows শুধুমাত্র মাপের সারি যা পথে তৈরি হতে পারে।

আমরা যদি আমাদের উদাহরণে ফিরে যাই, যুক্তি হল দুটি সারি তৈরি করার সময় সমান আকার থাকা উচিত (আমরা ব্যবহার করব 2fr 2fr), কিন্তু যদি একটি তৃতীয় সারি তৈরি করা হয় তবে আমরা এটিকে একটু ছোট করি।

গ্রিড নিদর্শন

এই শেষ এক জন্য, আমরা নিদর্শন সম্পর্কে কথা বলতে যাচ্ছি. আপনি সম্ভবত সেই দুটি কলামের লেআউট দেখেছেন যেখানে একটি কলাম অন্যটির চেয়ে প্রশস্ত, এবং প্রতিটি সারি সেই কলামগুলির স্থান পরিবর্তন করে।

আমরা ঠিক কতটা বিষয়বস্তু নিয়ে কাজ করছি তা না জেনেও এই সাজানোর বিন্যাসটি বন্ধ করা কঠিন হতে পারে, কিন্তু CSS গ্রিডের অন্তর্নিহিত অটো-প্লেসমেন্ট ক্ষমতা এটিকে আপেক্ষিক সিনচ করে তোলে।

কোড এ উঁকি না. এটি জটিল মনে হতে পারে তবে আসুন এটিকে ভেঙে ফেলা যাক কারণ এটি বেশ সহজবোধ্য।

প্রথম জিনিসটি প্যাটার্ন সনাক্ত করা হয়। নিজেকে জিজ্ঞাসা করুন: "কত উপাদানের পরে প্যাটার্নটি পুনরাবৃত্তি করা উচিত?" এই ক্ষেত্রে এটি প্রতি চারটি উপাদানের পরে। সুতরাং, এখনকার জন্য শুধুমাত্র চারটি উপাদান ব্যবহার করা যাক:

এখন, গ্রিড সংজ্ঞায়িত করা যাক এবং ব্যবহার করে সাধারণ প্যাটার্ন সেট আপ করা যাক :nth-child উপাদানগুলির মধ্যে বিকল্পের জন্য নির্বাচক:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

আমরা বলেছিলাম যে আমাদের প্যাটার্ন প্রতি চারটি উপাদানের পুনরাবৃত্তি করে, তাই আমরা যৌক্তিকভাবে ব্যবহার করব 4n + x কোথায় x 1 থেকে 4 পর্যন্ত। প্যাটার্নটিকে এভাবে ব্যাখ্যা করা একটু সহজ:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

পারফেক্ট, তাই না? আমাদের চারটি উপাদান আছে, এবং পঞ্চম উপাদান, নবম উপাদান ইত্যাদির প্যাটার্নটি পুনরাবৃত্তি করি।

সেগুলো :nth-child নির্বাচকরা চতুর হতে পারে! ক্রিস একটি সুপার সহায়ক আছে কিভাবে এটা সব কাজ করে ব্যাখ্যাসহ বিভিন্ন নিদর্শন তৈরির জন্য রেসিপি.

এখন আমরা প্রতিটি উপাদান কনফিগার করি যাতে:

1. প্রথম উপাদানটিকে দুটি কলাম নিতে হবে এবং একটি কলাম থেকে শুরু করতে হবে (grid-column: 1/span 2).
2. দ্বিতীয় উপাদানটি তৃতীয় কলামে স্থাপন করা হয়েছে (grid-column-start: 3).
3. তৃতীয় উপাদানটি প্রথম কলামে স্থাপন করা হয়েছে: (grid-column-start: 1).
4. চতুর্থ উপাদানটি দুটি কলাম নেয় এবং দ্বিতীয় কলামে শুরু হয়: (grid-column: 2/span 2).

এখানে এটি CSS এ রয়েছে:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

আমরা যা করতে পারি তা হল আপডেট grid-column: 1 /span 2 এবং শুধুমাত্র ব্যবহার করুন grid-column: span 2 যেহেতু, ডিফল্টরূপে, ব্রাউজার প্রথম আইটেমটিকে প্রথম কলামে রাখবে। এছাড়াও আমরা এটি অপসারণ করতে পারি:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

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

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

তবে আসুন আমরা আরও ভাল করতে পারি! এছাড়াও আমরা এটি অপসারণ করতে পারি:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

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

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

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

একটি খুব শান্ত এবং খুব নমনীয় প্যাটার্ন তৈরি করতে পাঁচটি ঘোষণার প্রয়োজন। অপ্টিমাইজেশান অংশটি কঠিন হতে পারে, তবে আপনি এটিতে অভ্যস্ত হয়ে যান এবং অনুশীলনের সাথে কিছু কৌশল অর্জন করুন।

কেন ব্যবহার করবেন না grid-template-columns স্পষ্ট কলাম সংজ্ঞায়িত করতে যেহেতু আমরা কলামের সংখ্যা জানি?

আমরা এটা করতে পারি! এখানে এটির জন্য কোড:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

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

স্পষ্ট পদ্ধতিটি আরও সহজ, যখন একটি অন্তর্নিহিত গ্রিডের জন্য আপনাকে — শ্লেষকে ক্ষমা করতে হবে — সেই ফাঁকগুলি পূরণ করতে হবে যেখানে CSS পর্দার পিছনে অতিরিক্ত কাজ করছে৷ শেষ পর্যন্ত, আমি বিশ্বাস করি যে অন্তর্নিহিত গ্রিডগুলির একটি দৃঢ় বোঝাপড়া আপনাকে CSS গ্রিড অ্যালগরিদম আরও ভালভাবে বুঝতে সাহায্য করবে। সর্বোপরি, আমরা এখানে যা স্পষ্ট তা অধ্যয়ন করতে আসিনি — আমরা এখানে বন্য অঞ্চলগুলি অন্বেষণ করতে এসেছি!

এবার একটু দ্রুত আরেকটি প্যাটার্ন চেষ্টা করা যাক:

আমাদের প্যাটার্ন প্রতি ছয় উপাদান পুনরাবৃত্তি. তৃতীয় এবং চতুর্থ উপাদানগুলির প্রতিটিকে দুটি পূর্ণ সারি দখল করতে হবে। যদি আমরা তৃতীয় এবং চতুর্থ উপাদান রাখি, তাহলে মনে হয় আমাদের অন্যদের স্পর্শ করার দরকার নেই, তাই আসুন নিম্নলিখিতগুলি চেষ্টা করি:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

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

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

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

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

কিন্তু এটি কাজ করে না কারণ এটি সব বাধ্য করে 6n + 3 উপাদানগুলিকে একই এলাকায় স্থাপন করতে হবে যা একটি এলোমেলো বিন্যাস তৈরি করে। আসল সমাধান হল তৃতীয় উপাদানের প্রাথমিক সংজ্ঞা রাখা এবং যোগ করা grid-auto-flow: dense শূন্যস্থান পূরণ করতে। MDN থেকে:

[দ্য] "ঘন" প্যাকিং অ্যালগরিদম পূরণ করার চেষ্টা করে আগে গ্রিড মধ্যে গর্ত মধ্যে, যদি ছোট আইটেম পরে আসে. এর ফলে আইটেমগুলি অব্যবস্থাপনা দেখা দিতে পারে, যখন এটি করার ফলে বড় আইটেমগুলির অবশিষ্ট গর্তগুলি পূরণ হবে। যদি এটি বাদ দেওয়া হয়, একটি "স্পার্স" অ্যালগরিদম ব্যবহার করা হয়, যেখানে আইটেম রাখার সময় প্লেসমেন্ট অ্যালগরিদম শুধুমাত্র গ্রিডে "আগামী" সরে যায়, গর্ত পূরণ করতে কখনই পিছিয়ে যায় না। এটি নিশ্চিত করে যে সমস্ত স্বয়ংক্রিয়-স্থাপিত আইটেমগুলি "ক্রমানুসারে" প্রদর্শিত হবে, এমনকি যদি এটি গর্ত ছেড়ে দেয় যা পরবর্তী আইটেমগুলি দ্বারা পূরণ করা যেতে পারে।

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

কেন সবসময় ডিফল্টরূপে এই সম্পত্তি যোগ না?

আমি এটি সুপারিশ করি না কারণ, কিছু ক্ষেত্রে, আমরা সেই আচরণটি চাই না। সেখানে MDN-এর ব্যাখ্যা কীভাবে উল্লেখ করেছে যে এটি বড় আইটেমগুলির দ্বারা অবশিষ্ট গর্তগুলি পূরণ করার জন্য আইটেমগুলিকে "অবস্থার বাইরে" প্রবাহিত করে। ভিজ্যুয়াল অর্ডার সাধারণত সোর্স অর্ডারের মতোই গুরুত্বপূর্ণ, বিশেষ করে যখন এটি অ্যাক্সেসযোগ্য ইন্টারফেসের ক্ষেত্রে আসে, এবং grid-auto-flow: dense কখনও কখনও ভিজ্যুয়াল এবং সোর্স অর্ডারের মধ্যে অমিল হতে পারে।

আমাদের চূড়ান্ত কোড তারপর:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

আরেকটা? চলো যাই!

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

কালো আইটেমগুলি নিহিতভাবে গ্রিডে স্থাপন করা হয়। এটা উল্লেখ করা উচিত যে আমি সেখানে কিভাবে এসেছি তার চেয়ে আমরা একই লেআউট আরও বেশি উপায়ে পেতে পারি। আপনি খুব, তাদের চিন্তা করতে পারেন? ব্যবহার সম্পর্কে কি grid-template-columns? মন্তব্য বিভাগে আপনার কাজ শেয়ার করুন.

আমি আপনাকে একটি শেষ প্যাটার্ন দিয়ে চলে যাচ্ছি:

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

আরো চাই?

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

মোড়ক উম্মচন

CSS গ্রিড প্রায় কয়েক বছর ধরে আছে, কিন্তু এখনও অনেক কম পরিচিত এবং ব্যবহৃত কৌশল রয়েছে যা ব্যাপকভাবে আলোচনা করা হয়নি। এর মধ্যে অন্তর্নিহিত গ্রিড এবং অটো-প্লেসমেন্ট বৈশিষ্ট্য দুটি!

এবং হ্যাঁ, এটি চ্যালেঞ্জিং পেতে পারে! অন্তর্নিহিত গ্রিডের পেছনের যুক্তিটি বুঝতে আমার অনেক সময় লেগেছে এবং আমি এখনও অটো-প্লেসমেন্টের সাথে লড়াই করছি। আপনি যদি স্পষ্ট এবং অন্তর্নিহিত গ্রিডগুলির চারপাশে আপনার মাথা মোড়ানোর জন্য আরও বেশি সময় ব্যয় করতে চান তবে এখানে কয়েকটি অতিরিক্ত ব্যাখ্যা এবং উদাহরণ রয়েছে যা পরীক্ষা করার মতো:

একইভাবে, আপনি সম্পর্কে পড়তে চাইতে পারেন grid-auto-columns CSS-Tricks Almanac-এ কারণ Mojtaba Seyedi অনেক বিস্তারিতভাবে যায় এবং আচরণ ব্যাখ্যা করতে সাহায্য করার জন্য অবিশ্বাস্যভাবে সহায়ক ভিজ্যুয়াল অন্তর্ভুক্ত করে।

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