CSS Grid Items
عناصر حاوية grid في لغة CSS
سوف تتعلم في هذا الدرس جميع الخصائص التي تتحكم في محتوي حاوية والعناصر التي ينطبق عليها نظام grid في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
