عرض مصدر CSS/grid-auto-flow

<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-auto-flow</code>}}</noinclude>
الخاصية <code>grid-auto-flow</code> في CSS تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.<syntaxhighlight lang="css">
/* كلمات محجوزة */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* القيم العامة */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>row</code>
|-
! scope="row" |تُطبَّق على
|حاويات grid.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

|}

== أمثلة ==
هذا مثال عن استخدام الكلمة المحجوزة <code>column</code> مع الخاصية <code>grid-auto-flow</code>، حاول تجربة القيم الأخرى لتعرف الفرق بينها:<syntaxhighlight lang="html">
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column;  /* or 'row', 'row dense', 'column dense' */
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|57.0
|52.0
|10 (مع السابقة <code>-ms-</code>)
|44
|10.1
|}
الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

== البنية العامة ==
تقبل الخاصية <code>grid-auto-flow</code> أحد الأشكال الآتية:
* كلمة محجوزة واحدة:  <code>row</code> أو <code>column</code> أو <code>dense</code>.
* كلمتين محجوزتين: <code>row dense</code> أو <code>column dense</code>.

=== القيمة <code>row</code> ===
خوارزمية تحديد مواضع عناصر grid التلقائية ستملأ كل سطر بالعناصر، وستضيف أسطر جديدة إن لزم الأمر.

=== القيمة <code>column</code> ===
خوارزمية تحديد مواضع عناصر grid التلقائية ستملأ كل عمود بالعناصر، وستضيف أعمدة جديدة إن لزم الأمر.

=== القيمة <code>dense</code> ===
هذه الكلمة المحجوزة تقول أنَّ على خوارزمية تحديد المواضع التلقائية يجب أن تضع العناصر متراصةً على بعضها، والتي تحاول أن تملأ المسافات الفارغة في الشبكة باكرًا، وإذا أتت عناصر أصغر لاحقًا فقد تؤدي إلى جعل الشبكة غير مرتبة.

إذا لم تُحدَّد هذه القيمة، فستستخدم الخوارزمية sparse التي تجعل العناصر «متناثرة»، ولا تؤدي إلى ملء الفراغات بين عناصر grid، لكنها ستجعل الشبكة تبدو وأنها مرتبة، حتى لو أدى ذلك إلى ترك فجوات بين العناصر.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid-auto-flow: [ row | column ] || dense;
</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow CSS Grid Layout]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Grid]]