CSS Grid Auto Flow
خاصية grid-auto-flow مع grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-auto-flow في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Grid Auto Flow
خاصية grid-auto-flow مع grid في لغة CSS
</>
CSS grid auto flow
خاصية grid-auto-flow مع grid في لغة CSS
تستخدم خاصية grid-auto-flow مع حاوية grid في لغة CSS للتحكم في عرض العناصر الداخلية للحاوية grid في صفوف أو أعمدة.
قيم خاصية grid-auto-flow في لغة CSS:
- row هي القيمة الأفتراضية, وهي تتحكم في عرض العناصر علي هيئة صفوف.
- column تتحكم في عرض العناصر علي هيئة أعمدة.
- dense تتحكم في عرض العناصر لسد أي فجوات داخل الحاوية.
- row dense تتحكم في عرض العناصر لسد أي فجوات داخل في صفوف الحاوية.
- column dense تحكم في عرض العناصر لسد أي فجوات داخل في أعمدة الحاوية.
CSS grid-auto-flow syntax
طريقة كتابة خاصية grid-auto-flow في لغة CSS.
grid-auto-flow:value;
CSS grid auto flow values
قيم خاصية grid-auto-flow في لغة CSS.
grid-auto-flow:row|column|dense|row dense|column dense;
</>
CSS grid auto flow row
خاصية grid-auto-flow مع القيمة row في لغة CSS
CSS grid auto flow row
خاصية grid-auto-flow مع القيمة row في لغة CSS.
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-flow:row;
}
</>
CSS grid auto flow column
خاصية grid-auto-flow مع القيمة column في لغة CSS
CSS grid auto flow column
خاصية grid-auto-flow مع القيمة column في لغة CSS.
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-flow:column;
}
</>
CSS grid auto flow dense
خاصية grid-auto-flow مع القيمة dense في لغة CSS
CSS grid auto flow dense
خاصية grid-auto-flow مع القيمة dense في لغة CSS.
.grid-container
{
display: grid;
background-color: #2196F3;
grid-template-columns:auto auto;
padding: 10px;
grid-auto-flow:dense;
}
</>
CSS grid auto flow row dense
خاصية grid-auto-flow مع القيمة row dense في لغة CSS
CSS grid auto flow row dense
خاصية grid-auto-flow مع القيمة row dense في لغة CSS.
.grid-container
{
display: grid;
background-color: #2196F3;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
padding: 10px;
grid-auto-flow:row dense;
}
</>
CSS grid auto flow column dense
خاصية grid-auto-flow مع القيمة column dense في لغة CSS
CSS grid auto flow column dense
خاصية grid-auto-flow مع القيمة column dense في لغة CSS.
.grid-container
{
display: grid;
background-color: #2196F3;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
padding: 10px;
grid-auto-flow:column dense;
}
هام
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
