diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
index 1cd6dcb42..dd4eef5f8 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
@@ -14,7 +14,7 @@
         <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
             @context.Id
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
             @context.Name
         </GridColumn>
         <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
diff --git a/blazorbootstrap/Components/Grid/Grid.razor b/blazorbootstrap/Components/Grid/Grid.razor
index 88f0c3f50..30d0bf10a 100644
--- a/blazorbootstrap/Components/Grid/Grid.razor
+++ b/blazorbootstrap/Components/Grid/Grid.razor
@@ -69,7 +69,7 @@
                                                       GridColumnFilterChanged="async args => await column.OnFilterChangedAsync(args, column)"
                                                       PropertyType="@column.GetPropertyType()"
                                                       PropertyTypeName="@column.GetPropertyTypeName()"
-                                                      Unit="@Unit" />
+                                                      Unit="@column.FilterTextboxWidthUnit" />
                                 }
                             </th>
                         }
diff --git a/blazorbootstrap/Components/Grid/GridColumn.razor.cs b/blazorbootstrap/Components/Grid/GridColumn.razor.cs
index 236de2651..f992de32c 100644
--- a/blazorbootstrap/Components/Grid/GridColumn.razor.cs
+++ b/blazorbootstrap/Components/Grid/GridColumn.razor.cs
@@ -248,6 +248,15 @@ private async Task OnSortClickAsync()
     [Parameter]
     public int FilterTextboxWidth { get; set; }
 
+    /// <summary>
+    /// Gets or sets the filter textbox width units.
+    /// </summary>
+    /// <remarks>
+    /// Default value is <see cref="Unit.Px" />.
+    /// </remarks>
+    [Parameter]
+    public Unit FilterTextboxWidthUnit { get; set; } = Unit.Px;
+
     /// <summary>
     /// Gets or sets the filter value.
     /// </summary>
diff --git a/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs b/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs
index d43af52b2..f7685aadd 100644
--- a/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs
+++ b/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs
@@ -183,7 +183,7 @@ or StringConstants.PropertyTypeNameDecimal
     [Parameter]
     public GridFiltersTranslationDelegate FiltersTranslationProvider { get; set; } = default!;
 
-    private string filterStyle => FilterWidth > 0 ? $"width:{FilterWidth.ToString(CultureInfo.InvariantCulture)}{Unit.ToString().ToLower()};" : "";
+    private string filterStyle => FilterWidth > 0 ? $"width:{FilterWidth.ToString(CultureInfo.InvariantCulture)}{Unit.ToCssString()};" : "";
 
     /// <summary>
     /// Gets or sets filter value.