diff --git a/src/scss/components/_basic_property.scss b/src/scss/components/_basic_property.scss
index 40978da4..e0871f85 100644
--- a/src/scss/components/_basic_property.scss
+++ b/src/scss/components/_basic_property.scss
@@ -1,6 +1,7 @@
 .basic-properties {
     flex: 0 0 100%;
-    gap: 2px;
+    grid-gap: 2px;
+    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
     .basic-property {
         display: grid;
         align-content: end;
diff --git a/src/templates/item/spell-sheet.hbs b/src/templates/item/spell-sheet.hbs
index 5f2c7a28..039366f9 100644
--- a/src/templates/item/spell-sheet.hbs
+++ b/src/templates/item/spell-sheet.hbs
@@ -28,9 +28,9 @@
 
 <form class="{{cssClass}}" autocomplete="off">
     {{#> systems/ds4/templates/item/partials/sheet-header.hbs}}
-        <div class="grid grid-4col basic-properties">
+        <div class="grid basic-properties">
             <div class="basic-property">
-                <label for="data.spellType">{{localize "DS4.SpellType"}}</label>                
+                <label for="data.spellType">{{localize "DS4.SpellType"}}</label>
                 <select name="data.spellType" data-type="String">
                     {{#select data.spellType}}
                     {{#each config.spellTypes as |value key|}}
@@ -45,11 +45,11 @@
             </div>
         </div>
     {{/systems/ds4/templates/item/partials/sheet-header.hbs}}
-    
+
     {{!-- Common Item body --}}
     {{#> systems/ds4/templates/item/partials/body.hbs}}
         <div class="side-property">
-            <label for="data.spellCategory">{{localize "DS4.SpellCategory"}}</label>                
+            <label for="data.spellCategory">{{localize "DS4.SpellCategory"}}</label>
             <select name="data.spellCategory" data-type="String">
                 {{#select data.spellCategory}}
                 {{#each config.spellCategories as |value key|}}