diff --git a/examples/css/index.html b/examples/css/index.html
index 2a06a91398..a1f8ef00bb 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -680,7 +680,7 @@ <h2 class="mistica-card__title">Title</h2>
                 <h3 class="mistica-text-title2">Grid Layout</h3>
                 <h4 class="mistica-text-title1">6 + 6</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
-                    <div class="mistica-col-6">
+                    <div class="mistica-grid-col-6">
                         <div
                             style="
                                 height: 120px;
@@ -696,7 +696,7 @@ <h4 class="mistica-text-title1">6 + 6</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-6">
+                    <div class="mistica-grid-col-6">
                         <div
                             style="
                                 height: 120px;
@@ -715,8 +715,8 @@ <h4 class="mistica-text-title1">6 + 6</h4>
                 </section>
                 <h4 class="mistica-text-title1">5 + 4</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
-                    <div class="mistica-col-1"></div>
-                    <div class="mistica-col-5">
+                    <div class="mistica-grid-col-1"></div>
+                    <div class="mistica-grid-col-5">
                         <div
                             style="
                                 height: 120px;
@@ -732,8 +732,8 @@ <h4 class="mistica-text-title1">5 + 4</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>
-                    <div class="mistica-col-4">
+                    <div class="mistica-grid-col-1"></div>
+                    <div class="mistica-grid-col-4">
                         <div
                             style="
                                 height: 120px;
@@ -749,12 +749,12 @@ <h4 class="mistica-text-title1">5 + 4</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>
+                    <div class="mistica-grid-col-1"></div>
                 </section>
                 <h4 class="mistica-text-title1">4 + 6</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
-                    <div class="mistica-col-1"></div>
-                    <div class="mistica-col-4">
+                    <div class="mistica-grid-col-1"></div>
+                    <div class="mistica-grid-col-4">
                         <div
                             style="
                                 height: 120px;
@@ -770,7 +770,7 @@ <h4 class="mistica-text-title1">4 + 6</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-6">
+                    <div class="mistica-grid-col-6">
                         <div
                             style="
                                 height: 120px;
@@ -786,11 +786,11 @@ <h4 class="mistica-text-title1">4 + 6</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>
+                    <div class="mistica-grid-col-1"></div>
                 </section>
                 <h4 class="mistica-text-title1">8 + 4</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
-                    <div class="mistica-col-8">
+                    <div class="mistica-grid-col-8">
                         <div
                             style="
                                 height: 120px;
@@ -806,7 +806,7 @@ <h4 class="mistica-text-title1">8 + 4</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-4">
+                    <div class="mistica-grid-col-4">
                         <div
                             style="
                                 height: 120px;
@@ -825,7 +825,7 @@ <h4 class="mistica-text-title1">8 + 4</h4>
                 </section>
                 <h4 class="mistica-text-title1">3 + 9</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
-                    <div class="mistica-col-3">
+                    <div class="mistica-grid-col-3">
                         <div
                             style="
                                 height: 120px;
@@ -841,7 +841,7 @@ <h4 class="mistica-text-title1">3 + 9</h4>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-9">
+                    <div class="mistica-grid-col-9">
                         <div
                             style="
                                 height: 120px;