Create Grid and GridItem components

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>