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 不是水平的，宽度充满了屏幕。我希望盒子水平对齐，而不是停在屏幕末端。如果我可以将整个元素放入水平滚动视图中，我会更开心。谢谢你的时间。

Answer 1

在您的产品中 class 使用 inline-grid...

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

Answer 2

你指定的wrapperclass错了。您应该将 wrapper 而不是 Wrapper 放在主 div class 中。如果你想在列之间使用 space，你可以使用 grid-column-gap: 20px;

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

CSSGrid repeating, dynamic, horizontal div elements

html

css

css-grid