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

Результат:

මෙයද බලන්න