CSS Grid Zigzag layout with percentage width in overflow-x container

Question

I want three boxes in a row in my zigzag grid layout, and more boxes appear when the user scrolls to the right. The boxes' width in pixels comes out well, but not in percentages. Would it be possible to fit a 3 x 2 layout in percentages that fit in the parent container?

My expectation: (When I use blue boxes width in pixel)

Reality: (When I change the width of the blue boxes from pixels to percentages)

CSS:

.alpha{
    overflow-x: auto;
    width: 100%;
}
.bravo{
    display:grid;   
    grid-gap:10px; 
    grid-template-columns: repeat;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
}
.charlie{
    color: white;
    background: blue;
    height: 100px;
    width: 300px;
}

HTML

 <div class="alpha">
     <div class="bravo">
         <div class="charlie">
             1
         </div>
         <div class="charlie">
             2
         </div>
         <div class="charlie">
             3
         </div>
         <div class="charlie">
             4
         </div>
         <div class="charlie">
             5
         </div>
         <div class="charlie">
             6
         </div>
         <div class="charlie">
             7
         </div>
         <div class="charlie">
             8
         </div>
         <div class="charlie">
             9
         </div>
         <div class="charlie">
             10
         </div>
     </div>
</div>

Answer 1

You need to set the width of column to be equal to 33% and you have to account for the gap as well:

.alpha {
  overflow-x: auto;
}

.bravo {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns:calc((100% - 2*10px)/3); /* added this */
  grid-auto-flow: column;
}

.charlie {
  color: white;
  background: blue;
  height: 100px;
}

<div class="alpha">
  <div class="bravo">
    <div class="charlie">
      1
    </div>
    <div class="charlie">
      2
    </div>
    <div class="charlie">
      3
    </div>
    <div class="charlie">
      4
    </div>
    <div class="charlie">
      5
    </div>
    <div class="charlie">
      6
    </div>
    <div class="charlie">
      7
    </div>
    <div class="charlie">
      8
    </div>
    <div class="charlie">
      9
    </div>
    <div class="charlie">
      10
    </div>
  </div>
</div>