diff --git a/templates/cassiopeia/scss/blocks/_modifiers.scss b/templates/cassiopeia/scss/blocks/_modifiers.scss
index 23b721fcb8705..7e2e38c797fcf 100644
--- a/templates/cassiopeia/scss/blocks/_modifiers.scss
+++ b/templates/cassiopeia/scss/blocks/_modifiers.scss
@@ -59,70 +59,34 @@
 
 // com_content
 .blog-items {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -($cassiopeia-grid-gutter / 2);
-  margin-bottom: $cassiopeia-grid-gutter;
-  margin-left: -($cassiopeia-grid-gutter / 2);
+  display: grid;
+  grid-gap: $cassiopeia-grid-gutter;
+  grid-template-columns: 1fr;
+  grid-auto-flow: row;
   padding: 0;
-  &.columns-2 {
+  margin: 0 0 $cassiopeia-grid-gutter;
+  .blog-item {
+    padding: 0;
+  }
+  &[class^='columns-'], &[class*=' columns-'] {
     > div {
-      width: 50%;
+      flex: 0 1 auto;
+      width: auto;
+      max-width: none;
     }
   }
+  &.columns-2 {
+    grid-template-columns: 1fr 1fr;
+  }
   &.columns-3 {
-    > div {
-      width: 33.33333%;
-    }
+    grid-template-columns: 1fr 1fr 1fr;
   }
   &.columns-4 {
-    > div {
-      width: 25%;
-    }
+    grid-template-columns: 1fr 1fr 1fr 1fr;
   }
   &[class^='columns-'], &[class*=' columns-'] {
-    > div {
-      @include media-breakpoint-down(md) {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.blog-item {
-  padding: 0 ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter ($cassiopeia-grid-gutter / 2);
-}
-
-@supports (display: grid) {
-  .blog-items {
-    display: grid;
-    grid-gap: $cassiopeia-grid-gutter;
-    grid-template-columns: 1fr;
-    grid-auto-flow: row;
-    margin: 0 0 $cassiopeia-grid-gutter;
-    .blog-item {
-      padding: 0;
-    }
-    &[class^='columns-'], &[class*=' columns-'] {
-      > div {
-        flex: 0 1 auto;
-        width: auto;
-        max-width: none;
-      }
-    }
-    &.columns-2 {
-      grid-template-columns: 1fr 1fr;
-    }
-    &.columns-3 {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-    &.columns-4 {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-    &[class^='columns-'], &[class*=' columns-'] {
-      @include media-breakpoint-down(md) {
-        grid-template-columns: 1fr;
-      }
+    @include media-breakpoint-down(md) {
+      grid-template-columns: 1fr;
     }
   }
 }