{"componentChunkName":"component---src-templates-blog-template-js","path":"/blog/css-grid-how-i-made-use-of-it","result":{"data":{"markdownRemark":{"html":"<p><img src=\"https://user-images.githubusercontent.com/8594076/84599095-29047080-ae8d-11ea-8df1-117ac518e36a.png\" alt=\"css grids\"></p>\n<h5>About this post</h5>\n<p>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.</p>\n<p>I would love to say flex + grid = awesome easy layoutting !!!</p>\n<h5>Target Audience</h5>\n<p>People who are currently using and know only <code class=\"language-text\">flexbox, positions, float</code> is the way for layouting.</p>\n<blockquote>\n<p>People new to CSS I would highly recommend to go through different layouting approaches (<code class=\"language-text\">flexbox, positions, float</code>)</p>\n</blockquote>\n<h6>What is written everywhere, while I have started to read about</h6>\n<ul>\n<li>Flexbox - 1-Dimensional layout</li>\n<li>CSS Grid - 2-Dimensional layout</li>\n</ul>\n<p>what the fuck is it ... I really don't understand by it ... If you ever felt it, then continue reading !!!</p>\n<p>If you ever worked with flexbox you might have seen using <code class=\"language-text\">flex-direction</code> which takes values as <code class=\"language-text\">row</code> or <code class=\"language-text\">column</code>, defaults to <code class=\"language-text\">row</code> if not specified</p>","frontmatter":{"publishedDate":"Jun 01, 2020","updatedDate":"Jun 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","slug":"css-grid-how-i-made-use-of-it","readTime":"3 min","wordCount":"2395"}}},"pageContext":{}},"staticQueryHashes":["1186804122"]}