Move only one item in CSS Grid - css

Question

Okay i know i can move my blocks using grid-template-areas or order.
But my question is: can i move only one item to another place without changing order of every other block? Because that is a few lines more of code and i wonder if it can be made easier?
I have a grid:
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
I want the item on the 1-st column and 1-st row to change position to 2-nd column and 1-st row. To switch places with the other block.

Answer 1

Simply specify the position using grid-column (and grid-row if needed) and make sure to use grid-auto-flow:dense to avoid empty areas:
.box {
display:grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: dense;
grid-gap:10px;
}
.box * {
height:50px;
background:red;
color:#fff;
}
<div class="box">
<div style="grid-column:2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>

Answer 2

You can still use order. Just set all the children to order:1 and then set the order of the chosen item to 0
.grid {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
}
.item {
border: 1px solid green;
padding: 1em;
}
.grid * {
order:1;
}
.grid :nth-child(2) {
order:0;
}
<div class="grid">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>