CSSGrid repeating, dynamic, horizontal div elements - html

Question

I am pretty new on CSS/Html/JS and want to create a series of Boxes (loaded from a json file) and display them horizontally. Something like This:
I tried to achieve this with the following code:
<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>
But the result looks like this:
As you can see the divs are not horizontal and the width fills the screen. I want the boxes to be horizontally aligned and not to stop at the screen end. If I could put the whole element into a horizontal scroll view I would be even happier. Thanks for your time.

Answer 1

In your product class use 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

You specify the wrapper class wrong. You should put wrapper not Wrapper in the main div class. If you want a space between columns you can use grid-column-gap: 20px;