.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;
}

جربها بنفسك

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Grid Content CSS