CSS گرید-تیمپل پروپری
- پرنہ 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 کا خصوصیت
مثال
مثال 1
اسکریپت کا پہلا کلومن 150 پیکسل کی اونچائی والا تین کلومن گرید لائؤٹ بنانا:
.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 |
جسکریپٹ گرامر: | object.style.gridTemplate="250px / auto auto" |
براہ راست بروزر کی مدد
جداول میں کچھ نمبر کی مدد سے اس کی پورا پورا سپورٹ کرنے والی پہلی براہ راست بروزر کی نسخہ کا ذکر کیا گیا ہے。
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
57 | 16 | 52 | 10 | 44 |
- پرنہ grid-row-start
- پرنہ grid-template-areas