CSS

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

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

التاريخ

18 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

364

المواضيع

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

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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات