html - CSS 网格重复、动态、水平 div 元素

Question

我是 CSS/Html/JS 的新手，想创建一系列框(从 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 不是水平的，宽度会填满整个屏幕。我希望盒子水平对齐，而不是停在屏幕末端。如果我可以将整个元素放入水平 ScrollView 中，我会更开心。感谢您的宝贵时间。

Answer 1

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

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

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

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