fethcing col count dynamically

src/views/Home.vue

@@ -19,7 +19,9 @@
       </router-link>
     </div>
     <!-- Main content, section for each group of items -->
-    <div v-if="checkTheresData(sections) || isEditMode" :class="computedClass">
+    <div v-if="checkTheresData(sections) || isEditMode" :class="computedClass"
+    ref="sectionsContainer">
+      <span style="position: absolute;">{{readActiveColCount()}}</span>
       <template v-for="(section, index) in filteredSections">
         <Section
           :key="index"
@@ -172,6 +174,13 @@ export default {
       availibleThemes.Default = '#';
       return availibleThemes;
     },
+    readActiveColCount() {
+      const { sectionsContainer } = this.$refs;
+      if (!sectionsContainer) return;
+      const cs = getComputedStyle(sectionsContainer);
+      const varVal = cs.getPropertyValue('--col-count').trim();
+      console.log(varVal);
+    },
   },
   mounted() {
     this.initiateFontAwesome();

user-data/conf.yml

@@ -12,10 +12,37 @@ pageInfo:
 # Optional app settings and configuration
 appConfig:
   theme: colorful
+  # colCount: 4
 
 # Main content - An array of sections, each containing an array of items
 sections:
-- name: Getting Started
+- name: Section 1
+  icon: fas fa-rocket
+  displayData:
+    sortBy: default
+    rows: 1
+    cols: 1
+  items:
+  - title: Dashy Live
+    description: Development a project management links for Dashy
+    icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
+    url: https://live.dashy.to/
+    target: newtab
+  
+- name: Section 2
+  icon: fas fa-rocket
+  displayData:
+    sortBy: default
+    rows: 1
+    cols: 3
+  items:
+  - title: Dashy Live
+    description: Development a project management links for Dashy
+    icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
+    url: https://live.dashy.to/
+    target: newtab
+
+- name: Section 3
   icon: fas fa-rocket
   displayData:
     sortBy: default
@@ -27,25 +54,16 @@ sections:
     icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
     url: https://live.dashy.to/
     target: newtab
-  - title: GitHub
-    description: Source Code, Issues and Pull Requests
-    url: https://github.com/lissy93/dashy
-    icon: favicon
-  - title: Docs
-    description: Configuring & Usage Documentation
-    provider: Dashy.to
-    icon: far fa-book
-    url: https://dashy.to/docs
-  - title: Showcase
-    description: See how others are using Dashy
-    url: https://github.com/Lissy93/dashy/blob/master/docs/showcase.md
-    icon: far fa-grin-hearts
-  - title: Config Guide
-    description: See full list of configuration options
-    url: https://github.com/Lissy93/dashy/blob/master/docs/configuring.md
-    icon: fas fa-wrench
-  - title: Support
-    description: Get help with Dashy, raise a bug, or get in contact
-    url: https://github.com/Lissy93/dashy/blob/master/.github/SUPPORT.md
-    icon: far fa-hands-helping
 
+- name: Section 4
+  icon: fas fa-rocket
+  displayData:
+    sortBy: default
+    rows: 1
+    cols: 5
+  items:
+  - title: Dashy Live
+    description: Development a project management links for Dashy
+    icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
+    url: https://live.dashy.to/
+    target: newtab