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

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

আপনার ব্রাউজার

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

সম্ভবত সবচেয়ে সহজ পদ্ধতি হল ক্রোম ব্রাউজারে একটি পরীক্ষামূলক ওয়েব প্ল্যাটফর্মের বৈশিষ্ট্য চালু করা: chrome://flags/#enable-experimental-web-platformfeatures

একটি গ্রিড সেটআপ করা

গ্রিড দিয়ে আমরা কিছু গাইড দ্বারা তৈরি করা অঞ্চল অনুযায়ী আমাদের পেইজের উপাদানগুলোকে সাজাতে পারি।

পরিভাষা

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

নিচের ছবিতে আপনি একটি ডেমো গ্রিড দেখতে পাচ্ছেন, যেখানে দেখাচ্ছে:

1. গ্রিড লাইন
2. কলাম
3. সারি
4. সেল

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

1. গাটার বা ফাঁকা অংশ

আরেকটি বিষয় যা আরো অগ্রসর হবার আগে আমাদেরকে স্পষ্ট করতে হবে:

1. গ্রিড এরিয়া

একটি গ্রিড এরিয়া হচ্ছে চারটি গ্রিড লাইন বেষ্টিত গ্রিডের একটি অংশ; এটা যেকোনোও সংখ্যক গ্রিড সেল নিয়ে গঠিত হতে পারে।

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

গ্রিড মার্কআপ

উপরের গ্রিডটি পুনরায় তৈরি করতে, আমাদের একটি কন্টেইনার এলিমেন্ট বা উপাদান প্রয়োজন; এটা আপনার পছন্দমত যেকোনোও কিছু হতে পারে:

1

<section class="grid-1">

2

3

</section>

এর মধ্যে আমরা নয়টি চাইল্ড এলিমেন্ট স্থাপন করবো।

1

<section class="grid-1">

2

  <div class="item-1">1</div>

3

  <div class="item-2">2</div>

4

  <div class="item-3">3</div>

5

  <div class="item-4">4</div>

6

  <div class="item-5">5</div>

7

  <div class="item-6">6</div>

8

  <div class="item-7">7</div>

9

  <div class="item-8">8</div>

10

  <div class="item-9">9</div>

11

</section>

অনুসরণ করতে চাইলে এই স্টার্টার পেনটি আলাদা করুন। আমি প্রতিটি গ্রিড আইটেম আলাদা করতে কিছু মৌলিক স্টাইল যুক্ত করেছি।

গ্রিড রুলস

প্রথমত, আমাদের ঘোষণা করতে হবে যে আমাদের কন্টেইনার এলিমেন্টটি হচ্ছে একটি গ্রিড যাতে display প্রোপার্টির জন্য নতুন মান ব্যবহার করে করতে হবে:

1

.grid-1 {

2

  display: grid;

3

}

হ্যাঁ, এটা খুব সহজ। পরবর্তীতে আমরা আমাদের গ্রিড নির্ধারণ করবো, যেমন, আনুভূমিক ও উলম্বভাবে মোট কয়টি গ্রিড ট্র্যাক এটাতে থাকবে। আমরা এটা grid-template-columns এবং grid-template-rows প্রোপার্টি দ্বারা সম্পন্ন করতে পারিঃ

1

.grid-1 {

2

  display: grid;

3

  grid-template-columns: 150px 20px 150px 20px 150px;

4

  grid-template-rows: auto 20px auto 20px auto;

5

}

লক্ষ্য করুন, এখানে প্রতিটির জন্য পাঁচটি করে মান দেয়া আছে। grid-template-columns এর মান হিসেবে এখানে বিবৃত করা হয়েছে যে, প্রথম কলামটি 150px প্রশস্ত হবে, দ্বিতীয়টি  20px প্রশস্ত, এবং তৃতীয়টি 150px প্রশস্ত হবে, এবং পরবর্তী পাঁচ কলামে একই রকম মান থাকবে, এটা আমাদের ফিনিশ পতাকার চিত্র অনুযায়ী কিছু কম বেশী হতে পারে। grid-template-rows এর জন্য পাঁচটি মান কিছুটা সদৃশ। প্রতিটি কনটেন্টের উচ্চতা ডিফল্ট হিসেবে auto হবে, কিন্তু আমরা আমাদের মাঝের খালি জায়গা আরও সুনির্দিষ্ট করতে চাই, তাই এগুলোকে 20px উচ্চতা দিতে চাই, যাতে আমরা পাঁচটি সারিই তালিকাবদ্ধ করতে পারি।

তাহলে আমরা এখন কি পেলাম?

আমাদের প্রতিটি আইটেমকে স্বয়ংক্রিয়ভাবে একটি নির্দিষ্ট ক্রমানুসারে গ্রিড এরিয়া বরাদ্দ করা হয়েছে। এটা খারাপ না, কিন্তু আইটেম ২, ৪, এবং ৭ এর ক্ষেত্রে কি ঘটেছে? এগুলো উলম্ব ফাঁকা জায়গার মাঝে পড়েছে, কারণ আমাদের গাটার বা ফাঁকা জায়গাগুলো সম্পূর্ণ বৈধ গ্রিড ট্র্যাক, ফলে গ্রিড লেআউটটি অনুমান করেছে যে এটা আমাদের গ্রিডের অংশ, যদি না আমরা আরও নির্দিষ্ট ভাবে ঠিক না করি। এখন আমাদের আইটেমগুলোতে কিছু রুলস বা নিয়ম যুক্ত করার সময় এসেছে।

আইটেম রুলস

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

1

.item-1 {

2

  grid-column: 1;

3

  grid-row: 1;

4

}

আমাদের আইটেমটি স্বয়ংক্রিয়ভাবে গ্রিড লাইনের ভিতরে থাকা সর্বনিন্ম জায়গাটি পূর্ণ করবে। আমাদের দ্বিতীয় আইটেমটি একটু কম স্পষ্ট। আমরা এটি grid-row 1 -এর ক্ষেত্রে করতে চাই, কিন্তু আমরা এটি grid-column 2 এর ক্ষেত্রে এটা বাদ দিতে চাই এবং তার পরিবর্তে grid-column 3 এ একই কাজ করবো। কলাম 2 আমাদের ফাঁকা স্থানের জন্য খালি রাখবো।

1

.item-2 {

2

  grid-column: 3;

3

  grid-row: 1;

4

}

আমরা এভাবেই আমাদের গাটার কলাম এবং সারি বাদ দিয়ে করে যাবো, যতক্ষন না নবম আইটেম পর্যন্ত পৌঁছাই:

1

.item-9 {

2

  grid-column: 5;

3

  grid-row: 5;

4

}

সবশেষে আমরা একটি সুন্দর এবং পরিচ্ছন্ন গ্রিড পাবো:

উপসংহার

এটুকুই, এখন আপনি খুব সহজেই গ্রিড ব্যবহার ও চালু করতে পারবেন! আসুন, এই চারটি অপরিহার্য ধাপ আবার পরখ করে দেখি:

1. একটি কন্টেইনার এলিমেন্ট তৈরি করুন, এবং তা display: grid; হিসেবে ঘোষণা দিন।
2. একই কন্টেইনার ব্যবহার করে grid-template-columns এবং grid-template-rows প্রোপার্টি ব্যবহার করে গ্রিড ট্র্যাক সংজ্ঞায়িত করুন।
3. কনটেইনারের ভিতর চাইল্ড এলিমেন্টগুলো স্থাপন করুন।
4. grid-column এবং grid-row সংজ্ঞায়িত করার মাধ্যমে প্রতিটি চাইল্ড গ্রিডের কোথায় থাকবে তা নির্দিষ্ট করুন।

এই সিরিজের পরের ধাপে আমরা গ্রিড সিনট্যাক্স আরও গভীরভাবে পরখ করে দেখবো, গাটার সংজ্ঞায়িত করার পদ্ধতি উন্নত করবো, ফ্লেক্সিবল লেআউট,  fr ইউনিট, repeat() ফাংশন ব্যাখ্যা করবো, এবং আমাদের সাধারণ গ্রিডকে বিশেষ গ্রিডে রুপান্তর করবো। সেখানে আবার দেখা হবে!

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

• @rachelandrew কে ফলো করুন, তাহলে আপনি অনেক কিছু বুঝতে পারবেন।