CSSGrid重复，动态，水平div元素

Question

我是CSS / Html / JS的新手，想要创建一系列Box（从json文件加载）并水平显示它们。像这样：

我尝试使用以下代码实现此目的：

<style> 
.wrapper {
    display: grid;
    grid-template-columns: auto auto;
}

.Product {
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: rgb(2, 121, 61);
    padding: 10px;
}

</style>
<div class"Wrapper">
    <div class="Product">
        <div>Pos: </div><div id="pos">test1</div>
        <div>Artikel: </div><div id="article">test2</div>
        <div>Bezeichnung: </div><div id="name">test3</div>
        <div>Menge: </div><div id="stock">test4</div>
        <div>Einheit:</div><div id="einheit">test5</div>
        <div>Lagerplatz:</div><div id="shelf">test6</div>
        <div>Intern:</div><div id="barcode">test7</div>
    </div>

    <div class="Product">
        <div>Pos: </div><div id="pos">test1</div>
        <div>Artikel: </div><div id="article">test2</div>
        <div>Bezeichnung: </div><div id="name">test3</div>
        <div>Menge: </div><div id="stock">test4</div>
        <div>Einheit:</div><div id="einheit">test5</div>
        <div>Lagerplatz:</div><div id="shelf">test6</div>
        <div>Intern:</div><div id="barcode">test7</div>
    </div>
</div>

但结果如下：

正如您所看到的，div不是水平的，宽度填满了屏幕。我希望盒子水平对齐，而不是停在屏幕末端。如果我可以将整个元素放入水平滚动视图中，我会更高兴。谢谢你的时间。

Answer 1

在您的产品类中使用内联网格...

98. 98th element
    1. This is fine
99. 99th element
    - This looks okay
100. 100th element
    - This should not look like this
101. 101th element
    1. This is also broken

`val seqList: MutableList<MutableList<Int>> = ArrayList() // alternatively: = mutableListOf()'
'seqList.add(mutableListOf<Int>(1, 2, 3))`

Answer 2

您指定wrapper类错误。您应该将wrapper而不是Wrapper放在主div class中。如果您希望列之间有空格，可以使用grid-column-gap: 20px;