CSSグリッドを使用した水平スクロール

Question

グリッドが4列目に完了したときに水平スクロールを作ろうとしているときに問題があります。見る

#series {
    display: grid;
    grid-gap: 16px;
    overflow-x: scroll;
    padding: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
}
 _

これを使用して、私は以下の出力を受け取ります

しかし、あなたは知っています、私は「4列」と同じように同じにしたいのですが、もっと見るためのスクロールバー。

どうしたの。

Answer 1

あなたの問題はあなたが1fr単位を使用しているということです。代わりに25％（ギャップに対応するためにCalcを使用）を入れてください。これにより、利用可能な画面幅に対する列が大きさです。もちろん、Grid-Auto-Columnsに25％を適用する必要があります。

Answer 2

私はこの中程度の記事に答えがあると思います： https://uxdesign.cc/creating-horizo​​ntal-scrolling-Containers-the-right-way-css-grid-c256f64fc585

基本的には、ブラウザがそれらをまとめるように強制するために、個々のカードがダイナミックなものではなく固定幅を持つ必要があるという事実に留まります。