Blog: CardGrid cols=3 so cards fill full width

Author: MMesch

src/components/blog/index.tsx

@@ -4,6 +4,7 @@ import BlogpostCard from "./BlogpostCard";
 import { blogpostsDetails } from "./blogpostsDetails";
 import AtomOrange from "/img/icons/RSSOrange.svg";
 import Section from "../layout/Section";
+import CardGrid from "../layout/CardGrid";
 
 export default function BlogsComponent() {
   const numberOfBlogs = blogpostsDetails.length;
@@ -43,7 +44,7 @@ export default function BlogsComponent() {
         />
       </div>
 
-      <ul className="cards-row">
+      <CardGrid cols={3}>
         {filteredBlogPosts.map((blogpost, index) => (
           <li key={index}>
             <BlogpostCard
@@ -52,7 +53,7 @@ export default function BlogsComponent() {
             />
           </li>
         ))}
-      </ul>
+      </CardGrid>
     </Section>
   );
 }

src/components/blog/styles.module.css

@@ -4,7 +4,7 @@
 
 .blogpost_card {
   height: 556px;
-  width: 369px;
+  width: 100%;
   border-radius: 8px;
   box-shadow: 4px 4px 18px -1px rgba(160, 140, 40, 0.15);
   padding: var(--ifm-spacing-xl);