html - Can I get my grid to behave like I want without having to manually add in grid-items with Javascript?

Question

.grid-container1 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: 100%;
  border: 1px solid pink;
  background-color: grey;
}

.grid-container2 {
  display: grid;
  grid-template-columns: 75%;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: 100%;
  border: 1px solid pink;
  background-color: grey;
}

.one {
  background-color: aqua;
}

.two {
  background-color: beige;
}

.three {
  background-color: orangered;
}

<div class="grid-container1">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

<div class="grid-container2">
  <div></div>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

Answer 1

Pseudo element can help here. Resize the screen to see the result:

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid pink;
  background-color: grey;
}

@media (min-width:800px) {
  .grid-container {
    grid-template-columns: 75%;
  }
  .grid-container::before {
    content: "";
  }
}

.grid-container :nth-child(odd) {
  background-color: aqua;
}

.grid-container :nth-child(even) {
  background-color: beige;
}

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>