CSS grid-template অপারেটর
- পূর্ববর্তী পৃষ্ঠা grid-row-start
- পরবর্তী পৃষ্ঠা grid-template-areas
সংজ্ঞা ও ব্যবহার
grid-template অ্যাট্রিবিউট হল নিম্নলিখিত অ্যাট্রিবিউটগুলির সংক্ষিপ্ত রূপ:
আরও দেখুন:
CSS শিক্ষাদত্ত্র:CSS গ্রিড প্রকল্প
CSS পরিচিতি হান্ডবুক:grid-area অ্যাট্রিবিউট
CSS পরিচিতি হান্ডবুক:grid-template-rows অ্যাট্রিবিউট
CSS পরিচিতি হান্ডবুক:grid-template-columns অ্যাট্রিবিউট
CSS পরিচিতি হান্ডবুক:grid-template-areas অ্যাট্রিবিউট
প্রতিমান
উদাহরণ ১
প্রথম স্তম্ভ ১৫০ পিক্সেল উচ্চতার তিনটি কলাম গ্রিড লেআউট তৈরি করুন:
.grid-container {
display: grid;
grid-template: 150px / auto auto auto;
}
উদাহরণ 2
দুই পদর নির্দিষ্ট করা হয়, যার মধ্যে 'item1' প্রথম দুই পদরের প্রথম দুই কলমগুলিতে পার্শ্বস্থ (একটি পাঁচকলম গ্রিড লেআউটে):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template:
'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:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
}
CSS 语法
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
| মান | বর্ণনা |
|---|---|
| none | ডিফল্ট মান। কলম বা পদরের মাপ নির্দিষ্ট করা হয় না。 |
| grid-template-rows / grid-template-columns | কলম এবং পদরের মাপ নির্দিষ্ট করা হয়。 |
| grid-template-areas | নামকৃত প্রক্রিয়াগুলির গ্রিড লেআউট ব্যবহার করা হয়。 |
| initial | এই বৈশিষ্ট্যটি তার ডিফল্ট মানে সংস্থান করুন। দেখুন: initial。 |
| inherit | এই বৈশিষ্ট্যটি তার পূর্বপুরুষ এলিমেন্ট থেকে উত্তরসূরী করুন। দেখুন: inherit。 |
প্রযুক্তিগত বিবরণ
| ডিফল্ট মান: | none none none |
|---|---|
| পূর্বপুরুষতা: | না |
| অ্যানিমেশন নির্মাণ: | সমর্থন করা হয়। দেখুন:অ্যানিমেশন সংক্রান্ত বৈশিষ্ট্য。 |
| সংস্করণ： | CSS Grid Layout Module Level 1 |
| JavaScript 语法： | object.style.gridTemplate="250px / auto auto" |
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এই প্রক্রিয়াটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি নির্দেশ করে।
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- পূর্ববর্তী পৃষ্ঠা grid-row-start
- পরবর্তী পৃষ্ঠা grid-template-areas
