grid-auto-flow প্রপার্টি

grid-auto-flow প্রপার্টি গ্রিডে উপাদানগুলির স্বয়ংক্রিয় বসানো নির্দিষ্ট করে। এর মান হতে পারে row - সারি গুলোকে উপাদান দিয়ে পূরণ করে, column - কলাম গুলোকে, dense - গ্রিডের সব খালি জায়গায় উপাদান বসায়; row dense - প্রতিটি সারি এবং গ্রিডের সব খালি জায়গা পূরণ করে উপাদান বসায়; column dense - প্রতিটি কলাম এবং গ্রিডের সব খালি জায়গা উপাদান দিয়ে পূরণ করে।

সিনট্যাক্স

সিলেক্টর {
	grid-auto-flow: গ্রিডের পূরণযোগ্য অংশ;
}

উদাহরণ

আসুন টেবিলের সব সারি পূরণ করি:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এবং এখন টেবিলের সব কলাম উপাদান দিয়ে পূরণ করি:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

আসুন সব উপাদান টেবিলে বসাই যাতে কোন খালি জায়গা না থাকে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এবং এখন উপাদান দিয়ে সারিগুলোর সব খালি জায়গা পূরণ করি:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

আসুন আগের উদাহরণটি পরিবর্তন করি, যাতে উপাদানগুলি কলামগুলোর সব খালি জায়গা পূরণ করে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: column dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

আরও দেখুন

grid প্রপার্টি,
যা কলাম এবং সারির প্রপার্টিগুলোর সংক্ষিপ্ত রূপ নির্দিষ্ট করে
grid-auto-rows প্রপার্টি,
যা অন্তর্নিহিত গ্রিডে সারির সংখ্যা এবং প্রস্থ নির্দিষ্ট করে
grid-template-columns প্রপার্টি,
যা গ্রিডে কলামের সংখ্যা এবং প্রস্থ নির্দিষ্ট করে
grid-template-rows প্রপার্টি,
যা গ্রিডে সারির সংখ্যা এবং প্রস্থ নির্দিষ্ট করে