() translation by (you can also view the original English article)
আগের টিউটোরিয়ালে আমরা শিখেছি কিভাবে গ্রিড সেটআপ করতে হয়, এবং (grid-template-columns এবং grid-template-areas এর মত) সুস্পষ্ট প্রোপার্টিসমূহ সংজ্ঞায়িত করতে হয় এবং এমনকি (grid-auto-columns এর মত) অন্তর্নিহিত প্রোপার্টিসমূহও দেখানো হয়েছে। এই টিউটোরিয়ালে আমরা শর্টহ্যাণ্ড প্রোপার্টি grid সম্পর্কে জানবো যা দিয়ে উপরে বর্ণিত সবকিছু একক বিবৃতিতে দেখানো সম্ভব হবে।
দুটি সহজ লাইনের ভিতর আপনার গ্রিড
স্বাভাবিকভাবে, আপনার কন্টেইনারে display: grid; ঘোষণা করার মাধ্যমে শুরু করুন। তারপর, grid প্রোপার্টি ব্যবহার করে আপনার সারি ও কলামগুলো সাজান:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid: 100px auto 300px / repeat(2, 1fr) 100px; |
4 |
}
|
উপরের বিবৃতিতে বলা হয়েছে, আমরা 100px, auto এবং 300px মাপের তিনটি সুস্পষ্ট সারি চাই। এবং (repeat() ফাংশন ব্যবহার করে) 1fr মাপের দুটি, ও 100px মাপের আরেকটি কলাম চাই। এটা আগের এই বড় ভার্সনের কোডটির মতই কাজ করবে:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid-template-rows: 100px auto 300px; |
4 |
grid-template-columns: repeat(2, 1fr) 100px; |
5 |
}
|
উভয় বিবৃতি আমাদেরকে এই ফলাফল দিবে:
অন্তর্নিহিত মান যুক্ত করা
অন্তর্নিহিত মানগুলো হচ্ছে সুস্পষ্টভাবে সংজ্ঞায়িত মানের বাইরে আমরা যেগুলো ব্যবহার করে থাকি। grid শর্টহ্যান্ডে আমরা এই দুটি মানকে একত্রে মেশাতে পারিনা তাই আমাদেরকে যেকোনো একটি বেছে নিতে হবে। উদাহরণস্বরূপ, নিচের কোডটি দেখুন:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid: auto-flow 100px / 1fr 100px; |
4 |
}
|
এই ক্ষেত্রে আমরা স্পষ্ট কলামসমূহে আটকে আছি (একটি হচ্ছে 1fr, অপরটি 100px) কিন্তু আমাদের সারিতে grid-auto-flow এবং grid-auto-rows এর সংক্ষিপ্ত রূপ ব্যবহার করা হয়েছে। এটাতে বলা হয়েছে, "যখন আপনি গ্রিডে আরো ট্র্যাক যুক্ত করতে চাইবেন, তখন এগুলোকে সারি হিসাবে যোগ করুন। এবং প্রত্যেকটিকে 100px উচ্চতা বিশিষ্ট করুন।" এটা দেখতে নিচের মতই হবে:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid-template-columns: 1fr 100px; |
4 |
grid-auto-flow: row; |
5 |
grid-auto-rows: 100px; |
6 |
}
|
এটা একটি ডিফল্ট বিহেভিয়ার, কিন্তু আমরা যদি এর পরিবর্তে আমাদের অন্তর্নিহিত গ্রিডকে অতিরিক্ত কলামসমূহ যুক্ত করতে বলি, তাহলে বড় ধরনের পরিবর্তন দেখতে পাবো:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid: 100px 300px / auto-flow 100px; |
4 |
}
|
এটা আমাদেরকে 100px এবং 300px মাপের দুটি সারি দিবে যাতে কার্যকরভাবে grid-auto-flow: column; সেট করা হবে। এটা নিচের মতই ফলাফল দিবে:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid-template-rows: 100px 300px; |
4 |
grid-auto-flow: column; |
5 |
grid-auto-columns: 100px; |
6 |
}
|
এখন, অটো-প্লেসমেন্ট অ্যালগরিদম আইটেমগুলিকে উপর থেকে নীচের দিকে সাজাবে, এবং অবশিষ্ট স্থান শেষ হয়ে গেলে ডানদিকে কলাম যোগ করবে:
নোট: আমরা সারি এবং কলামের ক্ষেত্রে auto-flow ঘোষণা করতে পারবো না, কারণ এতে কাজ হবে না।
প্যাকিং কীওয়ার্ড
আপনি যদি আমাদের আগের টিউটোরিয়াল "সিএসএস গ্রিড অটো-প্লেসমেণ্ট অ্যালগরিদম" নিয়ে চিন্তা করেন, তাহলে মনে করতে পারবেন যে আমরা sparse এবং dense নিয়ে আলোচনা করেছি; যেসব কীওয়ার্ড দিয়ে একটি গ্রিডে আইটেমগুলো সাজানো হয়েছে। এ দুটো auto-flow এর পাশাপাশি নিচের মত করে ব্যবহার করা যাবে:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid: 100px 300px / auto-flow dense 100px; |
4 |
}
|
গ্রিড টেম্পলেট এরিয়াসমূহ
টেমপ্লেট এরিয়াসমুহ হচ্ছে আমাদের গ্রিডের এরিয়াগুলো নামকরণ করার একটি উপায়, যা দিয়ে দৃশ্যতঃ সুন্দরভাবে তুলে ধরা সম্ভব। আরও সহজ ফর্মে, আমরা grid ব্যবহার করে কেবল আমাদের টেম্পলেট এরিয়া বর্ণনা করতে পারি, অন্য কিছু নয়:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid: "header header header" |
4 |
"main main sidebar"
|
5 |
"footer footer footer"; |
6 |
}
|
তারপর আমরা বলবো যে প্রতিটি গ্রিড আইটেম কোন শূন্যস্থান পূর্ণ করবে, যেমন:
1 |
.item-1 { |
2 |
grid-area: header; |
3 |
}
|
আপনি যদি আমাদের মূল গ্রিড টেম্পলেট এরিয়া টিউটোরিয়ালটি মনে করেন, তাহলে দেখবেন আমরা কলাম এবং সারির মাত্রার উপর আরও কিছু বিবরণ দিয়েছি:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid-template-columns: repeat(3, 1fr); |
4 |
grid-template-rows: 80px 180px 80px; |
5 |
grid-template-areas: "header header header" |
6 |
"main main sidebar"
|
7 |
"footer footer footer"; |
8 |
}
|
আমরা এটা এভাবেও করতে পারি:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
grid: "header header header" 80px |
4 |
"main main sidebar" 180px |
5 |
"footer footer footer" 80px |
6 |
/ 1fr 1fr 1fr; |
7 |
}
|
আমরা ফরোয়ার্ড স্ল্যাশের পরে কলামের প্রস্থ যোগ করবো (repeat() ফাংশন এক্ষেত্রে কাজ করবে না, কিন্তু আমি জানি না কেন)। এবং আমরা এরিয়া ঘোষণা করার পর ইনলাইনে সারির উচ্চতা যুক্ত করবো। পরিশেষে আমরা যা পাবো:
উপসংহার
এই টিউটরিয়ালে আপনি নিশ্চয়ই বুঝতে পেরেছেন যে, কিভাবে grid শর্টহ্যান্ড প্রোপার্টি কাজ করে। এটা বিভিন্নভাবে ট্রাই করে দেখুন, সিএসএস গ্রিড মডিউলের সাথে কিভাবে এটা ব্যবহার করতে হয়, এবং আমাদেরকে জানান এটা দিয়ে আপনি কিভাবে আপনার সময় সাশ্রয় করেছেন।
প্রাসঙ্গিক টিউটোরিয়াল এবং লিংকসমূহ
- MDN এ গ্রিড শর্টহ্যান্ড সিনট্যাক্স
- W3C তে গ্রিড শর্টহ্যান্ড স্পেস
