CSS گرید-تیمپل پروپری

تعریف اور استعمال

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