Уласцівасць 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;
}

Результат:

Глядзіце таксама