CSS Grid Content
محتوي حاوية grid في لغة CSS
سوف تتعلم في هذا الدرس جميع الخصائص التي تتحكم في محتوي حاوية والعناصر التي ينطبق عليها نظام grid في لغة CSS.
التاريخ
18 نوفمبر 2022
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
1025
المواضيع
24
CSS Grid Content
محتوي حاوية grid في لغة CSS
</>
CSS Grid justify content
خاصية justify-content مع grid في لغة CSS
تستخدم خاصية justify-content للتحكم في محاذاة العناصر الداخلية لحاوية grid في لغة CSS.
- جميع قيم خاصية justify-content تعمل مع grid لمزيد من القيم شاهد الدرس.
.grid-container { display: grid; grid-gap: 10px; grid-template-columns:100px 100px 100px; background-color: #2196F3; padding: 10px; justify-content:center; }
</>
CSS order grid items
ترتيب عناصر حاوية grid في لغة CSS
نستطيع من خلال ال Grid layout وضع العناصر في المكان الذي نريد وتحديد اماكنها واحجامها مع احجام الشاشات المختلفة كما نريد فيمكنك تغيير حجم نافذة المتصفح لتري التغيير
.one { grid-row-start: 2; }
CSS order property with grid
خاصية order مع عناصر حاوية grid في لغة CSS.
.one { order: 6; }
</>
CSS grid align content
خاصية align content مع grid في لغة CSS
تستخدم خاصية align-content للتحكم في محاذاة العناصر الداخلية لحاوية بشكل عمودي grid في لغة CSS.
- جميع قيم خاصية align-content تعمل مع grid لمزيد من القيم شاهد الدرس.
.grid-container { display: grid; grid-gap: 10px; grid-template-columns:auto auto auto; background-color: #2196F3; padding: 10px; height:300px; align-content:center; }