Хусусияти 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;
}

Результат:

Инчунин нигаред