diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index 763222a7..57b1126e 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -11,8 +11,9 @@
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
-                <div class="grid grid-cols-7 padding-vertical-half padding-horizontal-half"
+                <div class="grid padding-vertical-half padding-horizontal-half"
                      :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
+                     :style="`grid-template-columns: repeat(${itemPerRow}, minmax(0, 1fr));`"
                      :key="idx" v-for="(row, idx) in allColorRows">
                     <div class="text-align-center" :key="colorInfo.color" v-for="colorInfo in row">
                         <ItemIcon icon-type="fixed-f7" icon-id="app_fill" :color="colorInfo.color" @click="onColorClicked(colorInfo)">
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 078dee5e..5618850b 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -11,8 +11,9 @@
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
-                <div class="grid grid-cols-7 padding-vertical-half padding-horizontal-half"
+                <div class="grid padding-vertical-half padding-horizontal-half"
                      :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
+                     :style="`grid-template-columns: repeat(${itemPerRow}, minmax(0, 1fr));`"
                      :key="idx" v-for="(row, idx) in allIconRows">
                     <div class="text-align-center" :key="iconInfo.id" v-for="iconInfo in row">
                         <ItemIcon icon-type="fixed" :icon-id="iconInfo.icon" :color="color" @click="onIconClicked(iconInfo)">