CSS Grid Zigzag 布局，在溢出-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>