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

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

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

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

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

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


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

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

CSS grid grid-row-gap syntax

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

HTML 
grid-row-gap:value;

CSS grid-row-gap values

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

HTML 
grid-row-gap:length|normal|initial|inherit;

CSS grid row gap length px خاصية grid-row-gap مع القيمة length بوحدة بكسل في لغة CSS

تستخدم خاصية grid-row-gap في لغة CSS مع القيمة length لتحدد المسحات الفارغة أو الفجوات بين صفوف حاوية grid بوحده [px].
جرّب بنفسك

CSS grid row gap length px

خاصية column-gap مع القيمة length في لغة CSS.

HTML 
.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-row-gap:50px;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

CSS grid row gap length percentage خاصية grid-row-gap مع القيمة length بالنسبة المئوية في لغة CSS

تستخدم خاصية grid-row-gap في لغة CSS مع القيمة length لتحدد المسحات الفارغة أو الفجوات بين صفوف حاوية grid بالنسبة المئوية [%].
جرّب بنفسك

CSS grid row gap length percentage

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

HTML 
.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-row-gap:10%;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
  height:400px;
}
جرّب بنفسك

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

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

CSS grid row gap length normal

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

HTML 
.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-row-gap:normal;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

CSSgrid column gap and grid row gap خاصية grid-row-gap و grid-row-gap في لغة CSS

أمثلة علي خاصية grid column gap و grid row gap معاً لعمل مساحات فارغة بين الصفوف والأعمدة في لغة  CSS.
جرّب بنفسك

CSSgrid column gap and grid row gap px

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

HTML 
.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-column-gap:50px;
  grid-row-gap:50px;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

CSSgrid column gap and grid row gap percentage

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

HTML 
.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-column-gap:5%;
  grid-row-gap:5%;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
  height:400px;
}
جرّب بنفسك

مشاركة

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

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