CSS Grid Template Areas
خاصية grid-template-areas مع grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-template-areasفي لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Grid Template Areas
خاصية grid-template-areas مع grid في لغة CSS
</>
CSS Grid Template Areas
خاصية grid-template-areas مع grid في لغة CSS
تستخدم خاصية grid-template-areas مع العناصر الداخلية لحاوية grid في لغة CSS لتحديد مساحات كاملة شامله أعمدة مع صفوف,يمكن تسمية عناصر حاوية grid عن طريق خاصية grid-area ثم يتم تحديد الأسم بداخل خاصية grid-template-areas.
- كل منطقة أو مساحة تحدد بواسطة apostrophes أو علامات single qoutes.
- تستخدم علامة نقطة للإشارة إلى عنصر grid بدون اسم.
قيم خاصية grid-template-areas في لغة CSS:
- none وهي القمية الأفتراضية وهي أسماء العناصر غير محددة.
- itemname تحديد أسم عنصر محدد داخل حاوية grid.
CSS grid-template-areas syntax
طريقة كتابة خاصية grid-template-areas في لغة CSS.
grid-template-areas:value;
CSS grid-template-areas values
قيم خاصية grid-template-areas في لغة CSS.
grid-template-areas:none|itemnames;
</>
CSS grid template areas none
خاصية grid-template-areas مع القيمة none في لغة CSS
CSS grid template areas none
خاصية grid-template-areas مع القيمة none في لغة CSS.
.grid-container {
display: grid;
grid-template-columns:auto auto auto auto;
grid-template-areas:none;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
</>
CSS grid template areas itemname
خاصية grid-template-areas مع القيمة item name في لغة CSS
CSS grid template areas itemname
خاصية grid-template-areas مع القيمة itme name في لغة CSS.
.grid-container {
display: grid;
grid-template-areas:
'one one one . .'
'one one one . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
