update

pages/css/index.vue

@@ -1,10 +1,44 @@
 <template lang="pug">
-  h1 CSS resources
+  div
+    h1 CSS
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Flexbox froggy',
+          desc: 'A game to learn Flexbox',
+          url: 'https://flexboxfroggy.com'
+        },
+        {
+          title: 'CSS Gridgarden',
+          desc: 'A game to learn Grid',
+          url: 'https://cssgridgarden.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>