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