Using CSS Grid where appropriate

Recently I’ve redesigned my blog, as some of you could notice. During this process, I decided it is time to learn more about and actually use it. Here’s what I learned. CSS Grid Using CSS Grid Every time I’m doing a new (re)design, I usually start with the header. The first component in a header is navigation. My website architecture is not complicated, just a few pages, blog category and posts. Item 1 Item 2 Item 3 Item 4 I wanted to try CSS Grid here, so I started by adding on my element. At first, I wasn’t sure how many elements will be in the menu, 4 or 5. But I had to know that information in order to define my . Or do I? display: grid ul grid-template-columns I discovered there’s a property that could help me in this specific situation. And it is called . [grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. I’ll set this property to and grid will be smart enough to add new columns as necessary. column .nav {display: grid;grid-auto-flow: row;} @media screen and (min-width: $mq-mobile) {.nav {grid-auto-flow: column;}} To create a responsive menu, I’ve added a media query for a smaller screen and stacked items one below other using . Now I could use either 4 or 5 elements in my navigation. Everything works. grid-auto-flow: row Using CSS Grid items Then new problems arrived. I wanted to create and , just like I did with and plugins. a Hexo theme share it with the community hexo-codepen hexo-caniuse In order to do that, I wanted to provide developers with an option to add as many menu elements as needed. And then things started to get complicated. I thought it would be a good idea to allow a maximum of 4 elements per row in the header navigation. If there are more than 4 elements, place them in the new row. I was playing around with various CSS Grid properties to achieve desired behavior but nothing worked with . grid-auto-flow Then I’ve tried a different approach: instead of trying to define a grid, I’ll try to position grid items individually. I’ll place first grid item in the first column of the first row and then second grid item in the second column of the first row and so on. @media screen and (min-width: 320px) {.nav__item:nth-child(1) {grid-area: 1 / 1 / 2 / 2;} .nav__item:nth-child(2) {grid-area: 1 / 2 / 2 / 3;} ......} CSS Grid is smart enough to create a grid from provided properties. It wasn’t the best solution and certainly not the most elegant one, but it worked. grid-area Using CSS Grid correctly I couldn’t be satisfied with that kind of a solution. By looking at the compiled CSS, I realized that the file was too big because of all those pseudo classes. I had to dig deeper. nth-child After studying every grid property I finally got the answer. I should create desired grid, but use for sizing. auto .nav {display: grid;grid-auto-flow: row;} @media screen and (min-width: 320px) {.nav {grid-template-columns: repeat(4, auto);grid-template-rows: repeat(2, auto);}} I’ve defined 4 columns and 2 rows and the result looks the same. Using flexbox as fallback CSS Grid isn’t fully supported yet. _Site update: HTTPS & new way to support caniuse_caniuse.com Can I use... Support tables for HTML5, CSS3, etc I needed a decent fallback for CSS grid. Because I’m a huge fan of Flexbox and because the support for Flexbox is pretty good, it was natural to create a fallback to Flexbox. _Site update: HTTPS & new way to support caniuse_caniuse.com Can I use... Support tables for HTML5, CSS3, etc I first heard about this method when from had a workshop in Osijek earlier this year. The principle is that we should first define Flexbox and than add CSS Grid using rule. Vitaly Friedman Smashing Magazine @supports .nav {display: flex;flex-wrap: wrap;} .nav__item {flex: 0 0 auto;width: 100%;} @media screen and (min-width: $mq-mobile) {.nav__item {width: calc(100% / 4);}} // use grid if supported@supports (display:grid) and (grid-auto-flow: row) {.nav {display: grid;grid-auto-flow: row;} @media screen and (min-width: 320px) {.nav {grid-template-columns: repeat(4, auto);grid-template-rows: repeat(2, auto);}}} To prevent Edge from using CSS Grid, I’ve added rule. This property has in Edge. grid-auto-flow: row no support The result is still the same, with an exception of cross browser support. A lesson learned I’ve learned a lot by building a navigation using CSS Grid. The biggest lesson here is to use CSS Grid where appropriate. And building navigation using CSS Grid is certainly not appropriate, in my opinion. Final thoughts I really enjoyed building a navigation component using many different techniques. There are many ways how components could be built and there is no correct or wrong solution, as long as it works. That’s why I love CSS. Are you using CSS Grid? In what situations? Leave a comment below or . ping me on Twitter For more articles, follow me on or checkout . Twitter my personal website This post is originally posted on my personal website, check it out .