() translation by (you can also view the original English article)
একটা বিষয় যা আমরা এখানে উল্লেখ করেছি, কিন্তু এখনোও এখানে সম্পূর্ণ সঠিকভাবে তুলে ধরিনি, তা হচ্ছে গ্রিড এরিয়াসমূহ। এই পর্যন্ত আমাদের গ্রিড আইটেমগুলো একক গ্রিড সেলের ভিতর ছিলো, কিন্তু আমরা এই সীমানা ভেঙ্গে আরও উপযোগী লেআউট অর্জন করতে পারি। চলুন দেখা যাক!
গ্রিড এরিয়াসমূহ সংজ্ঞায়িত করা
এখানে আমরা নিচের গ্রিডটি নিয়ে কাজ করছি: এই গ্রিডে মোট নয়টি গ্রিড আইটেম আছে যা তিনটি সমান্তরাল কলাম ও সারিতে 20px গাটারসহ বিভক্ত হয়ে গেছে।
বর্তমানে
আমাদের আইটেমগুলোতে কেবল রঙ এর জন্য কিছু স্টাইল আছে, কিন্তু আমরা প্রথম টিউটোরিয়ালে ফিরে
যাবো এবং সেখান থেকে কিছু grid-column এবং grid-row রুলসের প্রয়োগ করবো, এখানে এমন কিছু রুলস দেয়া হলো:
1 |
.item-1 { |
2 |
background: #b03532; |
3 |
grid-column: 1 / 3; |
4 |
grid-row: 1; |
5 |
}
|
এই শর্টহ্যান্ড
grid-column স্টেটমেন্টে আমরা বেশ কার্যকরভাবে
grid-column-start এবং grid-column-end ব্যবহার
করেছি, যার ফলে আইটেমগুলো গ্রিড লাইন ১ এ শুরু হবে এবং গ্রিড লাইন ৩ এ শেষ হবে।
এখানে আমরা এবার যা পেলাম; প্রথম আইটেম দুইটি সেলে ছড়িয়ে গেছে, যার ফলে অটো প্লেসমেন্ট অ্যালগরিদমের কারনে অন্যান্য আইটেমগুলো ডানদিকে এবং নিচের দিকে সরে গেছে।
সারির ক্ষেত্রেও একই প্রক্রিয়াটি করা যেতে পারে, যার ফলে আমরা গ্রিডের উপরের বামদিকে বেশ বড় একটি এরিয়া পাবো।
1 |
.item-1 { |
2 |
background: #b03532; |
3 |
grid-column: 1 / 3; |
4 |
grid-row: 1 / 3; |
5 |
}
|
সেলসমূহ স্প্যান করা
আরও
সহজ সিনট্যাক্স ব্যবহার করে আমরা grid-column-end কে span কীওয়ার্ডে রুপান্তর
করতে পারি। span দিয়ে আমাদেরকে নির্দিষ্ট করে বলতে হবে না যে এই এরিয়াটি কোথায় শেষ হবে, এর পরিবর্তে এই আইটেমটি কয়টি ট্র্যাক অতিক্রম করবে তা সংজ্ঞায়িত করতে হবে:
1 |
.item-1 { |
2 |
background: #b03532; |
3 |
grid-column: 1 / span 2; |
4 |
grid-row: 1 / span 2; |
5 |
}
|
পরিশেষে আমরা একই রকম ফলাফল পাবো, কিন্তু এক্ষেত্রে আমরা যদি এর শুরুটা কোথা থেকে হবে তা পরিবর্তন করে দেই, তাহলে শেষটাও বাধ্যতামূলকভাবে পরিবর্তন করতে হবে না।
নিচের ডেমোতে আপনি দেখতে পাচ্ছেন আমরা চারটি আইটেম মুছে ফেলার মাধ্যমে এই লেআউটটি কিছুটা খালি করেছি। আমরা আমাদের দুটি আইটেমের পজিশন ঠিক করেছি: প্রথমটি দুটি কলাম ও দুটি সারি জুড়ে আছে এবং চার নং আইটেমটি কলাম ৩ এ ২ নং সারিতে শুরু হয়েছে এবং নিচের দিকটি জুড়ে রয়েছে:
অবশিষ্ট আইটেম স্বয়ংক্রিয়ভাবে বাকি জায়গাগুলো পূরণ করবে। এখানে এটা একটি বিষয় দারুনভাবে তুলে ধরা হয়েছে, তা হচ্ছে গ্রিড এলিমেন্টে সবসময় সোর্স অর্ডারের প্রতিফলন হয় না।
নোট: এমন অনেক পরিস্থিতি আছে যেখানে সোর্স অর্ডারকে অবশ্যই কোনও উপস্থাপনায় তুলে ধরতে হয়-তবে আক্সেসিবিলিটি/প্রবেশযোগ্যতার কথা কখনই ভুলবেন না।
নামযুক্ত এরিয়াসমূহ
আমাদের বর্ণিত সংখ্যায়ন পদ্ধতিটি এ পর্যন্ত বেশ ভালোভাবেই কাজ করছে, কিন্তু গ্রিড টেম্পলেট এরিয়া লেআউট সংজ্ঞায়িত করাকে আরও সহজ করে তুলেছে।
বিশেষ করে, আমরা এই এরিয়াগুলোকে গ্রিডের ভিতর নামকরণ করতে পারি। এই নামগুলোর মাধ্যমে, আমরা আমাদের আইটেমগুলির অবস্থান নির্ধারণ করতে (লাইন সংখ্যার পরিবর্তে) উল্লেখ করতে পারি। আমরা এখন এই মুহূর্তে আমাদের বর্তমান ডেমোটিতেই থাকবো এবং এটা দিয়ে আমাদের খসড়া পেইজ লেআউটটি তৈরি করবো:
- হেডার
- মেইন কন্টেন্ট
- সাইডবার
- ফুটার
আমরা আমাদের গ্রিড কন্টেইনারের ভিতরেই এই এরিয়াগুলো সংজ্ঞায়িত করেছি, এবং আমরা এখন এগুলো বাস্তবায়ন করতে যাচ্ছি:
1 |
.grid-1 { |
2 |
/* ..existing styles */
|
3 |
|
4 |
grid-template-areas: "header header header" |
5 |
"main main sidebar"
|
6 |
"footer footer footer"; |
7 |
}
|
আইটেমগুলোর অবস্থান ঠিক করা
এখন আমরা আইটেমের প্রতি আমাদের মনোযোগ দিবো, এবং grid-column এবং grid-row রুল দুটি grid-area এর অনুকূলে সাজাবো:
1 |
.item-1 { |
2 |
background: #b03532; |
3 |
grid-area: header; |
4 |
}
|
5 |
.item-2 { |
6 |
background: #33a8a5; |
7 |
grid-area: main; |
8 |
}
|
9 |
.item-3 { |
10 |
background: #30997a; |
11 |
grid-area: sidebar; |
12 |
}
|
13 |
.item-4 { |
14 |
background: #6a478f; |
15 |
grid-area: footer; |
16 |
}
|
আমাদের প্রথম আইটেমটি হেডারে
পরিণত হবে, যা সম্পূর্ণ তিনটি কলামের জায়গা জুড়ে থাকবে। আমাদের
দ্বিতীয় আইটেমটি মূল কনটেন্ট এরিয়া হিসেবে থাকবে, তৃতীয়টি হবে সাইডবার এবং
চতুর্থটি ফুটার। এগুলোর একটিও সোর্স অর্ডার অনুসরণ করবে না ফলে item-4 সহজেই হেডার এরিয়ার পরে অবস্থান নিতে পারবে।
আপনি দেখতেই পাচ্ছেন এর ফলে একটি পেইজের বিন্যাস তৈরি করা খুব সহজ হয়ে গেছে। যাই হোক, যদিও আমরা এখন আমাদের গ্রিড দৃশ্যমান করার মেজাজে আছি, তাহলে আরো অগ্রসর হয়ে ইমোজিসমূহ ব্যবহার করতে দোষ কি?!
গ্রিড এরিয়া নির্মাণ করা
আমাদের ওয়েব পেইজে সব ধরণের নেস্টেড কম্পোনেন্টসমূহ থাকবে, তাই এবার দেখা যাক এটা গ্রিড এরিয়ার সঙ্গে কিভাবে কাজ করে।
যখন
আমরা কোনও গ্রিড কন্টেইনারকে display: grid; দিয়ে ঘোষণা করি, তখন কেবল এর অধঃস্তন এলিমেন্টগুলোই গ্রিড আইটেম হয়। কিন্তু
এই চাইল্ড এলিমেন্টগুলোর নিচে যেসব কন্টেন্ট যুক্ত করা হবে সেগুলো গ্রিডের
প্রভাবমুক্ত থাকবে যে পর্যন্ত না আমরা সেগুলো নির্দিষ্টভাবে বলে না দেই।
আমাদের
উদাহরনে, আমরা এই মার্কআপের শেষে .item-5 , .item-6, এবং .item-7 পুনরায় যোগ করতে
যাচ্ছি, যা .item-2 এর অধীনে থাকবে।
1 |
<section class="grid-1"> |
2 |
<div class="item-1">1</div> |
3 |
|
4 |
<div class="item-2"> |
5 |
<div class="item-5">5</div> |
6 |
<div class="item-6">6</div> |
7 |
<div class="item-7">7</div> |
8 |
</div>
|
9 |
|
10 |
<div class="item-3">3</div> |
11 |
<div class="item-4">4</div> |
12 |
</section>
|
তাই
এখন পুনরায় আমাদের .item-2 কে গ্রিড কন্টেইনার হিসেবে ঘোষণা করতে হবে, যাতে এই গ্রিডে
দুটি কলাম এবং দুটি সারি থাকে।
1 |
display: grid; |
2 |
|
3 |
grid-template-columns: 1fr 30%; |
4 |
grid-template-rows: auto auto; |
5 |
grid-gap: 20px; |
6 |
|
7 |
grid-template-areas: "header header" |
8 |
"article sidebar"; |
এখানেও আমরা header”, “article”, এবং “sidebar”
পুনরায় ব্যবহার করতে পারি; এতে কোনও সন্দেহ নেই, কারন সব কিছুই আগের
প্রসঙ্গানুসারে থাকবে। এই গ্রিড এরিয়া কেবল .item-2 এর ভিতর গ্রিড ব্যবহার করবে।
পরিশিষ্ট
আমরা এ পর্যন্ত যা কিছু বলেছি তার সারসংক্ষেপ:
-
grid-columnদিয়ে আমরা শর্টহ্যাণ্ড পদ্ধতিতে গ্রিডের একটি আইটেম কোথায় শুরু হবে ও শেষ হবে তা সংজ্ঞায়িত করতে পারি।
- আমরা
spanকীওয়ার্ড ব্যবহার করে আমাদের রুলসগুলোকে আরও নমনীয় ও পরিবর্তনশীল করে তুলতে পারি। -
grid-template-areasদিয়ে আমরা গ্রিড এরিয়াগুলোকে নামকরণ করতে পারি (এমনকি ইমোজি ব্যবহার করেও, যদি এই ধরণের মেজাজ থাকে)।
- এছাড়াও আমরা প্রয়োজনে গ্রিড
আইটেমগুলোকে
display: grid;ব্যবহার করে নেস্টেড করতে পারি, এবং একই প্রক্রিয়া অনুসরণ করতে পারি।
আবারও আমরা CSS গ্রিড লেআউট সম্পর্কিত বেশ কিছু দরকারী পদ্ধতি সম্পর্কে জানলাম, এবং আমরা বিভিন্ন ক্ষেত্রে বাস্তব দুনিয়ায় কিভাবে উপস্থাপন করতে হবে সে সম্পর্কে আরো গভীরভাবে শিখতে পারলাম! আমাদের পরবর্তী টিউটোরিয়ালে আমরা আরো কিছু জটিল লেআউট সম্পর্কে জানবো এবং দেখবো রেস্পন্সিভ ডিজাইন অনুসারে এগুলোকে হিসাব নিকাশ করে সাজাতে হয়।
দরকারী রিসোর্সসমূহ
- আমি কি এটা এরই মধ্যে উল্লেখ করেছি? @rachelandrew কে ফলো করুন।
