انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 98
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,948
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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.

HTML 
grid-template-areas:value;

CSS grid-template-areas values

قيم خاصية grid-template-areas في لغة CSS.

HTML 
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.

HTML 
.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.

HTML 
.grid-container {
  display: grid;
  grid-template-areas:
    'one one one . .'
    'one one one . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…