iT邦幫忙

0

css grid order

css

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>

1 個回答

1
Mao
iT邦新手 2 級 ‧ 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-itemorder 預設值為 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 示範
希望你能了解

ppp896 iT邦新手 5 級 ‧ 2021-10-23 09:13:38 檢舉

感謝,解釋、說明清楚,思考中,謝謝.

我要發表回答

立即登入回答