Can I make the grid behave the way I want without manually adding grid items using Javascript?

Tonione 120 

.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>

grid container = GC. grid item = GI.

The first GC successfully allowed me to add any number of GIs and make each GI take equal space.

At some point (using media queries) I want the layout to look like I did in GC2 - any number of background-color'd GI's all equally take the last 25% of widththeir GC . Note, however, that I had to first introduce an empty GI, the unit spanning 75% of the GC, widthto achieve this. To me this seems annoying since I have to use JavaScript. Is there anyway to achieve what I want with just CSS?

edit

Just came up with this idea: keep mine blank div, only set it display: block/nonewhen needed, change it when needed too grid-auto-columns: initial/75%. Any ideas?

Accompanying Afif

Pseudo-elements can help here. Resize the screen to see the results:

.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>

Another idea is to simply use padding as it should be an empty space:

.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 {
    padding-left: 75%;
  }
}

.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>

Related

How can I make this button behave using pure Javascript?

shooting I want to make this button have this behavior. clicked Disable button do something enable button Alert success text. The script should be inline . Here is my current button script. <button type="button" onclick="this.disabled=true;savemain();this.disa

How can I make the grid responsive?

Diego Diaz I'm working on CSS grid design and it's working fine on desktop view. ¿ How can I make it responsive? I'll show a section with a background image and add a few articles later to show a grid over the image. Like I said, it worked fine on desktop, but

How can I make a similar looking grid?

3D Ancient I'm going to be writing some desktop applications that simulate something, and I thought it would be a good opportunity to try some new technology. Since the app is for Windows and I saw a Visual Studio Community version somewhere, I decided to try

How can I make the grid responsive?

Diego Diaz I'm working on CSS grid design and it's working fine on desktop view. ¿ How can I make it responsive? I'll show a section with a background image and add a few articles later to show a grid over the image. Like I said, it worked fine on desktop, but

How can I make the grid cover the numbers?

plum I am new to RRDtool . I have generated a graph with grid (-grid-dash 1:0), LINE (LINE1:rt#4e9a06) and also colored areas (AREA:rt#4e9a06) between the line and the x-axis. I noticed that the grid still shows up in the colored area. I am wondering if there

How can I make the grid responsive?

Diego Diaz I'm working on CSS grid design and it's working fine on desktop view. ¿ How can I make it responsive? I'll show a section with a background image and add a few articles later to show a grid over the image. Like I said, it worked fine on desktop, but

How can I make a heatmap in pygame on Grid

JJH562 I'm making a grid on pygame and I'd like to know how I can do this so that starting from a point on that grid, the color changes as you get further from that point, e.g. from dark blue to into a square, light blue when it becomes a ten square away. I'm

How can I make a heatmap in pygame on Grid

JJH562 I'm making a grid on pygame and I'd like to know how I can do this so that starting from a point on that grid, the color changes as you get further from that point, e.g. from dark blue to into a square, light blue when it becomes a ten square away. I'm

How can I make a similar looking grid?

3D Ancient I'm going to be writing some desktop applications that simulate something, and I thought it would be a good opportunity to try some new technology. Since the app is for Windows and I saw a Visual Studio Community version somewhere, I decided to try