CSS

CSS Grid Area
خاصية grid-area مع grid في لغة CSS

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

التاريخ

16 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

837

المواضيع

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

CSS Grid Area
خاصية grid-area مع grid في لغة CSS

</> CSS Grid Area
خاصية grid-area مع grid في لغة CSS

تستخدم خاصية grid-area مع العناصر الداخلية لحاوية grid في لغة CSS لتحديد مكان وحجم العنصر داخل حاوية grid  ولأختصار الخصائص التالية [grid-row-start-grid-column-start-grid-row-end-grid-column-end].


قيم خاصية grid-area في لغة CSS:

  • grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end أربع قيم ونفصل بينهم بعلامة spash /.
  • itemname تحديد أسم عنصر محدد داخل حاوية grid.
CSS grid-area syntax

طريقة كتابة خاصية grid-area في لغة CSS.

grid-area:value;
CSS grid-area-end values

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

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

</> CSS grid area values
خاصية grid-area مع القيم في لغة CSS

تحديد بداية وحجم الخلية رقم واحد وهي تبدأ من صف line رقم 2 من عمود line رقم 1 وتحجز مساحة صفين ومساحة ثلاث أعمدة.
CSS grid area values

خاصية grid-area مع القيم في لغة CSS.

.one
{
grid-area: 2 / 1 / span 2 / span 3;
}
CSS grid area values four

خاصية grid-area مع القيم في لغة CSS.

.four
{
grid-area: 2 / 3 / 5 / 6;
}

</> CSS grid area item name
خاصية grid-area مع القيمة item name في لغة CSS

عن طريق تحديد اسم لكل عنصر يمكن تحديد كل عنصر يشغل مساحة عدد من الخلايا أوعدد أعمدة مع grud في لغة CSS.
CSS grid area item name

خاصية grid-area مع القيمة itme name في لغة CSS.

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: MyLeft; }
.item6 { grid-area: MyRight; }
.item7 { grid-area: footer; }


.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu MyLeft MyLeft MyRight MyRight MyRight'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.