grid-auto-flow xususiyati

grid-auto-flow xususiyati griddagi elementlarning avtomatik joylashuvini belgilaydi. row - qatorlarni elementlar bilan to'ldirish, column - ustunlarni to'ldirish, dense - elementlarni griddagi barcha bo'sh joylarga joylashtirish; row dense - elementlarni har bir qatorni va griddagi barcha bo'sh joylarni to'ldirib joylashtirish; column dense - elementlar bilan har bir ustun va griddagi barcha bo'sh joylarni to'ldirish.

Sintaksis

cssselektor {
  grid-auto-flow: gridning to'ldiriladigan qismi;
}

Misol

Keling, jadvaldagi barcha qatorlarni to'ldiramiz:

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

Результат:

Misol

Endi esa jadvaldagi barcha ustunlarni elementlar bilan to'ldiramiz:

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

Результат:

Misol

Keling, barcha elementlarni jadvalda hech qanday bo'sh joy qolmasligi uchun joylashtiramiz:

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

Результат:

Misol

Endi keling, elementlar bilan qatorlardagi barcha bo'sh joylarni to'ldiramiz:

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

Результат:

Misol

Keling, oldingi misolni o'zgartiramiz, elementlar ustunlardagi barcha bo'sh joylarni to'ldirishi uchun:

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

Результат:

Shuningdek qarang