الخاصية grid-auto-flow

الخاصية grid-auto-flow في CSS تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.

/* كلمات محجوزة */
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;

القيمة الابتدائية	row
تُطبَّق على	حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

أمثلة

هذا مثال عن استخدام الكلمة المحجوزة column مع الخاصية grid-auto-flow، حاول تجربة القيم الأخرى لتعرف الفرق بينها:

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>

شيفرة 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;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57.0	52.0	10 (مع السابقة -ms-)	44	10.1

الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

البنية العامة

تقبل الخاصية grid-auto-flow أحد الأشكال الآتية:

• كلمة محجوزة واحدة: row أو column أو dense.
• كلمتين محجوزتين: row dense أو column dense.

القيمة row

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

القيمة column

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

القيمة dense

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

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

البنية الرسمية

grid-auto-flow: [ row | column ] || dense;

مصادر ومواصفات

• مواصفة CSS Grid Layout.