flexbox
ফ্লেক্সবক্সের সাহায্যে একটি গতিশীল গাঁথুনি বিন্যাস সম্ভব নয়, কমপক্ষে পরিষ্কার এবং দক্ষ উপায়ে নয়।
ফ্লেক্সবক্স এক-মাত্রিক লেআউট সিস্টেম is এর অর্থ এটি অনুভূমিক বা উল্লম্ব লাইনের সাথে আইটেমগুলিকে সারিবদ্ধ করতে পারে। একটি ফ্লেক্স আইটেম তার সারি বা কলামে সীমাবদ্ধ।
একটি সত্য গ্রিড সিস্টেম দ্বিমাত্রিক, যার অর্থ এটি অনুভূমিক এবং উল্লম্ব রেখার সাথে আইটেমগুলিকে সারিবদ্ধ করতে পারে। সামগ্রী আইটেমগুলি একই সাথে সারি এবং কলামগুলিতে বিস্তৃত হতে পারে, যা ফ্লেক্স আইটেমগুলি করতে পারে না।
এই কারণেই গ্রিডগুলি তৈরি করার জন্য ফ্লেক্সবক্সের সীমাবদ্ধ ক্ষমতা রয়েছে। ডাব্লু 3 সি গ্রিড লেআউট আরও একটি সিএসএস 3 প্রযুক্তি বিকাশ করার কারণও এটি ।
row wrap
সহ একটি ফ্লেক্স পাত্রে flex-flow: row wrap
, ফ্লেক্স আইটেমগুলিকে অবশ্যই নতুন সারিগুলিতে আবৃত করতে হবে ।
এর অর্থ হ'ল একটি ফ্লেক্স আইটেম একই সারিতে অন্য আইটেমের নিচে মোড়াতে পারে না ।
উপরের দিকে লক্ষ্য করুন ডিভিডি # 3 কীভাবে ডিভ # 1 এর নীচে মোড়ানো , একটি নতুন সারি তৈরি করে। এটি # 2 ডিভের নিচে মোড়তে পারে না ।
ফলস্বরূপ, যখন আইটেমগুলি সারিগুলির মধ্যে দীর্ঘতম হয় না, সাদা স্থান অবশেষ থাকে, অপ্রীতিকর ফাঁক তৈরি করে।
column wrap
আপনি যদি স্যুইচ করেন flex-flow: column wrap
, গ্রিডের মতো লেআউটটি আরও অর্জনযোগ্য। তবে, কলামের দিকের ধারকটির ব্যাটে ডানদিকে চারটি সম্ভাব্য সমস্যা রয়েছে:
- ফ্লেক্স আইটেমগুলি উল্লম্বভাবে প্রবাহিত হয়, অনুভূমিকভাবে নয় (যেমনটি আপনার ক্ষেত্রে প্রয়োজন)।
- ধারকটি অনুভূমিকভাবে প্রসারিত হয়, উল্লম্বভাবে নয় (পিন্টারেস্ট বিন্যাসের মতো)।
- এটির ধারকটির একটি নির্দিষ্ট উচ্চতা থাকা দরকার, তাই আইটেমগুলি কোথায় জড়িত তা জানে।
- এই লেখার হিসাবে, এটির সমস্ত বড় ব্রাউজারগুলিতে এর ঘাটতি রয়েছে যেখানে অতিরিক্ত কলাম যুক্ত করার জন্য ধারকটি প্রসারিত হয় না ।
ফলস্বরূপ, কলাম-দিকনির্দেশক ধারক এই ক্ষেত্রে কোনও বিকল্প নয় এবং অন্যান্য অনেক ক্ষেত্রে।
আইটেমের মাত্রা সহ সিএসএস গ্রিড
গ্রিড লেআউট আপনার সমস্যার একটি নির্ভুল সমাধান হবে যদি বিষয়বস্তু আইটেম বিভিন্ন উচ্চতা হতে পূর্বনির্ধারিত পারে । গ্রিডের সামর্থ্যের মধ্যে অন্যান্য সমস্ত প্রয়োজনীয়তা ভাল।
আশেপাশের আইটেমগুলির সাথে ফাঁক বন্ধ করতে গ্রিড আইটেমগুলির প্রস্থ এবং উচ্চতা অবশ্যই জানা উচিত।
সুতরাং গ্রিড, যা অনুভূমিকভাবে প্রবাহিত রাজমিস্ত্রি লেআউটটি তৈরির জন্য সেরা সিএসএসের অফার দেয়, এই ক্ষেত্রে সংক্ষিপ্ত হয়ে পড়ে।
প্রকৃতপক্ষে, কোনও সিএসএস প্রযুক্তি স্বয়ংক্রিয়ভাবে ফাঁকগুলি বন্ধ করার ক্ষমতা নিয়ে না আসা পর্যন্ত সাধারণভাবে সিএসএসের কোনও সমাধান নেই। এর মতো কিছুতে সম্ভবত দস্তাবেজটি রিফ্লো করা দরকার হবে, সুতরাং এটি কতটা কার্যকর বা দক্ষ হবে তা আমি নিশ্চিত নই।
আপনার একটি স্ক্রিপ্ট লাগবে।
জাভাস্ক্রিপ্ট সমাধানগুলি নিখুঁত অবস্থান ব্যবহার করে, যা কোনও ফাঁক ছাড়াই পুনরায় সাজানোর জন্য ডকুমেন্ট প্রবাহ থেকে সামগ্রী আইটেমগুলি সরিয়ে দেয়। এখানে দুটি উদাহরণ দেওয়া হল:
আইটেম মাত্রা সংজ্ঞায়িত সিএসএস গ্রিড
বিন্যাসগুলির জন্য যেখানে সামগ্রী আইটেমগুলির প্রস্থ এবং উচ্চতা জানা যায়, খাঁটি সিএসএসে অনুভূমিকভাবে প্রবাহিত রাজমিস্ত্রি লেআউটটি এখানে রয়েছে:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
কিভাবে এটা কাজ করে
- একটি ব্লক-স্তরের গ্রিড ধারক স্থাপন করুন। (
inline-grid
অন্য বিকল্প হবে)
grid-auto-rows
সম্পত্তি স্বয়ংক্রিয়ভাবে উত্পন্ন সারির উচ্চতা সেট করে। এই গ্রিডে প্রতিটি সারি 50px লম্বা হয়।
grid-gap
সম্পত্তি জন্য একটি সাঁটে লেখার হয় grid-column-gap
এবং grid-row-gap
। এই নিয়মটি গ্রিড আইটেমগুলির মধ্যে একটি 10px ব্যবধান সেট করে । (এটি আইটেম এবং ধারকগুলির মধ্যে অঞ্চলে প্রযোজ্য নয়))
grid-template-columns
সম্পত্তি স্পষ্টভাবে সংজ্ঞায়িত কলামের প্রস্থ সেট করে।
repeat
স্বরলিপি পুনরায় কলাম (অথবা সারি) এর একটি প্যাটার্ন সংজ্ঞায়িত করে।
auto-fill
ফাংশন গ্রিড বলে ধারক সজল ছাড়া হিসাবে অনেক কলাম (অথবা সারি) যতটা সম্ভব লাইন আপ। (এটি ফ্লেক্স লেআউটের অনুরূপ আচরণ তৈরি করতে পারে flex-wrap: wrap
))
minmax()
ফাংশন প্রতিটি কলামের (অথবা সারি) জন্য একটি সর্বনিম্ন এবং সর্বোচ্চ আকার পরিসীমা সেট করে। উপরের কোডে, প্রতিটি কলামের প্রস্থ কন্টেইনারটির সর্বনিম্ন 30% এবং যা বিনামূল্যে স্থান উপলভ্য হবে তার সর্বাধিক হবে।
fr
ইউনিট গ্রিড কন্টেইনারে মুক্ত স্থান ভগ্নাংশ প্রতিনিধিত্ব করে। এটি ফ্লেক্সবক্সের flex-grow
সম্পত্তির সাথে তুলনীয় ।
এর সাথে grid-row
এবং span
আমরা গ্রিড আইটেমগুলিকে বলছি যে কতগুলি সারি জুড়ে তার বিস্তৃত হওয়া উচিত।
সিএসএস গ্রিডের জন্য ব্রাউজার সমর্থন
- ক্রোম - 8 ই মার্চ, 2017 পর্যন্ত সম্পূর্ণ সমর্থন (সংস্করণ 57)
- ফায়ারফক্স - 6 মার্চ, 2017 পর্যন্ত সম্পূর্ণ সমর্থন (সংস্করণ 52)
- সাফারি - 26 মার্চ, 2017 পর্যন্ত সম্পূর্ণ সমর্থন (সংস্করণ 10.1)
- এজ - 16 ই অক্টোবর, 2017 এর সম্পূর্ণ সমর্থন (সংস্করণ 16)
- আইই 11 - বর্তমান অনুমানের জন্য কোনও সমর্থন নেই; অপ্রচলিত সংস্করণ সমর্থন করে
এখানে সম্পূর্ণ চিত্র: http://caniuse.com/#search=grid
ফায়ারফক্সে দুর্দান্ত গ্রিড ওভারলে বৈশিষ্ট্য
ফায়ারফক্স ডেভ সরঞ্জামগুলিতে, যখন আপনি গ্রিড ধারকটি পরীক্ষা করেন, সিএসএস ঘোষণায় একটি ছোট গ্রিড আইকন থাকে is ক্লিক করার পরে এটি পৃষ্ঠায় আপনার গ্রিডের একটি রূপরেখা প্রদর্শন করে।
এখানে আরো বিস্তারিত: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts