CSS Grid Container
حاوية grid في لغة CSS
grid container هي عبارة عن عنصر نوعة display:grid يحتوي بداخله علي مجموعة عناصر يطلق عليهم معاً grid layout في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Grid Container
حاوية grid في لغة CSS
</>
CSS Grid Container
حاوية grid في لغة CSS
يتم تحويل أي عنصر في صفحة الويب مثل div من وضعة الأفتراضي وهو display:block إلي نظام grid عن طريق تغيير قيمة خاصية display إلي display:grid.
خطوات إنشاء حاوية grid في لغة CSS:
- قم بإنشاء عنصر في صفحة HTML وليكن div.
- قم بإضافة خاصية display:grid.
طريقة عرض جميع عناصر حاوية grid علي هيئة عمود واحد بملئ الشاشة.
CSS grid container
حاوية grid في لغة CSS عن طريق خاصية display والقيمة grid.
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
min-height:300px;
}
</>
CSS inline grid container
حاوية grid من النوع Inline في لغة CSS
يتم تحويل أي عنصر في صفحة الويب مثل div من وضعة الأفتراضي وهو display:block إلي نظام grid من النوع Inline عن طريق تغيير قيمة خاصية display إلي display:inline-grid.
خطوات إنشاء حاوية inline-grid في لغة CSS:
- قم بإنشاء عنصر في صفحة HTML وليكن div.
- قم بإضافة خاصية display:inline-grid.
طريقة عرض جميع عناصر حاوية inline-grid علي هيئة عمود واحد علي قدر المحتوي الداخلي للعناصر.
CSS inline grid container
حاوية grid في لغة CSS عن طريق خاصية display والقيمة inline-grid.
.grid-container
{
display:inline-grid;
background-color: #2196F3;
min-height:300px;
width:100%
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
