align items

myBlazorApp/myBlazorApp/Pages/Inventory.razor

@@ -5,9 +5,14 @@
 
 <h3>Inventory</h3>
 
+<p>
+    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
+</p>
 
+<div class="body">
+    <div class="align-start">
         <div class="inventory-items">
-    <InventoryItem Index="0" Item=@itemsInventory.ElementAt(0)/>
+            <InventoryItem Index="0" />
             <InventoryItem Index="1" />
             <InventoryItem Index="2" />
             <InventoryItem Index="3" />
@@ -26,19 +31,17 @@
             <InventoryItem Index="16" />
             <InventoryItem Index="17" />
         </div>
+    </div>
     <div class="css-grid">
 
-    @foreach (var item in itemsInventory)
+        @*@foreach (var item in itemsInventory)
         {
             <CraftingItem Item="item" NoDrop="true" />
-    }
+        }*@
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
 
     </div>
 
-<div id="ItemList">
+    <div id="ItemList" class="align-end">
         <div>
             <p>
                List of items 
@@ -48,7 +51,7 @@
         </div>
 
         <DataGrid TItem="Item"
-          Data="@items"
+              Data="@itemsInventory"
               ReadData="@OnReadData"
               TotalItems="@totalItem"
               PageSize="10"
@@ -70,3 +73,4 @@
               </DataGridColumn>
         </DataGrid>
     </div>
+</div>

myBlazorApp/myBlazorApp/Pages/Inventory.razor.css

@@ -1,6 +1,21 @@
-.inventory-items {
+.body {
+    display: flex;
+}
+
+.inventory-items {
     grid-template-columns: repeat(6,minmax(0,1fr));
     gap: 10px;
     display: grid;
     width: 40%;
 }
+
+.align-start {
+    align-items: flex-start;
+    justify-content: start
+}
+
+.align-end { 
+    align-content: flex-end;
+    justify-content: end;
+    width: 400px;
+}