I'm fairly new to CSS/Html/JS and I'd like to create a row of Boxes (loaded from a json file) displayed horizontally. Something similar to this:
Here's the code snippet I've been using:
<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>
The current result looks like this:
As you can see, the divs are not aligned horizontally and the width extends past the screen. Ideally, I want the boxes to be horizontally aligned and not limited by the screen width. If it's possible to place the entire element in a horizontal scroll view, that would make me even happier. Thank you for your time.