CSS

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

سوف تتعلم في هذا الدرس خاصية grid-template-areasفي لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.

التاريخ

16 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

703

المواضيع

24
الشروحات chevron_left CSS Grid Template Areas chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

تستخدم خاصية 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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات