Thuộc tính grid-auto-flow

Thuộc tính grid-auto-flow thiết lập cách sắp xếp tự động các phần tử trong Grid. Có thể có các giá trị row - lấp đầy các phần tử theo hàng ngang, column - theo cột dọc, dense - đặt các phần tử vào tất cả các vị trí trống trong lưới; row dense - sắp xếp các phần tử, lấp đầy từng hàng và tất cả các khoảng trống trong lưới; column dense - lấp đầy các phần tử theo từng cột và tất cả khoảng trống trong Grid.

Cú pháp

cssbộ chọn {
  grid-auto-flow: phần-cần-lấp-đầy-của-grid;
}

Ví dụ

Hãy lấp đầy tất cả các hàng trong Grid:

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

Результат:

Ví dụ

Bây giờ hãy lấp đầy các phần tử vào tất cả các cột trong Grid:

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

Результат:

Ví dụ

Hãy sắp xếp tất cả các phần tử trong Grid để không còn khoảng trống:

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

Результат:

Ví dụ

Bây giờ hãy lấp đầy các phần tử vào tất cả khoảng trống trong các hàng:

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

Результат:

Ví dụ

Hãy thay đổi ví dụ trước đó, để các phần tử lấp đầy tất cả khoảng trống trong các cột:

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

Результат:

Xem thêm