() translation by (you can also view the original English article)
এই সিরিজ জুড়ে আমরা গ্রিড সিনট্যাক্সের সাথে পরিচিত হয়ে উঠেছি, একটি পৃষ্ঠার উপাদানগুলি স্থাপন করার কিছু কার্যকর উপায় সম্পর্কে শিখেছি, এবং কিছু পুরোনো অভ্যাস কে বিদায় জানিয়েছি। এই টিউটোরিয়ালে আমরা কিছু প্র্যাকটিক্যাল রেস্পন্সিভ ওয়েব ডিজাইনের উপর এই পদ্ধতিগুলো প্রয়োগ করতে যাচ্ছি।
মিডিয়া কোয়েরি সমূহ
চলুন এবার আমরা শেষের টিউটোরিয়ালে যেই ডেমোটি তৈরি করেছিলাম তা দিয়ে শুরু করি।
এটি মূলত দুটি গ্রিড দিয়ে গঠিত; একটি হচ্ছে আমাদের মূল গ্রিড অপরটি হচ্ছে আমাদের একটি আইটেমের মধ্যে নেস্টেড করা আরেকটি গ্রিড। আমরা মিডিয়া কুয়েরীর মাধ্যমে এই গ্রিডগুলোর ইফেক্ট বা প্রভাব নিয়ন্ত্রন করতে পারি, মানে হচ্ছে আমরা আমাদের সম্পূর্ণ গ্রিডটিকে একটি আলাদা ভিউপোর্ট অনুযায়ী পুনরায় সংজ্ঞায়িত করতে পারি।
আমরা প্রথম গ্রিড ডিক্লারেশন টি ডুপ্লিকেট করে তা একটি মোবাইল ফাস্ট মিডিয়া কোয়েরির মধ্যে রেখে শুরু করব (আমি এখানে ৫০০ পিক্সেল ব্রেকপয়েন্ট হিসেবে ব্যবহার করেছি, কিন্তু এটা কম বা বেশী করা সম্পূর্ণ আপনার ইচ্ছাধীন):
1 |
.grid-1 { |
2 |
/* grid declaration styles */
|
3 |
}
|
4 |
|
5 |
|
6 |
@media only screen and (min-width: 500px) { |
7 |
|
8 |
.grid-1 { |
9 |
/* grid declaration styles */
|
10 |
}
|
11 |
|
12 |
}
|
এখন আমাদের প্রথম ডিফ্লোরেশন এ আমরা একটি এক কলামে সম্পূর্ণ গ্রিড স্থাপন করলে তা কি ভাবে পরিবর্তিত হবে সেই বিষয়টি সংজ্ঞায়িত করবো। আমাদের grid-template-columns এ আমরা একটি কলাম লিস্ট করবো, একইসাথে নিশ্চিত করবো যে, grid-template-rows দ্বারা সংজ্ঞায়িত করা হয়, এবং grid-template-areas দিয়ে লেআউটটি সাজাবো:
1 |
.grid-1 { |
2 |
display: grid; |
3 |
width: 100%; |
4 |
margin: 0 auto; |
5 |
|
6 |
grid-template-columns: 1fr; |
7 |
grid-template-rows: 80px auto auto 80px; |
8 |
grid-gap: 10px; |
9 |
|
10 |
grid-template-areas: "header" |
11 |
"main"
|
12 |
"sidebar"
|
13 |
"footer"; |
14 |
}
|
আমরা ছোট স্ক্রিনের বিবেচনায় ডিফল্ট হিসেবে grid-gap শুধুমাত্র 10px রাখবো।
এটা ঠিক কেমন দেখাবে, তা নিচে দেয়া হলো। আপনি নিশ্চয়ই লক্ষ্য করেছেন আমরা মিডিয়া কুয়েরী ব্যবহার করে .grid-1 div আইটেমের padding ও font-size পরিবর্তন করেছি।
আমাদের নেস্টেড গ্রিড
এটি মেইন লেআউটের জন্য, কিন্তু আমাদের আরও একটি নেস্টেড গ্রিড আছে, যা এই অবস্থাতেও দুই কলামের থাকবে। এটা ঠিক করতে আমরা আগের প্রক্রিয়াটিই আবার করবো, কিন্তু এইবার অন্য আরেকটি ব্রেকপয়েন্ট ব্যবহার করবো যাতে কন্টেণ্ট-ফার্স্ট পদ্ধতি ব্যবহার করবো:
1 |
.item-2 { |
2 |
/* grid declaration styles */
|
3 |
}
|
4 |
|
5 |
|
6 |
@media only screen and (min-width: 600px) { |
7 |
|
8 |
.item-2 { |
9 |
/* grid declaration styles */
|
10 |
}
|
11 |
|
12 |
}
|
কোডপেনে সর্বশেষ রেজাল্টটি দেখতে পারেন।
এখানে বেশ কিছু বিষয় লক্ষ্য করুন:
- যেমনটি আমরা আগে বলেছি, আপনি সোর্স অর্ডারটি নির্বিশেষে গ্রিড আইটেমগুলি পরিচালনা করতে পারেন এবং মিডিয়া প্রশ্নগুলির অর্থ হচ্ছে আমরা বিভিন্ন স্ক্রীন প্রস্থগুলির জন্য বিভিন্ন চাক্ষুষ আদেশ রাখতে পারি। যাইহোক, নেস্টিং সোর্সের দিক থেকে সত্যিই থাকবে, আমাদের নেস্টেড করা উপাদানগুলো সব সময় তাদের মূল উপাদানগুলো থেকে এক ধাপ নিচে থাকবে।
- সিএসএস ট্রানসিশন এর গ্রিড লেআউট এর উপর কোন ধরনের প্রভাব নেই। যখন আমাদের মেডিয়া কোয়েরি চালু হবে এবং আমাদেরকে রিয়া নতুন পজিশনে সরে যাবে তখন আপনি এগুলোকে সঠিক জায়গায় রাখতে সমর্থ হবেন না।
অটো ফিল অফ মি ম্যাক্স
গ্রিড রেস্পন্সিভ করার আরেকটি উপায় হচ্ছে ম্যাসনারি টাইপ লেআউট সমূহ, যাতে আমাদের ভিউপোর্টের উপর নির্ভর করে ব্লকের সাইজ এবং ফ্লো দুটোই স্বয়ংক্রিয়ভাবে ঠিক হয়ে যাবে।
auto-fill
এখন পর্যন্ত আমাদের এই পদ্ধতির কতগুলি ট্র্যাক আছে তা নির্দেশ করা হয়েছে এবং আইটেমগুলি সে অনুসারে মাপসই করা হয়েছে। এই ডেমোতে আসলে যা ঘটেছে; আমরা grid-template-columns: repeat(4, 1fr); বসিয়েছি, যাতে বলা হয়েছে "চারটি কলাম তৈরি করুন, এবং প্রতিটি কলামকে মোট দৈর্ঘ্যের এক ভগ্নাংশ ইউনিট প্রশস্ত করা হউক"।
auto-fill কীওয়ার্ডের মাধ্যমে আমাদের গ্রিডটি কি পরিমান প্রশস্ত হবে তা ঠিক করতে পারি এবং গ্রিডের বর্তমান জায়গায় কয়টি ব্লক থাকবে তা বের করতে পারি। এই ডেমোটিতে আমরা grid-template-columns: repeat(auto-fill, 9em); ব্যবহার করেছি যাতে বলা হয়েছে, প্রতিটি কলাম 9em প্রশস্ত করা এবং গ্রিড কন্টেইনারের প্রশস্ততা অনুযায়ী যে কয়টা ধারন করা যায়, তা করবে"।
নোট: এখানে আমাদের গাটার হিসেবে ব্যবহার করা grid-gap এর পরিমানও ধরা হয়েছে।
এই ডেমোটির কন্টেইনারে একটি কালো ব্যাকগ্রাউণ্ড ব্যবহার করা হয়েছে যাতে পরিষ্কারভাবে দেখা যায় যে, কি পরিমান যায়গা আছে, এবং আপনি দেখতে পাচ্ছেন নিচের উদাহরনে তা সম্পূর্ণভাবে পূর্ণ হয় নি। তাহলে কিভাবে আমরা এটা করতে পারি?
minmax()
minmax() ফাংশন দিয়ে আমরা একটি ট্র্যাকের জন্য একটি মিনিমাম ও ম্যাক্সিমাম সাইজ ঠিক করে দিতে পারি, যাতে গ্রিডটি এগুলো নিয়ে কাজ করতে পারে। উদাহরনস্বরূপ, আমরা তিনটি কলাম সেটআপ করতে পারি, প্রথম দুটি 1fr পরিমান প্রশস্ত হবে, এবং শেষেরটি ম্যাক্সিমাম 1fr পরিমান প্রশস্ত হবে, কিন্তু 160px এর চেয়ে আর বেশী সঙ্কুচিত হবে না:
1 |
grid-template-columns: 1fr 1fr minmax(160px, 1fr); |
উইন্ডো সঙ্কুচিত করার সাথে সাথে সবগুলো কলাম সঙ্কুচিত হবে, কিন্তু শেষের কলামটি কেবল কিছুটা দূরে সরে যাবে। এক নজর দেখে নিন।
auto-fill ডেমোতে আবার ফিরে যাই, আমরা যদি আমাদের কলামের প্রশস্ততা minmax(9em, 1fr) পর্যন্ত পরিবর্তন করি তাহলে গ্রিডে যতটা সম্ভব 9em ট্র্যাক অবস্থান করবে, কিন্তু তারপর এগুলোকে ম্যাক্সিমাম 1fr পর্যন্ত প্রশস্ত করা হবে, যতক্ষন না কন্টেইনারটি সম্পূর্ণ হয়ে যায়:
সতর্কীকরণ: গ্রিড সাধারনত পেজ রিলোড করার পর পুনরায় হিসাব করে (ব্রাউজার উইন্ডো সংকুচিত করে আবার রিফ্রেশ করুন) কিন্তু উইণ্ডো রিসাইজ করার সাথে সাথেই এর কার্যকারিতা পাবেন না। মিডিয়া কুয়েরী দিয়ে মান পরিবর্তন করা গেলেও, কিন্তু তা এখনও উইন্ডো রিসাইজ করলেই সুন্দরভাবে চলতে সক্ষম নয়।
পরিসমাপ্তি
এক নজরে কিছু বুলেট পয়েন্ট:
- মিডিয়া কুইরী এরিয়া পুনরায় সংজ্ঞায়িত করার মাধ্যমে আমাদেরকে সম্পূর্ণ গ্রিড লেআউটটি নতুন করে সাজাতে সাহায্য করে।
- গ্রিড লেআউটে পরিবর্তনের উপর সিএসএস ট্রানসলেশন ট্রানজিশনের কোন প্রভাব থাকবে না।
- গ্রিট কনটেইনার পূর্ণ করতে অটো ফিল কিওয়ার্ড টি বেশ কার্যকর।
- মিনিমেক্স ফাংশনটি অটো ফিল এর সাথে খুব সুন্দর ভাবে সম্পূরক হয় যা নিশ্চিত করে কনটেইনারগুলো সঠিকভাবে পূর্ণ হয়েছে কিন্তু সত্যিকার ভাবে আমাদেরকে রেস্পন্সিভেনেস দিতে পারে না।
এই সিরিজের শেখা বিশেষ টেকনিকগুলো আপনি আপনার নতুন গ্রিডে কাজে লাগাতে পারেন! গ্রিট সম্পর্কিত আরো টিউটোরিয়াল, প্র্যাকটিক্যাল এক্সারসাইজ, সাধারণ লে-আউটের সমস্যার সমাধান এবং আপডেটের জন্য আমাদের সাথেই থাকুন।
দরকারী রিসোর্স সমূহ
- Rachel Andrew’s Grid by Example 29: minmax() and spanning columns and rows
- Video: Rachel Andrew (obviously) demonstrating minmax() on the Tuts+ homepage layout
- W3C Editor’s Draft: auto-fill
- W3C Editor’s Draft: minmax()
