صفت grid-auto-flow در css مکان آیتم grid نامشخص

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت grid-auto-flow در زبان css توضیحاتی را ارائه نماییم.

ویژگی grid-auto-flow در سطح ۱ زبان طراحی سی اس اس یعنی ماژول سی اس اس گرید سطح ۱ معرفی شده است.

صفت grid-auto-flow در css مکان آیتم های grade نامشخص

معرفی ویژگی کاربردی grid-auto-flow در زبان طراحی سی اس اس

توسط خاصیت grid-auto-flow می توانیم مکان آیتم های گرید که به شکل واضح مشخص نشده اند را به صورت خودکار مشخص نماییم.

مقادیر صفت کاربردی grid-auto-flow در زبان طراحی سی اس اس

صفت کاربردی grid-auto-flow که در ماژول سی اس اس گرید سطح ۱ معرفی شده است، ۵ مقدار می پذیرد که عبارت است از:

  1. مقدار row
  2. مقدار column
  3. مقدار dense
  4. مقدار row dense
  5. مقدار column dense

صفت grid-auto-flow در css مکان آیتم grid نامشخص

صفت grid-auto-flow در css مکان آیتم grid نامشخص - سایت آموزی

مقدار row درون خاصیت grid-auto-flow در زبان سی اس اس

اگر خاصیت grid-auto-flow را برابر با مقدار row قرار دهیم، یعنی می خواهیم آیتم های گرید به همان حالت عادی خود یعنی ردیفی کنار هم قرار بگیرند.

مقدار row به عنوان مقدار پیش فرض خصوصیت grid-auto-flow می باشد.

مثال براساس مقدار row برای خاصیت grid-auto-flow

[html] div {grid-auto-flow: row;} [/html]

مقدار column درون خاصیت grid-auto-flow در زبان سی اس اس

اگر خاصیت grid-auto-flow را برابر با مقدار column قرار دهیم، یعنی می خواهیم عناصر بصورت ستونی چیده شده یعنی ستون به ستون آیتم ها مکان ها را پر می کنند.

مثال براساس مقدار column برای خاصیت grid-auto-flow

[html] div {grid-auto-flow: column;} [/html]

صفت grid-auto-flow در css مکان آیتم grid نامشخص

مقدار dense درون خاصیت grid-auto-flow در زبان سی اس اس

اگر خاصیت grid-auto-flow را برابر با مقدار dense قرار دهیم، یعنی می خواهیم الگوریتم چیدمان ، بعد از چیدمان عادی آیتم های گرید ، یک بار دیگر به عقب بر گردد. و اگر فضای خالی در آیتم گرید وجود داشته باشد آن فضا را با اولین آیتم گریدی که بعد از آن فضا وجود دارد ، پر کند.

مثال براساس مقدار dense برای خاصیت grid-auto-flow

[html] div {grid-auto-flow: dense;} [/html]

مقدار row dense درون خاصیت grid-auto-flow در زبان سی اس اس

اگر خاصیت grid-auto-flow را برابر با مقدار row dense قرار دهیم، یعنی می خواهیم الگوریتم چیدمان ، بعد از چیدمان عادی آیتم های گرید ، یک بار دیگر به عقب بر گردد. و اگر فضای خالی در ردیف آیتم گرید وجود داشته باشد آن فضا را با اولین ردیف آیتم گریدی که بعد از آن فضا وجود دارد ، پر کند.

مثال براساس مقدار row dense برای خاصیت grid-auto-flow

[html] div {grid-auto-flow: row dense;} [/html]

مقدار column dense درون خاصیت grid-auto-flow در زبان سی اس اس

اگر خاصیت grid-auto-flow را برابر با مقدار column dense قرار دهیم، الگوریتم چیدمان ، بعد از چیدمان عادی آیتم های گرید ، یک بار دیگر به عقب بر گردد. و اگر فضای خالی در ستون آیتم گرید وجود داشته باشد آن فضا را با اولین ستون آیتم گریدی که بعد از آن فضا وجود دارد ، پر کند.

مثال براساس مقدار column dense برای خاصیت grid-auto-flow

[html] div {grid-auto-rows: column dense;} [/html]

صفت grid-auto-flow در css مکان آیتم grid نامشخص - سایت آموزی

بررسی خاصیت grid-auto-flow از نظر نسخه زبان طراحی سی اس اس

خصوصیت grid-auto-flow در سطح ۱ زبان طراحی سی اس اس یعنی ماژول CSS گرید سطح ۱ معرفی شده است.

بررسی ساختاری خصوصیت grid-auto-flow

پشتیبانی مرورگرهای اینترنتی از خاصیت grid-auto-flow در زبان طراحی سی اس اس

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

صفت grid-auto-flow در css مکان آیتم grid نامشخص – اختصاصی سایت آموزی