{"id":1532,"date":"2019-06-05T17:01:36","date_gmt":"2019-06-05T17:01:36","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=1532"},"modified":"2019-06-05T17:01:36","modified_gmt":"2019-06-05T17:01:36","slug":"css-grid-menu","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/css-grid-menu\/","title":{"rendered":"CSS Grid Menu Layout With Display Flex | Responsive Grid Design"},"content":{"rendered":"<p><strong>How we can create a menu with a grid layout using HTML CSS? Solution: CSS Grid Menu Layout With Display Flex, Which is a Responsive Grid Design.<\/strong><\/p>\n<p>I am sure that you know what is <strong>CSS Grid<\/strong>, &amp; almost every designer or developer knows how to create girds. Using<strong> CSS grid and flex<\/strong> properties, the easiest point is making an object <strong>responsive<\/strong>. Nowadays the <strong>grid-based menu<\/strong> is on trend, Many creative developers now choose a <strong>grid-based menu<\/strong> over simple <span><a href=\"https:\/\/webdevtrick.com\/css-responsive-navbar\/\" target=\"_blank\" rel=\"noopener noreferrer\">navbar<\/a><\/span>.<\/p>\n<p>Yesterday, I was surfing some personal websites, Then I saw a <strong>menu with grid view<\/strong>. Believe me, I feel these types of the menu is more attractive than a <span><a href=\"https:\/\/webdevtrick.com\/html-css-dropdown-menu-source-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">list type menu<\/a><\/span>. If you want to make your website simple and fast, then don&#8217;t use this. Otherwise, you can use this to make your website more good looking.<\/p>\n<p>Now the question is how to create the menu? Don&#8217;t worry, because today I am sharing<strong> CSS Grid Menu Layout Using Display Flex<\/strong>. In other words, I am sharing a <strong>Responsive Grid Based Menu<\/strong> Design. I added using <strong>display flex<\/strong> because I am also using it along with <strong>grid property<\/strong>. &amp; it is also responsive, means it <strong>fits on every screen sizes<\/strong>.<\/p>\n<p>If you are thinking now how this menu actually is, then see the<strong> preview<\/strong> given below.<\/p>\n<h3>Preview Of Responsive Grid Layout<\/h3>\n<p>See this video preview to getting an idea of how this menu looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1532-1\" width=\"640\" height=\"321\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/flex-based-grid-menu.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/flex-based-grid-menu.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/flex-based-grid-menu.mp4<\/a><\/video><\/div>\n<p>Now you can see this visually. If you like this, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-glitch-effect\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML CSS Glitch Effect<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-mode-change\/\" target=\"_blank\" rel=\"noopener noreferrer\">Light &amp; Dark Mode Using CSS<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-animated-contact-form\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Animated Contact Form<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/split-image-in-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">Split Image Using JavaScript<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>CSS Grid Menu Source Code<\/h2>\n<p>As always, Before <strong>sharing source code<\/strong> let&#8217;s talk about it. As you know I got inspiration from a personal portfolio website to creating this. Actually, I created a clone of that website&#8217;s menu, sadly I forget the websites name. I used <strong>HTML CSS and JavaScript<\/strong> to create this menu.<\/p>\n<p>Actually, JavaScript has a very small part of this menu. I used JavaScript to just create a <span><a href=\"https:\/\/webdevtrick.com\/toggle-button-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">toggle button<\/a><\/span>, nothing else. Left all is based on <strong>Pure CSS<\/strong> and of course HTML also. All we know that we can&#8217;t create a webpage without HTML.<\/p>\n<p>First I created Button using HTML and put two class, one for styling and one for creating a<strong> toggle effect<\/strong>.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;button type=\"button\" class=\"menu-button menu-toggle\" aria-label=\"Click to open menu\"&gt;&lt;\/button&gt;\r\n<\/pre>\n<p>That&#8217;s how the buttons HTML looks like. I used &#8220;<span style=\"font-size: 14pt;\"><strong>+<\/strong><\/span>&#8221; sign on button, you can also use external icons like font-awesome.\u00a0 After click on plus button its rotate on 765 deg. For creating the line effect on hover I used <code>:before<\/code> property. At before section, I created a blank content with <strong>3px width<\/strong>, <code>bottom:20px;<\/code> and <code>transform-origin: bottom;<\/code> property. After positioning and alignment, the final line you can see on the video.<\/p>\n<p>I used <code>display: grid;<\/code> property only in the main div. Inside the main div, I created 5 divs with <code>class= \"mainn-menu\"<\/code>\u00a0 And inside the maiin-menu div, I create another div with <code>class = \"content\"<\/code>. In content section I used <code>display: flex;<\/code> property.<\/p>\n<p>For placing Image I put <code>background-image<\/code> property by selecting <code>.maiin-menu:nth-child<\/code> .\u00a0 &amp; I used <code>@media<\/code> for creating it responsive. Basically, for the <strong>responsive design<\/strong>, I change the grid&#8217;s width value (get <a href=\"https:\/\/www.w3schools.com\/css\/css_grid.asp\" target=\"_blank\" rel=\"noopener noreferrer\">info<\/a>), that&#8217;s all. You can fully understand after getting the code.<\/p>\n<p>For creating this you have to create 3 files. First for <strong>HTML<\/strong>, second for<strong> CSS<\/strong>, and third for <strong>JavaScript<\/strong>. Follow the steps to creating this without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<strong><em>index.html<\/em><\/strong>&#8216; and put these codes given below.<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- code by webdevtrick ( https:\/\/webdevtrick.com ) --&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;CSS Grid Menu Responsive | Webdevtrick.com&lt;\/title&gt;\r\n\t&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Aldrich&amp;display=swap\" rel=\"stylesheet\"&gt;\r\n      &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n  &lt;button type=\"button\" class=\"menu-button menu-toggle\" aria-label=\"Click to open menu\"&gt;&lt;\/button&gt;\r\n\r\n\r\n&lt;div class=\"menu main-menu-switch\"&gt;\r\n  &lt;div class=\"maiin-menu\"&gt;\r\n    &lt;div class=\"items\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"content\"&gt;\r\n      &lt;a href=\"#\" class=\"btn-link\"&gt;HTML&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"maiin-menu\"&gt;\r\n    &lt;div class=\"items\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"content\"&gt;\r\n      &lt;a href=\"#\" class=\"btn-link\"&gt;CSS&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"maiin-menu\"&gt;\r\n    &lt;div class=\"items\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"content\"&gt;\r\n      &lt;nav class=\"bundle\"&gt;\r\n        &lt;a class=\"inside-link\" href=\"#\"&gt;Web Development&lt;\/a&gt;\r\n        &lt;a class=\"inside-link\" href=\"#\"&gt;Source Code&lt;\/a&gt;\r\n      &lt;\/nav&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"maiin-menu\"&gt;\r\n    &lt;div class=\"items\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"content\"&gt;\r\n      &lt;a href=\"#\" class=\"btn-link\"&gt;JavaScript&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"maiin-menu\"&gt;\r\n    &lt;div class=\"items\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"content\"&gt;\r\n      &lt;a href=\"https:\/\/webdevtrick.com\" class=\"btn-link\"&gt;Webdevtrick.com&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n  \r\n    &lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<strong><em>style.css<\/em><\/strong>&#8216; and put these codes.<\/p>\n<pre class=\"lang:css decode:true \" title=\"style.css\">\/** code by webdevtrick ( https:\/\/webdevtrick.com ) **\/\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  background-blend-mode: overlay;\r\n}\r\n.bundle {\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1 1 auto;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n.bundle .inside-link {\r\n  text-decoration: none;\r\n  color: #333;\r\n  font-size: 1.5rem;\r\n  font-family: 'Aldrich', sans-serif;\r\n  padding: 1% 0.1rem;\r\n  font-weight: bold;\r\n  transition: all 300ms ease;\r\n  position: relative;\r\n  display: block;\r\n}\r\n\r\n.bundle .inside-link:hover:after {\r\n  transform: scaleX(4);\r\n}\r\n\r\n.btn-link {\r\n  display: flex;\r\n  height: 100%;\r\n  width: 100%;\r\n  flex: 1 1 auto;\r\n  justify-content: center;\r\n  align-items: center;\r\n  text-decoration: none;\r\n  color: #272727;\r\n  font-size: 14px;\r\n  font-weight: bold;\r\n  letter-spacing: 3px;\r\n  font-family: 'Aldrich', sans-serif;\r\n  position: relative;\r\n}\r\n.btn-link:before {\r\n  content: '';\r\n  position: absolute;\r\n  display: block;\r\n  width: 3px;\r\n  height: calc(50% - 60px);\r\n  transform-origin: bottom;\r\n  transition: all 300ms ease;\r\n  transform: scaleY(0);\r\n  background: #272727;\r\n  bottom: 20px;\r\n  left: 50%;\r\n  margin-left: -2px;\r\n  opacity: 1;\r\n}\r\n.btn-link:hover:before {\r\n\ttransform: scaleY(1);\r\n}\r\n\r\n.menu-button {\r\n  position: fixed;\r\n  top: 20px;\r\n  left: 20px;\r\n  z-index: 3;\r\n  background: #FF4848;\r\n  border: none;\r\n  box-shadow: none;\r\n  outline: none;\r\n  width: 60px;\r\n  height: 60px;\r\n  padding: 0;\r\n  font-family: 'Aldrich', sans-serif;\r\n  font-size: 10px;\r\n  cursor: pointer;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 50%;\r\n  transition: all 300ms ease;\r\n}\r\n.menu-button:after {\r\n  content: '+';\r\n  width: 50px;\r\n  height: 50px;\r\n  display: block;\r\n  color: white;\r\n  font-size: 48px;\r\n  font-weight: lighter;\r\n  transition: all 300ms ease;\r\n\tline-height: 47px;\r\n}\r\n.menu-button:hover {\r\n  transform: scale(1.1);\r\n}\r\n.menu-button.toggle-switch-menu-open:after {\r\n  transform: rotate(765deg);\r\n}\r\n\r\n.menu {\r\n  height: 100vh;\r\n  width: 100vw;\r\n  display: grid;\r\n  overflow-y: auto;\r\n  grid-template-columns: 100%;\r\n  grid-template-rows: 20% 20% 20% 10% 10% 10% 10%;\r\n}\r\n.maiin-menu {\r\n  opacity: 0;\r\n  transition: all 200ms ease;\r\n  overflow: hidden;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1 1 auto;\r\n}\r\n.maiin-menu .items {\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  top: 0;\r\n  left: 0;\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  mix-blend-mode: overlay;\r\n  transform-origin: center;\r\n  transform: scale(2);\r\n  transition: all 2000ms ease-out;\r\n  z-index: 1;\r\n}\r\n.maiin-menu .content {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  width: 100%;\r\n  position: relative;\r\n  z-index: 2;\r\n  opacity: 0;\r\n  transition: all 300ms ease;\r\n}\r\n.maiin-menu:first-child {\r\n  background-color: #272727;\r\n}\r\n.maiin-menu:first-child .btn-link {\r\n  color: #eee;\r\n}\r\n.maiin-menu:first-child .btn-link:before {\r\n  background: #ccc;\r\n}\r\n.maiin-menu:nth-child(2) {\r\n  background-color: #FF4848;\r\n}\r\n.maiin-menu:nth-child(3) {\r\n  background-color: #FFCA31;\r\n  grid-column-start: 1;\r\n  grid-row-start: 1;\r\n  grid-row-end: 4;\r\n}\r\n\r\n.maiin-menu:nth-child(4) {\r\n  background-color: #70FF84;\r\n}\r\n.maiin-menu:nth-child(5) {\r\n  background-color: #eee;\r\n}\r\n.maiin-menu:nth-child(1) {\r\n  transition-delay: 50ms;\r\n  transform-origin: bottom;\r\n  transform: scaleY(0);\r\n}\r\n.maiin-menu:nth-child(1) .items {\r\n  background-image: url(https:\/\/images.pexels.com\/photos\/879109\/pexels-photo-879109.jpeg);\r\n}\r\n.maiin-menu:nth-child(1) .content {\r\n  transition-delay: 0ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(1) {\r\n  transition-delay: 200ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(1) .content {\r\n  transition-delay: 700ms;\r\n}\r\n.maiin-menu:nth-child(2) {\r\n  transition-delay: 100ms;\r\n  transform-origin: left;\r\n  transform: scaleX(0);\r\n}\r\n.maiin-menu:nth-child(2) .items {\r\n  background-image: url(https:\/\/images.pexels.com\/photos\/1181243\/pexels-photo-1181243.jpeg);\r\n}\r\n.maiin-menu:nth-child(2) .content {\r\n  transition-delay: 50ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(2) {\r\n  transition-delay: 400ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(2) .content {\r\n  transition-delay: 900ms;\r\n}\r\n.maiin-menu:nth-child(3) {\r\n  transition-delay: 150ms;\r\n  transform-origin: bottom;\r\n  transform: scaleY(0);\r\n}\r\n.maiin-menu:nth-child(3) .items {\r\n  background-image: url(https:\/\/images.pexels.com\/photos\/214221\/pexels-photo-214221.jpeg);\r\n}\r\n.maiin-menu:nth-child(3) .content {\r\n  transition-delay: 100ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(3) {\r\n  transition-delay: 600ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(3) .content {\r\n  transition-delay: 1100ms;\r\n}\r\n.maiin-menu:nth-child(4) {\r\n  transition-delay: 200ms;\r\n  transform-origin: left;\r\n  transform: scaleX(0);\r\n}\r\n.maiin-menu:nth-child(4) .items {\r\n  background-image: url(https:\/\/images.pexels.com\/photos\/2058128\/pexels-photo-2058128.jpeg);\r\n}\r\n.maiin-menu:nth-child(4) .content {\r\n  transition-delay: 150ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(4) {\r\n  transition-delay: 800ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(4) .content {\r\n  transition-delay: 1300ms;\r\n}\r\n.maiin-menu:nth-child(5) {\r\n  transition-delay: 250ms;\r\n  transform-origin: bottom;\r\n  transform: scaleY(0);\r\n}\r\n.maiin-menu:nth-child(5) .items {\r\n  background-image: url(https:\/\/images.pexels.com\/photos\/1714208\/pexels-photo-1714208.jpeg);\r\n}\r\n.maiin-menu:nth-child(5) .content {\r\n  transition-delay: 200ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(5) {\r\n  transition-delay: 1000ms;\r\n}\r\n.toggle-switch .maiin-menu:nth-child(5) .content {\r\n  transition-delay: 1500ms;\r\n}\r\n.toggle-switch .maiin-menu {\r\n  transform: scale(1);\r\n  opacity: 1;\r\n  transition: all 400ms ease;\r\n}\r\n.toggle-switch .maiin-menu .items {\r\n  transform: scale(1);\r\n}\r\n.toggle-switch .maiin-menu .content {\r\n  opacity: 1;\r\n}\r\n.toggle-switch .maiin-menu:hover .items {\r\n          transform: scale(1.2);\r\n}\r\n\r\n@media (min-width: 480px) {\r\n  .menu {\r\n    grid-template-columns: 30% 70%;\r\n    grid-template-rows: 25% 25% 25% 25%;\r\n  }\r\n}\r\n@media (min-width: 800px) {\r\n  .menu {\r\n    grid-template-columns: 20% 30% 50%;\r\n    grid-template-rows: 60% 40%;\r\n  }\r\n}\r\n\r\n@media (min-width: 480px) {\r\n  .maiin-menu:nth-child(3) {\r\n    grid-column-start: 2;\r\n    grid-row-start: 5;\r\n    grid-row-end: 1;\r\n  }\r\n}\r\n@media (min-width: 800px) {\r\n  .maiin-menu:nth-child(3) {\r\n    grid-column-start: 3;\r\n    grid-row-start: 3;\r\n    grid-row-end: 1;\r\n  }\r\n}\r\n@media (min-width: 480px) {\r\n  .bundle .inside-link {\r\n    font-size: 2rem;\r\n  }\r\n}\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, Create a JS file named &#8216;<strong><em>function.js<\/em><\/strong>&#8216; and put the codes.<\/p>\n<pre class=\"lang:js decode:true \" title=\"function.js\">\/** code by webdevtrick ( https:\/\/webdevtrick.com ) **\/\r\n\r\nconst menu = document.querySelector('.main-menu-switch');\r\nconst menuTrigger = document.querySelectorAll('.menu-toggle');\r\nmenuTrigger.forEach(btn =&gt; {\r\n  btn.addEventListener('click', function () {\r\n    menuTrigger.forEach(b =&gt; {\r\n      b.classList.toggle('toggle-switch-menu-open');\r\n    });\r\n    menu.classList.toggle('toggle-switch');\r\n  });\r\n});<\/pre>\n<p>That&#8217;s It. Now you have successfully created <strong>CSS Grid Menu With Display Flex, a Responsive Grid Menu<\/strong>. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create a menu with a grid layout using HTML CSS? Solution: CSS Grid Menu Layout With Display Flex, Which is a Responsive Grid Design. I am sure that you know what is CSS Grid, &amp; almost every designer or developer knows how to create girds. Using CSS grid and flex properties, the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46,22,41],"tags":[74,73,146,210,155,56,61,54,154,116],"class_list":["post-1532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","category-web-design","category-web-development","tag-css-animation","tag-css-hover-effect","tag-css-menu","tag-grid","tag-html-and-css","tag-html-menu-source-code","tag-javascript-tips-and-tricks","tag-menu","tag-pure-css","tag-toggle-button"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Grid Menu Layout With Display Flex | Responsive Grid Design<\/title>\n<meta name=\"description\" content=\"Want to create a grid-based menu using CSS? Checkout this CSS Grid Menu Layout With Display Flex. Get the Source Code of Responsive Grid Design menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/css-grid-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Grid Menu Layout With Display Flex | Responsive Grid Design\" \/>\n<meta property=\"og:description\" content=\"Want to create a grid-based menu using CSS? Checkout this CSS Grid Menu Layout With Display Flex. Get the Source Code of Responsive Grid Design menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/css-grid-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-05T17:01:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"CSS Grid Menu Layout With Display Flex | Responsive Grid Design\",\"datePublished\":\"2019-06-05T17:01:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/\"},\"wordCount\":666,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg\",\"keywords\":[\"css animation\",\"css hover effect\",\"css menu\",\"grid\",\"html and css\",\"html menu source code\",\"javascript tips and tricks\",\"menu\",\"pure css\",\"toggle button\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\",\"Web Design\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/css-grid-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/\",\"url\":\"https:\/\/webdevtrick.com\/css-grid-menu\/\",\"name\":\"CSS Grid Menu Layout With Display Flex | Responsive Grid Design\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg\",\"datePublished\":\"2019-06-05T17:01:36+00:00\",\"description\":\"Want to create a grid-based menu using CSS? Checkout this CSS Grid Menu Layout With Display Flex. Get the Source Code of Responsive Grid Design menu.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/css-grid-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg\",\"width\":1200,\"height\":629,\"caption\":\"css grid menu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/css-grid-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Grid Menu Layout With Display Flex | Responsive Grid Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Grid Menu Layout With Display Flex | Responsive Grid Design","description":"Want to create a grid-based menu using CSS? Checkout this CSS Grid Menu Layout With Display Flex. Get the Source Code of Responsive Grid Design menu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevtrick.com\/css-grid-menu\/","og_locale":"en_US","og_type":"article","og_title":"CSS Grid Menu Layout With Display Flex | Responsive Grid Design","og_description":"Want to create a grid-based menu using CSS? Checkout this CSS Grid Menu Layout With Display Flex. Get the Source Code of Responsive Grid Design menu.","og_url":"https:\/\/webdevtrick.com\/css-grid-menu\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-06-05T17:01:36+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/css-grid-menu\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"CSS Grid Menu Layout With Display Flex | Responsive Grid Design","datePublished":"2019-06-05T17:01:36+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/css-grid-menu\/"},"wordCount":666,"commentCount":5,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg","keywords":["css animation","css hover effect","css menu","grid","html and css","html menu source code","javascript tips and tricks","menu","pure css","toggle button"],"articleSection":["CSS","HTML","JavaScript","Web Design","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/css-grid-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/css-grid-menu\/","url":"https:\/\/webdevtrick.com\/css-grid-menu\/","name":"CSS Grid Menu Layout With Display Flex | Responsive Grid Design","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg","datePublished":"2019-06-05T17:01:36+00:00","description":"Want to create a grid-based menu using CSS? Checkout this CSS Grid Menu Layout With Display Flex. Get the Source Code of Responsive Grid Design menu.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/css-grid-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-grid-menu.jpg","width":1200,"height":629,"caption":"css grid menu"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/css-grid-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"CSS Grid Menu Layout With Display Flex | Responsive Grid Design"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=1532"}],"version-history":[{"count":0,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/1533"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=1532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=1532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=1532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}