আমি একত্রিত হয়েছি যে ফ্লেক্সবক্স ব্যবহার করে এটি অর্জন করা অসম্ভব, কারণ প্রতিটি সারিটি তার উপাদানগুলির সাথে ফিট করার জন্য কেবল সর্বনিম্ন উচ্চতা হতে পারে, তবে এটি কি নতুন সিএসএস গ্রিড ব্যবহার করে অর্জন করা যেতে পারে?
পরিষ্কার হওয়ার জন্য, আমি প্রতিটি সারি প্রতি নয়, সমস্ত সারি জুড়ে গ্রিডে সমস্ত উপাদানগুলির জন্য সমান উচ্চতা চাই। মূলত, সর্বাধিক "সেল" এর সমস্ত কক্ষের উচ্চতা নির্ধারণ করা উচিত, কেবল তার সারির কক্ষগুলি নয়।
উত্তর:
যদি সমান উচ্চতার সারিগুলির সাথে গ্রিড তৈরি করা হয়, যেখানে গ্রিডের দীর্ঘতম সেলটি সমস্ত সারিগুলির জন্য উচ্চতা নির্ধারণ করে, এখানে একটি দ্রুত এবং সাধারণ সমাধান দেওয়া হয়েছে:
grid-auto-rows: 1frগ্রিড লেআউট একটি গ্রিড পাত্রে নমনীয় দৈর্ঘ্য স্থাপনের জন্য একটি ইউনিট সরবরাহ করে। এটি frইউনিট। এটি পাত্রে মুক্ত স্থান বিতরণের জন্য ডিজাইন করা হয়েছে এবং এটি কিছুটা flex-growফ্লেক্সবক্সে সম্পত্তি অনুরূপ alog
আপনি যদি গ্রিড পাত্রে সমস্ত সারি সেট করে থাকেন 1frতবে আসুন এইভাবে বলুন:
grid-auto-rows: 1fr;
... তাহলে সমস্ত সারি সমান উচ্চতা হবে।
ব্যাটটি অফ-দ্য ব্যাটটি আসলেই বোঝা যায় না কারণ frখালি জায়গা বিতরণ করার কথা। এবং যদি বেশ কয়েকটি সারিতে বিভিন্ন উচ্চতা সহ সামগ্রী থাকে, তবে স্থানটি বিতরণ করা হলে কিছু সারি আনুপাতিকভাবে ছোট এবং লম্বা হবে।
গ্রিড স্পেকের গভীরে কবর দেওয়া বাদে এই ছোট্ট নাগেট:
...
যখন উপলব্ধ স্থানটি অসীম হয় (যা তখন গ্রিড ধারকের প্রস্থ বা উচ্চতা অনির্দিষ্ট হয়) তখন নমনীয় আকারের (
fr) গ্রিড ট্র্যাকগুলি তাদের স্বতন্ত্র অনুপাত বজায় রেখে তাদের বিষয়বস্তুগুলিতে আকার দেয়।প্রতিটি ফ্লেক্স-আকারের গ্রিড ট্র্যাকের ব্যবহৃত আকারকে প্রতিটি ফ্লেক্স-আকারের গ্রিড ট্র্যাকের
max-contentআকার নির্ধারণ করে এবং একটি "অনুমানের1frআকার" নির্ধারণের জন্য সেই আকারটিকে স্বতন্ত্র ফ্লেক্স ফ্যাক্টর দ্বারা ভাগ করে গণনা করা হয় ।এর মধ্যে সর্বাধিক সমাধান করা
1frদৈর্ঘ্য (ফ্লেক্স ভগ্নাংশ) হিসাবে ব্যবহৃত হয় , যা এর পরে প্রতিটি গ্রিড ট্র্যাকের তার চূড়ান্ত আকার নির্ধারণের ফ্লেক্স ফ্যাক্টর দ্বারা গুণিত হয়।
সুতরাং, যদি আমি এটি সঠিকভাবে পড়ছি, যখন গতিশীল আকারের গ্রিডের সাথে ডিলিং করব (উদাহরণস্বরূপ, উচ্চতা অনির্দিষ্টকালের জন্য), গ্রিড ট্র্যাকগুলি (সারি, এই ক্ষেত্রে) তাদের বিষয়বস্তু আকারের হয়।
প্রতিটি সারির উচ্চতা দীর্ঘতম ( max-content) গ্রিড আইটেম দ্বারা নির্ধারিত হয় ।
এই সারিগুলির সর্বোচ্চ উচ্চতা দৈর্ঘ্যে পরিণত হয় 1fr।
কিভাবে সেটা 1frএকটি গ্রিড কন্টেইনারে সমান উচ্চতা সারি তৈরি করে।
প্রশ্নে উল্লিখিত হিসাবে, সমান উচ্চতার সারিগুলি ফ্লেক্সবক্সের মাধ্যমে সম্ভব নয়।
ফ্লেক্স আইটেমগুলি একই সারিতে সমান উচ্চতা হতে পারে তবে একাধিক সারি জুড়ে নয়।
এই আচরণটি ফ্লেক্সবক্স বিশেষে সংজ্ঞায়িত করা হয়:
একটি বহু-লাইন ফ্লেক্স ধারকটিতে, প্রতিটি লাইনের ক্রস আকার হ'ল নূন্যতম আকার যা লাইনটিতে ফ্লেক্স আইটেমগুলি ধারণ করতে প্রয়োজনীয়।
অন্য কথায়, যখন সারি ভিত্তিক ফ্লেক্স ধারকটিতে একাধিক লাইন থাকে, প্রতিটি লাইনের উচ্চতা ("ক্রস আকার") লাইনের নমনীয় আইটেমগুলি ধারণ করতে ন্যূনতম উচ্চতা হয়।
সংক্ষিপ্ত উত্তরটি হ'ল grid-auto-rows: 1fr;গ্রিডের ধারকটিতে সেট করা যা চাওয়া হয়েছিল তা সমাধান করে।
grid-auto-rowধারকটির প্রথম সারিতে সর্বোচ্চ আকার 100px এবং সেই সারির জন্য 2 ছিল, তবে এর অর্থ কি প্রথম সারির 1fr এর আকার 50px এর সমান?