CSS grid-template-areas অপারেশন
- পূর্ববর্তী পৃষ্ঠা grid-template
- পরবর্তী পৃষ্ঠা grid-template-columns
বিবরণ ও ব্যবহার
গ্রিড লেআউটে গ্রিড-টেমপ্লেট-এরিয়াস অ্যাট্রিবিউট এলাকা নির্ধারণ করে
আপনি ব্যবহার করতে পারেন grid-area প্রতিভূত নামগুলি গ্রিড টেমপ্লেট-এরিয়াস অ্যাট্রিবিউটের মাধ্যমে আইটেম নাম দিন
প্রত্যেক অঞ্চলকে বিশৃঙ্গ দ্বারা নির্দিষ্ট করা হয়। নামবদ্ধ না থাকা গ্রিড প্রক্রিয়াকে বিশেষ বাক্যমালা ব্যবহার করে উল্লেখ করুন।
অন্যান্য দেখুন:
CSS শিক্ষা:CSS গ্রিড প্রকল্প
CSS সংরক্ষণ হান্ডবুক:grid-area অ্যাট্রিবিউট
CSS সংরক্ষণ হান্ডবুক:grid-template অ্যাট্রিবিউট
প্রতিমান
উদাহরণ 1
নামকরণকৃত প্রক্রিয়া 'myArea'কে পাঁচটি গ্রিড লেআউটে দুই সারিতে বিস্তৃত করুন:
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: "myArea myArea . . .";
}
উদাহরণ 2
দুই সারিকে নির্দিষ্ট করুন, যেখানে 'item1' প্রথম দুই সারিতে প্রথম দুই সারিতে বিস্তৃত হবে (পাঁচটি গ্রিড লেআউটে):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas:
'myArea myArea . . .'
'myArea myArea . . .';
}
উদাহরণ 3
সমস্ত প্রক্রিয়াকে নামকরণ করুন এবং একটি প্রস্তুত ওয়েব টেমপ্লেট তৈরি করুন:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
}
CSS গ্রামার
grid-template-areas: none|itemnames;
অ্যাট্রিবিউট মান
| মান | বর্ণনা |
|---|---|
| none | ডিফল্ট মান। নামবদ্ধ গ্রিড অঞ্চল (grid areas) ছাড়াই নামবদ্ধ গ্রিড অঞ্চল |
| itemnames | প্রত্যেক সারিকে এবং প্রত্যেক সারিকে কিভাবে প্রদর্শিত হবে বলে নির্দিষ্ট করা হয়。 |
প্রযুক্তিগত বিবরণ
| ডিফল্ট মান: | none |
|---|---|
| উত্তরসূরীতা: | না |
| অ্যানিমেশন নির্মাণ: | সমর্থন করা হয়। দেখুন:অ্যানিমেশন-সংক্রান্ত অ্যাট্রিবিউট。 |
| সংস্করণ: | CSS Grid Layout Module Level 1 |
| জেভাস্ক্রিপ্ট গ্রামার: | object.style.gridTemplateAreas=". . . myArea myArea" |
ব্রাউজার সমর্থন
সমস্ত সমর্থিত অ্যাট্রিবিউটটির প্রথম ব্রাউজার সংস্করণকে তালিকাভুক্ত করা হয়েছে。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- পূর্ববর্তী পৃষ্ঠা grid-template
- পরবর্তী পৃষ্ঠা grid-template-columns
