CSS Grid Items
عناصر حاوية grid في لغة CSS
سوف تتعلم في هذا الدرس جميع الخصائص التي تتحكم في محتوي حاوية والعناصر التي ينطبق عليها نظام grid في لغة CSS.
التاريخ
05 نوفمبر 2021
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
2404
المواضيع
24
CSS Grid Items
عناصر حاوية grid في لغة CSS
</>
CSS Grid items
عناصر grid في لغة CSS
يتم تحويل أي عنصر داخل حاوية grid عن طريق إضافة عناصر HTML داخل العنصر الزي يتم إستخدام خاصية display:grid معه وثم نستخدم ايضاً مع الحاوية خاصية grid-template-columns لتطبق نظام الأعمدة علي العناصر الداخلية gtid items عناصر لحاوية grid في لغة CSS.
خطوات إنشاء عناصر grid في لغة CSS:
- قم بإنشاء عنصر في صفحة HTML وليكن div.
- قم بإضافة خاصية display:grid أو خاصية display:inline-grid.
- قم بإضافة بعض العناصر داخل حاوية grid.
- قم بإضافة خاصية 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; }