CSS

CSS Grid Container
حاوية grid في لغة CSS

grid container هي عبارة عن عنصر نوعة display:grid يحتوي بداخله علي مجموعة عناصر يطلق عليهم معاً grid layout في لغة CSS.

التاريخ

05 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2264

المواضيع

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

CSS Grid Container
حاوية grid في لغة CSS

</> CSS Grid Container
حاوية grid في لغة CSS

يتم تحويل أي عنصر في صفحة الويب مثل div من وضعة الأفتراضي وهو display:block إلي نظام grid عن طريق تغيير قيمة خاصية display إلي display:grid.


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

  1. قم بإنشاء عنصر في صفحة HTML وليكن div.
  2. قم بإضافة خاصية 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:

  1. قم بإنشاء عنصر في صفحة HTML وليكن div.
  2. قم بإضافة خاصية 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%
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات