{"componentChunkName":"component---src-pages-blog-js","path":"/blog/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"d2711431-ba73-5e7a-85f1-6d2461dd2b5f","excerpt":"css grids About this post To share my experience in how I have put CSS GRID to use in my portfolio site. It is not about Flexbox Vs CSS Grid. I would love to say flex + grid = awesome easy layoutting !!! Target Audience People who are currently using…","frontmatter":{"publishedDate":"June 01, 2020","updatedDate":"June 01, 2020","path":"/blog/css-grid-how-i-made-use-of-it","title":"CSS Grid: How I made use of it","tags":["css grid","layout"],"thumbnail":"https://user-images.githubusercontent.com/8594076/84599095-29047080-ae8d-11ea-8df1-117ac518e36a.png","readTime":"3 min"}}}]},"headerImage":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACjElEQVQ4y81US2hTURCNO0Gt9Veb1KRtvi//X5M0TUzSpFpbQtpoqmkMLgQR/GyqCykKKoIF6UoFQXHnQkQQwYWIoAuRautKFEQUP1i1unUlHO+58bVNYyOCgoth5t6ZOTN35ryn2WB14m+KZuFFi8Wx6Fm1F8b8FlBvc8KgzCXSVu+kXQdUMx9IDVrTasfKFkXaOrMDDToF69rsaNQrWK61oandXlWwbofrjQ709XegVIzIBKvHjdtX+rFvTxcO7I3h6KEEfGEvVglwg60WtAqQVVeIbq5f2gK8K6HZ5MDF8R7g9TAGBkLAq2F8eFTA0zuDyOVCWG2w14BWAXJOrPzs7iDuX8uiuD0CvC8hm+1AMhMAvpZRLnUKieDTZAEmlwtac50O6TS7Xfj4uCATpoUeHUlA02DByP44ML0TiW4/hgphGeMOeuSI9L8CZHccdjjmw5cnQ5i4mcO35zuQ3hTAkkYLxk+m8XmqgN27osBMGWPHUljWbEOrssiTCchNdm70YWaqUv3s6Yy0lzbZcH4sgxf38vBHvDh8MI43D7bKYmQEc2sBrZUOQ10+TN7KwRHwyOC3D7fhzPFunBpNyaUwhgv5/rKIzOagXEwVINsl12ZJLJz5fAjtDhfWCsBkOoAbl/sq2xYLIoUIfOJIsrJlpfqjkB0ymVU4YF6S1CxC4RgYkxDA58QIrl7oRU9vUBKcsVpTJY4Ukx3yEE/5ZSVqgkfFHNvsTsSSfklsjsHuc8MsaMIk+oJRr/SR5PRxmQSVTzY6XbKaSyyCT3YG5jSTSSUmKyKR3FO8FdsoituEzXye2ZxG/V6pWYHA87Xu54wp5CnP1OpTtapPfXK9X9GfyuxS/ukP9r8D/AHfWYY7DqjEhwAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/8c845451ed6d5b57f3af13a2fe2dc794/46604/logo.png","srcSet":"/static/8c845451ed6d5b57f3af13a2fe2dc794/151a9/logo.png 310w,\n/static/8c845451ed6d5b57f3af13a2fe2dc794/46604/logo.png 500w","sizes":"(max-width: 500px) 100vw, 500px"}},"kbImage":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEWElEQVQ4y72UbUxbVRjHn16ICR/GyLqxrkDLSymlrFA2GIi1vCyQDQoUJi1tb194kSHMIcsmOplzi2iQJct0S/wwNSHGJU4N2YIz0akxRqaGoYkgUFpYYRTRMF6i9OXe83jKh61RjPOLN7m5Ofec53ee55z//wH4v54mcz1UlmrBVFkG1lod5GVnMPlFeczF767ACx+eh5oWw38DJioUwD5RBW02A1x9vQcKcjOhpKbs/vwa4sOBuDtHgJtpgoPV+dDTxdI/bXDv6/6oipKC0kpTRXqUIGpjHVIg5zn6L7BpO3AuA3BuCyyPWplT7ZJIs14CkiTZ5ejoLRgnEWNp7X49bFeATJ3FcK46GuP4B5i3F5yhr7MMgm5rBHoaAXkHzaRnV7kmY8L2aCo6NCm4KzXTcKI9Dy69XPhIcKoGAkM0xtP5d2BwLAeCE4XgdxqYdacN1sYbMgIuywAu21dvvlPOX7KU8gMvHcCVcdMg725W4pwd/FOWCN6lh+BU9V+y83RA0KmDoMsY4Zs0wbrToUOPhfdN1uPwYCV2H95D1OKdeLo1h8c5M+IsS9addp1vykarYSM4N0sZz4QBZ5+lF9HMcDMtsDrekkYDfK6varG6OMsv3hFP9HuV5O3WEmLQqtFWuy8w8UUN0g19axNPKmgcPcdGhpt7LhzYRdPWR/BuPficbD96LdjZsM+/fYsY1akykpEoJcdri0ne7t1ELknHQ2VqPz9tQnrW76KnhlZXRYHPhwFnmgQhCdz7+chWMsPOr/xkwMKcNF4UIyTpUinJVSpRJZNjvkpFVDK6QUo8P3vrUKh07/zIUzGc5+kNxgOgmxVwbiss3DZL0cvy317ToVySSHZEbyWJIhHuUchRV6TFzOQUTI4Tkp3CWPLplQrEBZZ4h81J3LSVMqzhQKsgpME7Q6YEXLTy/ReKiWhbLElJEJKUuHiaVTLmKhWolCSRwsekJEEsJL0nNQR/Yfn5700Sbtq2kVRYya3gH80RIDYBrjQNXD6nxWRJnM9YpSBSUQJmp6WS/MwMIo9LxBY2i6hVYt/Z4/mIK40DiIfhj9H9gpC7wksOuYQCu6iQ+4S3rusmzAez0FKl4sRCcSAzVRbMlqcEpbGSQBu7l7vYWYLX3yofQzwjRDxGpWOnFYYBg24ThZqpDlkGFx1wd9qx3XvTPNBztABzVen0QpJQnSbDArUSO2x5+NuX7EeIp7chdgB1FEOBNKGGB0CyPEhh9RBwGsHnMjG4ZIdObQ4sjdk1n71X19t3Unv1XHfhBzf69a/9Ptms+eGsEUKZ4UIzgx4HBFzsJl6m5/jjjQpwDVVT+RgFMSASzA2z8OYrB+6vufBiESyOOOCEWiNAT4MgMO6AX78xh7y/eYPgVz+H9XED3Z02Bq4dRj6pY944UxJJp5jQe7778cjbHxsZDLRCqNzVMcfD9UR+6f0Nf4fUz3lf3eh7oTG/0Af83VPUWcfommubxv4JDAhAXDUtAiEAAAAASUVORK5CYII=","aspectRatio":1,"src":"/static/593cd9d55ba5d3f797a42cb0d309edff/fcb75/karthikbalaji_transparent.png","srcSet":"/static/593cd9d55ba5d3f797a42cb0d309edff/fcb75/karthikbalaji_transparent.png 230w","sizes":"(max-width: 230px) 100vw, 230px"}}},"pageContext":{}},"staticQueryHashes":["1186804122"]}