CSS خاصية منطقة الشبكة
مثال
اجعل "item1" يبدأ في الصف 2 العمود 1 ، ويمتد إلى صفين و 3 أعمدة:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية حجم grid-area
عنصر الشبكة وموقعه في تخطيط الشبكة ، وهي خاصية اختصار للخصائص التالية:
يمكن grid-area
أيضًا استخدام الخاصية لتعيين اسم لعنصر الشبكة. يمكن بعد ذلك الرجوع إلى عناصر الشبكة المسماة
بخاصية مناطق قالب الشبكة لحاوية الشبكة. انظر الأمثلة أدناه.
القيمة الافتراضية: | سيارة / سيارة / سيارة / سيارة |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | وحدة تخطيط شبكة CSS المستوى 1 |
بناء جملة JavaScript: | الكائن .style.gridArea = "1/2 / span 2 / span 3" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
بنية CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
قيم الملكية
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
مزيد من الأمثلة
مثال
يحصل Item1 على اسم "myArea" ، ويمتد على جميع الأعمدة الخمسة في تخطيط شبكة من خمسة أعمدة:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
مثال
دع "myArea" تمتد على عمودين في تخطيط شبكة من خمسة أعمدة (تمثل علامات الفترة عناصر بدون اسم):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
مثال
اجعل "العنصر 1" يمتد على عمودين وصفين:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
مثال
قم بتسمية جميع العناصر ، وقم بإنشاء قالب صفحة ويب جاهز للاستخدام:
.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';
}
الصفحات ذات الصلة
دروس CSS: تخطيط شبكة CSS