Create Grid and GridItem components

src/components/Grid.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="grid">
+    <GridItem :key="item.id" v-for="item in data" :item="item" />
+  </div>
+</template>
+
+<script>
+import GridItem from "./GridItem";
+
+export default {
+  name: "Grid",
+  components: {
+    GridItem
+  },
+  props: {
+    data: Array
+  }
+};
+</script>
+
+<style scoped lang="less">
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 1rem;
+}
+</style>

src/components/GridItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <article class="grid-item">
+    <router-link :to="`/fruit/${item.id}`">
+      <img :src="item.image" :alt="item.name" />
+      <h2>{{ item.name }}</h2>
+      <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
+      <p class="price">{{ item.price + "$" }}</p>
+    </router-link>
+  </article>
+</template>
+
+<script>
+export default {
+  props: {
+    item: Object
+  }
+};
+</script>
+
+<style scoped lang="less">
+.grid-item {
+  padding: 1rem;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+
+  h2 {
+    text-transform: capitalize;
+  }
+
+  .tag {
+    font-weight: bold;
+    text-transform: lowercase;
+    display: inline-block;
+    color: #ffffff;
+    padding: 0.35rem;
+    min-width: 85px;
+    border-radius: 25px;
+  }
+
+  img {
+    width: 100%;
+    height: 350px;
+    object-fit: cover;
+    max-width: 100%;
+  }
+
+  .price {
+    font-size: 24px;
+    font-weight: bold;
+  }
+}
+</style>

src/views/Fruits.vue

@@ -1,15 +1,17 @@
 <template>
   <div>
     <h1>Fruits Directory</h1>
-    {{ this.fruits }}
+    <Grid :data="this.fruits" />
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import Grid from "@/components/Grid";
 
 export default {
   name: "Fruits",
+  components: { Grid },
   computed: {
     ...mapState(["fruits"])
   },