CSS overflow-x 容器中具有百分比宽度的网格之字形布局

Question

我希望在锯齿形网格布局中连续三个框，当用户向右滚动时会出现更多框。以像素为单位的盒子宽度很好，但不是百分比。是否有可能以适合父容器的百分比来适应 3 x 2 布局？

我的期望：（当我使用以像素为单位的蓝色框宽度时）

现实：（当我将蓝色框的宽度从像素更改为百分比时）

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

您需要将列宽设置为等于 33% 并且您还必须考虑间隙：

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

CSS overflow-x 容器中具有百分比宽度的网格之字形布局

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

html

css

css-grid