تستخدم خاصية 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

تستخدم خاصية grid-template-areas في لغة CSS مع حاوية grid مع القيمة none لعدم تحديد أسماء للعناصر الداخلية وهي القيمة الأفتراضية.

جربها بنفسك

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

تستخدم خاصية grid-template-areas في لغة CSS مع حاوية grid مع القيمة none لتحديد أسم للعناصر الموجوده بداخل حاوية grid ليتم تحديد منطقة أو مساحات بها.

جربها بنفسك

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

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Grid Template Areas
خاصية grid-template-areas مع grid في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Grid Template Areas CSS