CSS

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

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

التاريخ

05 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1840

المواضيع

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

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%
}
مصطلحات الدرس
Container
Container

حاوية المحتوي

Grid
Grid

شبكي

Layout
Layout

تخطيط

Result
Result

نتيجة

Template
Template

نموذج

Columns
Columns

أعمدة

Example
Example

مثال

Rows
Rows

صفوف

Align
Align

محاذاة

Content
Content

محتوي

Start
Start

بداية

End
End

النهاية

Center
Center

في المنتصف

Space
Space

مسافة / تباعد

Evenly
Evenly

بالتساوي

Arount
Arount

حول

justify
justify

تبرير

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.