CSS

CSS Grid Items
عناصر حاوية grid في لغة CSS

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

التاريخ

05 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2404

المواضيع

24
الشروحات chevron_left CSS Grid Items chevron_left CSS

CSS Grid Items
عناصر حاوية grid في لغة CSS

</> CSS Grid items
عناصر grid في لغة CSS

يتم تحويل أي عنصر داخل حاوية grid عن طريق إضافة عناصر HTML داخل العنصر الزي يتم إستخدام خاصية display:grid معه وثم نستخدم ايضاً مع الحاوية خاصية grid-template-columns لتطبق نظام الأعمدة علي العناصر الداخلية gtid items عناصر لحاوية grid  في لغة CSS.


خطوات إنشاء عناصر grid في لغة CSS:

  1. قم بإنشاء عنصر في صفحة HTML وليكن div.
  2. قم بإضافة خاصية display:grid أو خاصية display:inline-grid.
  3. قم بإضافة بعض العناصر داخل حاوية grid.
  4. قم بإضافة خاصية grid-template-columns والقيمة هي auto auto auto بعدد الأعمدة.
CSS grid items columns one row

عناصر grid في لغة CSS علي هئية أعمدة داخل صف واحد فقط.

.grid-container
{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

</> CSS grid items row
عناصر حاوية grid علي هيئة صفوف في لغة CSS

إذا كانت القيم بداخل خاصية grid-template-columns أقل من عدد العناصر سوف يتم عرض عناصر حاوية grid علي هيئة صفوف في لغة CSS.

CSS grid items columns two rows

عناصر grid في لغة CSS علي هئية أعمدة داخل صفين.

.grid-container
{
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات