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

Результат:

Қуйидаларни ҳам кўринг