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

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

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

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

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.

HTML 
grid-gap:value;

CSS grid-gap values

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

HTML 
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.

HTML 
.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.

HTML 
.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.

HTML 
.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;
}
جرّب بنفسك

مشاركة

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

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