CSS

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

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

التاريخ

10 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

828

المواضيع

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

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

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

grid-row-gap:value;
CSS grid-row-gap values

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

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.

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

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

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

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

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

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

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