CSS

CSS Grid Gap
خاصية grid-gap مع Grid في لغة CSS

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

التاريخ

09 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

806

المواضيع

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

CSS Grid Gap
خاصية grid-gap مع grid في لغة CSS

</> CSS Grid Gap
خاصية grid-gap مع grid في لغة CSS

تستخدم خاصية grid-gap مع العناصر الداخلية لحاوية grid في لغة CSS هي عبارة عن إختصار لخاصيتين وهم grid-row-gap و grid-column-gap, يمكن كتابة قيميتن أو قيمة واحدة مشتركة.


قيم خاصية grid-gap في لغة CSS:

  • length تحدد المسحات الفارغة أو الفجوات بين صفوف حاوية grid بوحدات مختلفة مثل [px-rem-rm-%-normal].
CSS grid-gap syntax

طريقة كتابة خاصية grid-gap في لغة CSS.

grid-gap:value;
CSS grid-gap values

قيم خاصية grid-gap في لغة CSS.

grid-gap:grid-row-gap grid-column-gap;

</> CSS grid gap px
خاصية grid-gap مع وحدة بيكسل في لغة CSS

تستخدم خاصية grid-gap في لغة CSS والقيمة بيكسل px لتحديد فجوات أو مساحات ثابتة بين الأعمدة والصفوف معاً.
CSS grid gap px

خاصية grid مع القيمة row-gap في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-gap:50px;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
}

</> CSS grid gap percentage
خاصية grid-gap مع نسبة مئوية في لغة CSS

تستخدم خاصية grid-gap في لغة CSS والقيمة بالنسبة المئوية لتحديد فجوات أو مساحات متغيرة بين الأعمدة والصفوف معاً.
CSS grid gap percentage

خاصية grid مع القيمة percentage في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-gap:10%;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
  height:400px;
}

</> CSS grid gap two values
خاصية grid-gap وقيميتين في لغة CSS

تستخدم خاصية grid-gap في لغة CSS والقيمة بوحدة بيكسل وقيمة المساحات بين الصفوف مختلفه عن قيمة المساحات بين الأعمدة فتكتب قميتين بجانب بعض ونفصل بينهم مساحة بيضاء.
CSS grid gap two values

خاصية grid مع قميتين مختلفتين في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-gap:50px 25px;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
  height:400px;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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