css grid - changing div placement inside a defined grid keeps the original layout

Problem is I have a grid defined to a sidebar area and a main area. But when I change the order of the "sidebar" with the "main" div, the structure stays the same. as if the structure of the html does not matter.

The HTML:

<div class="gridcontainer">
  <div class="sideArea">
  </div>
  <div class="mainArea">
  </div>
</div>

The formated HTML:

<div class="gridcontainer">
  <div class="mainArea">
  </div>
  <div class="sideArea">
  </div>
</div>

The CSS:

.gridcontainer{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:"sidebar main main";
    grid-column-gap:50px;
}
.mainArea {
    border: 1px solid #000;
    grid-area: main;
    height:600px;
}
.sideArea {
    border: 1px solid red;
    grid-area: sidebar;
    position: relative;
    height:600px;
}

Yet its rendered and desplayed in the same original order. Thought maybe there a direction property like in flex-box. But there's only grid-auto-columns grid-auto-rows which are repsonsible for the handling of extra generated columns or raws.