CSS

CSS Grid Items
عناصر حاوية grid في لغة CSS

سوف تتعلم في هذا الدرس جميع الخصائص التي تتحكم في محتوي حاوية والعناصر التي ينطبق عليها نظام grid في لغة CSS.

التاريخ

05 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2189

المواضيع

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

CSS Grid Items
عناصر حاوية grid في لغة CSS

</> CSS Grid items
عناصر grid في لغة CSS

يتم تحويل أي عنصر داخل حاوية grid عن طريق إضافة عناصر HTML داخل العنصر الزي يتم إستخدام خاصية display:grid معه وثم نستخدم ايضاً مع الحاوية خاصية grid-template-columns لتطبق نظام الأعمدة علي العناصر الداخلية gtid items عناصر لحاوية grid  في لغة CSS.


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

  1. قم بإنشاء عنصر في صفحة HTML وليكن div.
  2. قم بإضافة خاصية display:grid أو خاصية display:inline-grid.
  3. قم بإضافة بعض العناصر داخل حاوية grid.
  4. قم بإضافة خاصية 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;
}
مصطلحات الدرس
Grid
Grid

شبكي

Item
Item

عنصر

Container
Container

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

Column
Column

عامود

Example
Example

مثال

Result
Result

نتيجة

Row
Row

صف

Property
Property

خاصية

Area
Area

منطقة

Naming
Naming

تسمية

Order
Order

ترتيب

Layout
Layout

تخطيط

Small
Small

صغير

Devices
Devices

أجهزة

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

Cascading Style Sheets

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

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

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