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

এই টিউটোরিয়ালে আমরা জানবো কিভাবে এই গ্রিডটি কাজ করবে এবং কিভাবে আমরা এর উপর প্রভাব খাটাতে পারবো। 

সেটআপ

আপনার ব্রাউজার যদি এই গ্রিড সাপোর্ট না করে, তাহলে আপনাকে নিচের প্রক্রিয়া অনুসারে তা সাজাতে হবে। এটা পড়ুন:

• 

  সিএসএস গ্রিড লেআউটঃ একটি দ্রুত শুরু করার নির্দেশিকা

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

এটা গ্রিড দিয়ে শুরু হয়েছে

এখানে দ্রুত শুরু করার জন্য একটি ডেমো গ্রিড দেয়া হলো, এটা একটি কন্টেইনার যা আমরা display: grid; হিসেবে ঘোষণা করেছি, এবং এতে আঠারোটি চাইল্ড এলিমেন্ট আছে।  আমরা এখানে বিবৃত করেছি যে এই গ্রিডে পাঁচটি কলাম থাকবে, সবগুলোর দৈর্ঘ্য একই হবে, একই সংখ্যক সারি হবে এবং মোটামুটি 2px এর একটি চিকন গাটার থাকবে। 

1

  grid-template-columns: repeat(5, 1fr);

2

  grid-template-rows: repeat(5, 1fr);

3

  grid-gap: 2px;

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

নোট: বাম থেকে ডান দিকে সাজানোরএই প্রক্রিয়াটি উলটে যাবে যদি আমরা direction: RTL; লেআউট ব্যবহার করি। 

এই কাজে স্পানের ব্যবহার

এটা খুব সুন্দর এবং পরিচ্ছন্ন দেখাচ্ছে, কিন্তু চলুন দেখি যখন আমাদের আইটেমগুলো নিখুঁতভাবে ফিট হবে না তখন কি ঘটবে।  .item-7 এর ক্ষেত্রে আমরা কিছু রুলস যোগ করে  অন্য দুটি কলাম এবং সারিতে স্পান যুক্ত করে তা স্বাভাবিকের চেয়ে কিছুটা বড় করবো:

1

.item-7 {

2

  background: #e03f3f;

3

  grid-column: span 2;

4

  grid-row: span 2;

5

}

এটা এখন কেমন দেখাচ্ছে?

খারাপ না! .item-7 কিছু অতিরিক্ত জায়গা দখল করেছে, তাই .item-8 এবং  .item-9 তার পরের অবস্থান দখল করেছে। .item-10 তারপর দেখেছে যে .item-9 এর পরে পর্যাপ্ত জায়গা আছে কিনা, এবং যখন দেখেছে যে এই সারিতে আর কোনও জায়গা নেই, তখন একেবারে বাম দিক থেকে আবার শুরু করেছে। অন্যান্য আইটেমগুলোও একই প্রক্রিয়া অনুসরন করে ভেতরে টেনে নেয়া হবে। 

কিন্তু একটু থামুন, আমরা যদি .item-9 কে কিছুটা মোটা করি তাহলে কি হবে?

এটা বেশ মজার; .item-9 কলামের শেষে ফিট হবে না, তাই এটা পরের সারিতে গিয়ে পড়বে। যেহেতু এটা .item-7 ছাড়িয়ে যেতে পারবেনা তাই এটা ভিতরেই থাকবে। .item-10, আপনি নিশ্চয়ই কল্পনা করতে পারছেন .item-6 এর নিচে অবস্থান করবে, যেহেতু একটি খালি কলাম খুঁজে পায়নি এটা এক সারি বাদ দিয়ে পরের সারিতে পড়বে এবং পুনরায় বামদিকে ঠেলে দিবে। এটা বেশ গুরুত্বপূর্ণ একটি ধারণা।

গ্রিড-অটো-ফ্লো এর সঙ্গে পরিচিত হউন

আগের ডেমোতে দেখতে পাচ্ছেন .item-18 টি .item-17 এর পর কোনও জায়গা না পেয়ে এক সারি নিচে নেমে গেছে। আমরা কেবল পাঁচটি সারি সংজ্ঞায়িত করেছি, গ্রিডটি ভাবছে আমাদের আরও একটি সারি প্রয়োজন। এটা আসলে grid-auto-flow এর কারনে যা গ্রিড এলিমেন্টের মধ্যেই আছে, এবং এটার ডিফল্ট ভ্যালু হচ্ছে row। আমরা এই ভ্যালুটি পরিবর্তন করে column করতে পারি যা আমাদের গ্রিডের চেহারা সম্পূর্ণ বদলে দিবে:

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

Dense এবার কাজে লাগবে

এবার আমরা grid-auto-flow প্রোপার্টিতে আমাদের আরেকটি কীওয়ার্ড যুক্ত করতে পারি, এবং এটা সম্ভবত আমার সবচেয়ে প্রিয় কীওয়ার্ড: dense। এটার ডিফল্ট পরিপূরক অংশ হচ্ছে sparse (আমার দ্বিতীয় পছন্দ)। চলুন এবার নিচের মত করে করি:

1

grid-auto-flow: row dense;

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

এখন .item-10 যখন .item-9 এর পরে কোনও জায়গা খুঁজে পাবে না তখন অন্যসারিতে যাবার আগে প্রথমেই দেখবে উপরে কি আছে।

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

পরিশিষ্ট

চলুন এবার সারাংশ দেখি:

1. আমরা যদি নির্দিষ্টভাবে কোনও আইটেমের লোকেশন সংজ্ঞায়িত না করি, তাহলে গ্রিড অটো-প্লেসমেন্ট অ্যালগরিদমের মাধ্যমে আইটেমগুলো তার পরের (যথেষ্ট বড়) স্লটে অবস্থান করবে।
2. যদি বর্তমান সারিতে কোনও স্লট না থাকে, তাহলে তা পরের সারিতে গিয়ে পড়বে, এমনকি যদিও কোনও ফাঁকা স্থান বাদ থেকে যায়।
3. আমরা এই খোঁজার প্রক্রিয়াটি পরিবর্তন করতে grid-auto-flow এর row থেকে column এ পরিবর্তন করতে পারি।
4. grid-auto-flow তে সবকিছু নিখুঁত করতে একটি কীওয়ার্ড ব্যবহার করা হয়। ডিফল্ট হিসেবে এর মান হচ্ছে sparse কিন্তু আমরা এটা পরিবর্তন করে dense ব্যবহার করতে পারি যা শূন্যস্থানগুলো পূর্ণ করতে সক্ষম হবে। 
   

দরকারী রিসোর্সসমূহ

• MDN এ grid-auto-flow
• The grid-auto-flow property specification