في هذا الدرس 4تصفّح المواضيع
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.
HTML
grid-column-gap:value;
CSS grid-column-gap values
قيم خاصية grid-column-gap في لغة CSS.
HTML
grid-column-gap: length;
CSS grid column gap length normal
خاصية column-gap مع القيمة normal في لغة CSS
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.
HTML
.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
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.
HTML
.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
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.
HTML
.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;
}
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.