如何在網格中移動元素？

Question

https://codepen.io/tphhelps5/pen/GRgBMMZ

 const output = document.getElementById("output"); let reset = document.querySelector(".reset"); function resetOutput() { output.innerHTML = "0"; }

 * { background-color: silver; } h1 { text-align: center; } #calc_buttons { display: grid; align-content: center; justify-content: center; min-height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(6); } #calc_buttons > button { cursor: pointer; font-size: 1.5rem; border: 1px solid white; outline: none; background-color: #6699cc; width: 100px; height: 80px; } #calc_buttons > button:hover { background-color: rgba(255, 255, 255, .9); }

 <h1> My First JavaScript Calculator </h2> <div id="calculator"> <div id="calc_display"> <span id="output"></span> </div> <div id="calc_buttons"> <button onclick="resetOutput()" id="num" class="reset" data-equals="reset">C</button> <button id="num" class="seven">7</button> <button id="num" class="eight">8</button> <button id="num" class="nine">9</button> <button id="num" class="four">4</button> <button id="num" class="five">5</button> <button id="num" class="six">6</button> <button id="num" class="three">3</button> <button id="num" class="two">2</button> <button id="num" class="one">1</button> <button id="num" class="zero">0</button> <button id="num" class="decimal" data-action="decimal">.</button> <button id="num" class="equals" data-equals="equal">=</button> <button id="num" class="minus" data-action="minus">-</button> <button id="num" class="plus" data-action="plus">+</button> <button id="num" class="divide" data-action="divide">/</button> <button id="num" class="multiply" data-action="multiply">*</button> </div>

我正在開發一個計算器應用程序，我正在嘗試將數字向下移動。 我想要第一行的“C”或“重置”按鈕，后面的行是“7、8、9、*”“4、5、6、-”“1、2、3+”“ 0, ., ="

有沒有人對如何更輕松地移動這些元素有任何想法？ 我知道我可以用邊距移動它們，但我知道必須有一種更簡單的方法來完成這個挑戰。 謝謝！

Answer 1

只需將其添加到您的 css 中：

.reset {
    grid-column: span 4;
}

並像這樣對按鈕進行排序：

<button id="num" class="seven">7</button>
<button id="num" class="eight">8</button>
<button id="num" class="nine">9</button>

<button id="num" class="multiply" data-action="multiply">*</button>

<button id="num" class="four">4</button>
<button id="num" class="five">5</button>
<button id="num" class="six">6</button>

<button id="num" class="minus" data-action="minus">-</button>

<button id="num" class="three">3</button>
<button id="num" class="two">2</button>
<button id="num" class="one">1</button>

<button id="num" class="plus" data-action="plus">+</button>

<button id="num" class="zero">0</button>

<button id="num" class="decimal" data-action="decimal">.</button>
<button id="num" class="equals" data-equals="equal">=</button>
<button id="num" class="divide" data-action="divide">/</button>

https://codepen.io/zuyas/pen/XWJPPqM

請注意：您應該切換 id 和 class 值。 ID 必須是唯一的。

Answer 2

如果我理解，您可以使用:nth-child(-n + x)來選擇子組並將它們設置在行或列上，而不是單獨過濾它們。

例子

 const output = document.getElementById("output"); let reset = document.querySelector(".reset"); function resetOutput() { output.innerHTML = "0"; }

 * { background-color: silver; } h1 { text-align: center; } #calc_buttons { display: grid; align-content: center; justify-content: center; min-height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(6); } #calc_buttons > button { cursor: pointer; font-size: 1.5rem; border: 1px solid white; outline: none; background-color: #6699cc; width: 100px; height: 80px; } #calc_buttons > button:hover { background-color: rgba(255, 255, 255, .9); } button:nth-child(-n + 13 ) { grid-row:5; } button:nth-child(-n + 10 ) { grid-row:4; }button:nth-child(-n + 7 ) { grid-row:3; } button:nth-child(-n + 4 ) { grid-row:2; } button:nth-child(1) { grid-row:1; } button:nth-child(13) ~button, #calc_buttons:before { grid-column:4 } /* a pseudo for laziness and push last buttons 1 row down */ #calc_buttons:before { content:''; }

 <h1> My First JavaScript Calculator </h2> <div id="calculator"> <div id="calc_display"> <span id="output"></span> </div> <div id="calc_buttons"> <button onclick="resetOutput()" id="num" class="reset" data-equals="reset">C</button> <button id="num" class="seven">7</button> <button id="num" class="eight">8</button> <button id="num" class="nine">9</button> <button id="num" class="four">4</button> <button id="num" class="five">5</button> <button id="num" class="six">6</button> <button id="num" class="three">3</button> <button id="num" class="two">2</button> <button id="num" class="one">1</button> <button id="num" class="zero">0</button> <button id="num" class="decimal" data-action="decimal">.</button> <button id="num" class="equals" data-equals="equal">=</button> <button id="num" class="minus" data-action="minus">-</button> <button id="num" class="plus" data-action="plus">+</button> <button id="num" class="divide" data-action="divide">/</button> <button id="num" class="multiply" data-action="multiply">*</button> </div>

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

:nth-child(-n+3)

代表前三個元素。 [=-0+3, -1+3, -2+3]

那是為了信息（並且很容易知道）， since grid-column: span 4; 已經在評論和回答中給出