CSS Grid Column Gap
خاصية grid-column-gap مع Grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية column-gap في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
08 نوفمبر 2022
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
1137
المواضيع
24
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; }