CSS Grid Gap
خاصية grid-gap مع Grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-gap في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
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
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
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
