css grid order

css

ppp896 2021-10-22 20:10:01 ‧ 1130 瀏覽

分享至

css grid order

CSS在外國影片中範例grid-item中的CSS使用order=-1變成第一個改變排序,但在grid使用order排序並不是很好用,好像只能改變成第一個或最後一個grid-item?其他數值好像無效?

grid-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: #2196F3;
gap: 10px;
}
a{
order: -1;
}

div class="grid-container"
    div class="grid-item ">1</div
    div class="grid-item">2</div
    div class="grid-item">3</div
    div class="grid-item a">4</div
    div class="grid-item">5</div
    div class="grid-item">6</div
    div class="grid-item">7</div
    div class="grid-item">8</div
    div class="grid-item">9</div
/div>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Mao

iT邦研究生 5 級 ‧ 2021-10-22 20:33:32

最佳解答

你就把 order 想像成幫你調換顯示順序

用你的範例：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item a">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

order 是負數的話，
而其他 grid-item 的 order 預設值為 0，
會幫你把 a 往前顯示，當然如果是正數，就會往後顯示
而顯示順序會依據你的 order 由小排到大

<!--  當然實際 DOM 並不是長這樣，只是為了讓你了解  -->
<div class="grid-container">
  <div class="grid-item a">4</div>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

你可以嘗試看看我用的 Codepen 示範
希望你能了解