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%
}
حاوية المحتوي
شبكي
تخطيط
نتيجة
نموذج
أعمدة
مثال
صفوف
محاذاة
محتوي
بداية
النهاية
في المنتصف
مسافة / تباعد
بالتساوي
حول
بين
تبرير
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
