انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 103
دورة لغة CSS

محتوي حاوية grid في لغة CSSCSS Grid Content

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,740
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Grid justify content خاصية justify-content مع grid في لغة CSS

تستخدم خاصية justify-content للتحكم في محاذاة العناصر الداخلية لحاوية grid في لغة CSS.

  • جميع قيم خاصية justify-content تعمل مع grid لمزيد من القيم شاهد الدرس.
جرّب بنفسك
HTML 
.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 وضع العناصر في المكان الذي نريد وتحديد اماكنها واحجامها مع احجام الشاشات المختلفة كما نريد فيمكنك تغيير حجم نافذة المتصفح لتري التغيير

جرّب بنفسك
HTML 
.one
{
  grid-row-start: 2;
}
جرّب بنفسك
جرّب بنفسك

CSS order property with grid

خاصية order مع عناصر حاوية grid في لغة CSS.

HTML 
.one
{
  order: 6;
}
جرّب بنفسك

CSS grid align content خاصية align content مع grid في لغة CSS

تستخدم خاصية align-content للتحكم في محاذاة العناصر الداخلية لحاوية بشكل عمودي grid في لغة CSS.

  • جميع قيم خاصية align-content تعمل مع grid لمزيد من القيم شاهد الدرس.
جرّب بنفسك
HTML 
.grid-container
{
  display: grid;
  grid-gap: 10px;
  grid-template-columns:auto auto auto;
  background-color: #2196F3;
  padding: 10px;
  height:300px;
  align-content:center;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…