CSS justify-items অপারেটর

বিবরণ ও ব্যবহার

justify-items অ্যাট্রিবিউটকে গ্রিড কন্টেনারে সেট করা হয়, এটি সাব-এলিমেন্ট (গ্রিড আইটেম) কে লাইনের ইনলাইন দিশায় অলিগেশন করে。

ইংরেজি পাতায়, লাইনের ইনলাইন দিশা ডান থেকে বামের দিকে এবং ব্লক দিশা নিচের দিকে হয়。

এই অ্যাট্রিবিউটকে কোনও অলিগেশন প্রভাব করতে হলে, গ্রিড আইটেমকে লাইনের ইনলাইন দিশায় স্বতঃস্থানকারী স্থান ছেড়ে দিতে হবে。

টীকা:যদি গ্রিড আইটেমকে ব্লক দিশায় বর্গত্ব করতে হয়, তবে align-items অ্যাট্রিবিউট অ্যাট্রিবিউট

আরও দেখুন:

CSS ট্যুটোরিয়াল:CSS Grid

CSS ট্যুটোরিয়াল:CSS অলিগেশন

CSS রেফারেন্স ম্যানুয়েল:align-items অ্যাট্রিবিউট

CSS রেফারেন্স ম্যানুয়েল:direction অ্যাট্রিবিউট

CSS রেফারেন্স ম্যানুয়েল:grid অ্যাট্রিবিউট

CSS রেফারেন্স ম্যানুয়েল:grid-template-columns অ্যাট্রিবিউট

CSS রেফারেন্স ম্যানুয়েল:justify-self অ্যাট্রিবিউট

CSS রেফারেন্স ম্যানুয়েল:position অ্যাট্রিবিউট

CSS রেফারেন্স ম্যানুয়েল:writing-mode অ্যাট্রিবিউট

ইনস্ট্যান্স

উদাহরণ 1

প্রত্যেক গ্রিড আইটেমকে তার গ্রিড ইউনিটের শেষে লাইনের ইনলাইন দিশায় অলিগেশন করুন:

#container {
  display: grid;
  justify-items: end;
}

আপনার হাতে করুন

উদাহরণ 2: justify-items vs justify-self

কন্টেনারের অলিগেশন পদ্ধতিকে 'মধ্য' হিসাবে সেট করা, এবং গ্রিড আইটেমকে স্বতঃস্থানকারী 'রাইট' হিসাবে সেট করা। অ্যাট্রিবিউট মান 'right' দক্ষিণতা পায়:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

আপনার হাতে করুন

উদাহরণ 3: সুপারিশ অবস্থানকারী গ্রিড আইটেমে justify-items সেট করা

সুপারিশ অবস্থানকারী গ্রিড আইটেমের অলিগেশন পদ্ধতিকে 'রাইট' হিসাবে সেট করুন:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

আপনার হাতে করুন

উদাহরণ 4: writing-mode

যখন গ্রিড কন্টেনার এলিমেন্টের writing-mode অ্যাট্রিবিউটের মান vertical-rl হয়, তখন লাইনের ইনলাইন দিশা নিচের দিকে হয়। ফলস্বরূপ, কন্টেনারের শুরু ডানদিক থেকে শুরু হয়, এবং কন্টেনারের শেষ ডানদিক থেকে শেষ হয়:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

আপনার হাতে করুন

উদাহরণ ৫: direction

গ্রিড কনটেনার এলিমেন্টের direction এট্রিবিউটির মান 'rtl' হলে, একক দিকটি ডান থেকে বাম দিকে বদল হয়। ফলস্বরূপ, কনটেনারের শুরুটি বামদিকে এবং শেষটি ডানদিকে স্থানান্তরিত হয়:

#container {
  justify-items: start;
  direction: rtl;
}

আপনার হাতে করুন

সিএসএস গ্রামার

justify-items: legacy|normal|stretch|পোজিশনাল অ্যালিগনমেন্ট|overflow-alignment|বেসলাইন অ্যালিগনমেন্ট|initial|inherit;

এট্রিবিউটি মান

মান বর্ণনা
লিগেসি

ডিফল্ট মান

শুধুমাত্র 'লিগেসি' শুরু করার ক্ষেত্রে, justify-self এর 'auto' মানযুক্ত গ্রিড এলিমেন্টগুলি গ্রিড কনটেনারের justify-items এট্রিবিউটির মান ইনহারিট করবে

এটির উদ্দেশ্য হল এইচটিএমএল এর <center> এলিমেন্ট এবং align এট্রিবিউটির লিগেসি অ্যালিগনমেন্ট হতে কাজ করা
নরম লেইটেজ ব্লক সংক্রান্ত, কিন্তু গ্রিড লেইটেজের 'স্ট্রেচ' অনুরূপ
স্ট্রেচ যদি inline-size (প্রস্থ) সেট না হয়, তবে গ্রিড সেলের পূর্ণ ফাঁটায় সম্পূর্ণ করে ফুলে যাওয়া
স্টার্ট একক দিকের ভাবে শুরুতে প্রযুক্তি অ্যালিগনমেন্ট করুন
লেফট প্রযুক্তিকে বামদিকে অ্যালিগনমেন্ট করুন
সেন্টার প্রযুক্তিকে কেন্দ্রে অ্যালিগনমেন্ট করুন
এন্ড একক দিকের শেষের দিকে প্রযুক্তি অ্যালিগনমেন্ট করুন
রাইট প্রযুক্তির ডানদিকে অ্যালিগনমেন্ট করুন
overflow-alignment
  • 'safe' প্রযুক্তি ওয়াইড হলে 'start' হিসাবে প্রযুক্তির অ্যালিগনমেন্ট সেট করবে
  • 'unsafe' অ্যালিগনমেন্ট মান সম্পর্কিত যেমন প্রযুক্তি ওয়াইড হোক না কেন
বেসলাইন-অ্যালিগনমেন্ট এলিমেন্ট এবং পিতৃত্ব এলিমেন্টের বেসলাইনের সাথে সামঞ্জস্যপূর্ণভাবে যুক্ত হোক
ইনিশিয়াল এই এট্রিবিউটি তার ডিফল্ট মানে সেট করুন। দেখুন: ইনিশিয়াল。
ইনহারিট তার পিতৃত্ব এলিমেন্ট থেকে এই এট্রিবিউটি ইনহারিট করুন। দেখুন: ইনহারিট。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: লিগেসি
পুনরুত্তরণ: না
অ্যানিমেশন তৈরি: সমর্থন না করে। দেখুন:অ্যানিমেশন সংক্রান্ত এট্রিবিউটি。
সংস্করণ： সিএসএস ৩
জেভাস্ক্রিপ্ট গ্রামার： object.style.justifyItems="center"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম বুলট এই এট্রিবিউটি সম্পর্কিত ব্রাউজারের সংস্করণ উল্লেখ করে।

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম আইই / এজ ফায়ারফক্স স্যাফারি অপেরা
57.0 16.0 45.0 10.1 44.0