diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html
index 29b3f4b53f..4b05e4ad43 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html
@@ -260,12 +260,12 @@
                             <!-- areaGridColumns -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="label"><localize key="blockEditor_areasLayoutColumns">Area layout columns</localize></label>
+                                    <label class="control-label" for="areaGridColumns"><localize key="blockEditor_areasLayoutColumns">Area layout columns</localize></label>
                                     <umb-property-info-button button-title-key="general_readMore">
                                         <localize key="blockEditor_areasLayoutColumnsHelp">Define how many layout columns that will be available for areas. If not defined, the number of layout columns defined for the entire layout will be used.</localize>
                                     </umb-property-info-button>
                                     <div class="controls">
-                                        <input type="text" name="label" placeholder="{{model.gridColumns}}" ng-model="vm.block.areaGridColumns"/>
+                                        <input type="number" pattern="[0-9]*" min="1" max="100" name="areaGridColumns" placeholder="{{model.gridColumns}}" ng-model="vm.block.areaGridColumns" fix-number />
                                     </div>
                                 </div>
                             </div>