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