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

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

সিনট্যাক্স

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

উদাহরণ

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

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

css#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;
}

Результат:

উদাহরণ

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

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

css#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;
}

Результат:

উদাহরণ

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

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

css#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;
}

Результат:

উদাহরণ

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

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

css#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;
}

Результат:

উদাহরণ

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

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

css#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;
}

Результат:

আরও দেখুন