CSS

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

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

التاريخ

08 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

640

المواضيع

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

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

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

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


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

  • length وهو رقم بواحدات مختلفة px او rem او نسبة مئوية.
CSS column-count syntax

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

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

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

grid-column-gap: length;

</> CSS grid column gap length normal
خاصية column-gap مع القيمة normal في لغة CSS

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

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

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

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

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

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

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

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

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

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

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