CSS

CSS Grid Auto Flow
خاصية grid-auto-flow مع grid في لغة CSS

سوف تتعلم في هذا الدرس خاصية grid-auto-flow في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.

التاريخ

20 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

794

المواضيع

24
الشروحات chevron_left CSS Grid Auto Flow chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

تستخدم خاصية grid-auto-flow في لغة CSS والقيمة auto للتحكم في عرض العناصر علي هيئة صفوف داخل حاوية grid وهي القيمة الأفتراضية.
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

تستخدم خاصية grid-auto-flow في لغة CSS والقيمة column للتحكم في عرض العناصر علي هيئة أعمدة داخل حاوية grid.
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

تستخدم خاصية grid-auto-flow في لغة CSS والقيمة dense للتحكم في عرض العناصر لسد أي فجوات داخل الحاوية.
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

تستخدم خاصية grid-auto-flow في لغة CSS والقيمة row dense للتحكم في عرض العناصر لسد أي فجوات داخل في صفوف الحاوية.
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

تستخدم خاصية grid-auto-flow في لغة CSS والقيمة row dense للتحكم في عرض العناصر لسد أي فجوات داخل في صفوف الحاوية.
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;
}
هام
لاحظ ترتيب ترقيم العناصر داخل الحاوية للمقارنة مع خاصية grid-auto-flow مع القيمة row dense والقيمة column dense في لغة CSS.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.