() translation by (you can also view the original English article)
যেকোনো CSS গ্রিডে প্রত্যেক লাইনের জন্য একটি ইন্ডেক্স নাম্বার থাকে যা আমরা একটি গ্রিড আইটেম স্থাপন করার সময় রেফারেন্স হিসেবে ব্যবহার করতে পারি। যদিও, আমরা এই গ্রিড লাইনগুলোর প্রত্যেকটির নাম দিতে পারি, যাতে এগুলো দিয়ে কাজ করা এবং গ্রিড লেআউট মেইন্টেইন করা সহজ হয়। চলুন দেখা যাক!
গ্রিড আসছে
কোনও গ্রিড টিউটোরিয়ালের সবচেয়ে সাধারণ প্রতিক্রিয়া হল "কিন্তু, কখন আমি এটি ব্যবহার করতে পারি?" এবং এটি একটি ন্যায্য প্রশ্ন। আসলে, গ্রিড আসছে, এবং এটা শীঘ্রই সব জায়গায় দেখা যাবে।
"সিএসএস গ্রিড ক্রোম এবং ফায়ারফক্সে ২০১৭ সালের মার্চ থেকে সম্পূর্ণ সাপোর্ট পাবে।" – এরিক মেয়ার
যদি আপনি এটির দিকে নজর না রাখেন, তবে এখনই সময়!
সিএসএসসিএসএস গ্রিড লেআউট: একটি দ্রুত শুরু করার নির্দেশিকা
সিএসএসসিএসএস গ্রিড লেআউট: ফ্লুইড কলাম এবং বেটার গাটারস
গ্রিড লাইন নম্বরসমূহ
যখন আমরা কোনও গ্রিড ঘোষণা করি, প্রত্যেক লাইনে একটি ইন্ডেক্স নাম্বার থাকে:
বিদ্রঃ যতক্ষন না লেআউটটির direction: rtl; বসানো না হয়, এই নম্বরগুলো গ্রিডের উপরের বামদিক থেকে শুরু হয়, এবং নিচের ডানদিকে এসে শেষ হয়।
আমরা গ্রিড আইটেম বসানোর ক্ষেত্রে এই নাম্বারগুলোর রেফারেন্স দিতে পারি:
1 |
.item { |
2 |
grid-column: 2; |
3 |
grid-row: 3; |
4 |
}
|
এই উদাহরণে আমাদের
.item কলাম লাইন 2 এবং সারির লাইন 3 থেকে শুরু হয়েছে:
স্পষ্টভাবে গ্রিড লাইনের নামকরণ
জটিল গ্রিডের ক্ষেত্রে নম্বর দিয়ে সবকিছুর রেফারেন্স দেয়া বেশ বিভ্রান্তিমূলক। এই কারনে, গ্রিড মডিউলে যখন আমরা আমাদের গ্রিড কলাম এবং সারির ঘোষণা দেই তখনই গ্রিডলাইন স্পষ্টভাবে নামকরণ করার সুবিধা আছে।
এই সিরিজের অন্যান্য উদাহরনের মতই আরও একটি উদাহরন দিচ্ছি। এখানে আমাদের বেসিক 3×3 গ্রিড ডিক্লেরেশন দেয়া হলো:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid-template-columns: 100px auto 100px; |
4 |
grid-template-rows: 60px 130px 50px; |
5 |
grid-gap: 20px; |
6 |
}
|
এখন আমরা আমাদের কলাম এবং সারির মান লাইন নামের (এটা যেকোন নামই হতে পারে) সাথে স্কয়ার ব্রাকেট দিয়ে ব্যবহার করতে পারি:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish]; |
4 |
grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end]; |
5 |
grid-gap: 20px; |
6 |
}
|
আমরা এবার বিভিন্ন আইটেম অবস্থান নম্বরের পরিবর্তে নাম দিয়ে ঠিক করতে পারিঃ
1 |
.item { |
2 |
grid-column: centre-start; |
3 |
grid-row: header-start; |
4 |
}
|
কিছু বিষয়ঃ
- আপনার পছন্দমত এই নামগুলো বর্ণনা করতে পারেন, তাই কিভাবে আপনি নামগুলো সাজালে গ্রিড এরিয়া শনাক্ত ও মনে রাখতে পারবেন সে সম্পর্কে ভালোভাবে চিন্তা করে নিন।
- মূল লাইননম্বরগুলো এখনও কাজ করবে, তাই আপনি চাইলে এখনো তা ব্যবহার করতে পারেন।
- আপনি একটি লাইনের জন্য কয়েকটি নাম
ঘোষণা করতে পারেন, যেমনঃ
[main-end footer-start row-5]ইত্যাদি। - এমনকি আপনি আপনার গ্রিড লাইনের নাম দেয়ার পরও এগুলো ব্যবহার করতে বাধ্য নন, তাই এটা ‘শুধুমাত্র দরকার হলেই’ ব্যবহার করুন।
গ্রিডলাইনের অন্তর্নিহিত নামকরণ
যখন আমরা ইচ্ছাকৃত ভাবে কোনোকিছু করি, যেমন গ্রিড লাইনের নামকরণ, এটাকে বলা হয় সুস্পষ্ট নামকরণ। কিন্তু, যখন কোনও কিছু প্রযোজ্য হয় কিন্তু সরাসরি বিবৃত হয় না, তখন এটাকে বলা যায় অন্তর্নিহিত বা অস্পষ্ট। এখানে আমরা গ্রিড লাইন স্পষ্টরূপে নামকরণ নিয়ে আলোচনা করেছি, কিন্তু এমন অনেক পরিস্থিতি আছে যেখানে অস্পষ্টভাবে লাইনের নামকরণ হয়ে যায়।
আগের টিউটোরিয়াল থেকে আপনার হয়তোবা মনে আছে যে, গ্রিড এরিয়া সংজ্ঞায়িত করা সম্ভব।
আমরা নিচের মত করে চারটি গ্রিড এরিয়া সংজ্ঞায়িত করতে পারিঃ
1 |
.grid-1 { |
2 |
/* ..existing styles */
|
3 |
|
4 |
grid-template-areas: "header header header" |
5 |
"main main sidebar"
|
6 |
"footer footer footer"; |
7 |
}
|
এতে আমরা নিচের মত ফলাফল পাবোঃ
গ্রিড এরিয়া header নামে নামকরণ করলে এর চারপাশের
বাউণ্ডারী লাইনও একই নামে স্বয়ংক্রিয় ভাবে নামকরণ করা হয়ে যায়। এর চারপাশের
সারির লাইনগুলো header-start এবং header-end, এবং একইভাবে
দুইটি কলাম লাইনও header-start এবং header-end হয়ে যায়। একই কথা
অন্যান্য এরিয়ার ক্ষেত্রেও প্রযোজ্য, যাতে লাইনের নাম দেয়া হয়েছে main-start, main-end, sidebar-start এবং এরকমই অন্যান্য নামসমুহ।
নোটঃ অন্যভাবে দেখলে, একই ফরম্যাটে
সুস্পষ্টভাবে লাইনের নাম যুক্ত করলে (header-start এবং header-end) লাইনগুলো মিলে header নামে একটি গ্রিড এরিয়া তৈরি করবে।
আগের মতই কোনও আইটেমের পজিশন ঠিক করতে আমরা এই লাইনের নামগুলো ব্যবহার করতে পারি। এবং আবার বলছি, এগুলো আপনার সংজ্ঞায়িত করা নাম এবং ইন্ডেক্স লাইন নম্বরের পাশাপাশি ব্যবহার করা যাবে।
লাইনের পরিসমাপ্তি
কুইক টিপসটি এ পর্যন্তই! মনে রাখবেনঃ আপনার গ্রিড সহজে ব্যবস্থাপনা ও রক্ষনাবেক্ষনের জন্য আপনার লাইন এবং এরিয়ার নাম দেয়ার অভ্যাস করা ভালো।
