This solution is a follow-up post on my last year’s article . The goal is to find a solution for navigation with an unknown number of items. “Using CSS Grid where appropriate” RECAP Creating navigation with CSS Grid is arguably not the best solution. However, if one wants to use CSS Grid, two options were suggested: Using and placing each item in the grid, like this: grid-auto-flow: row; .nav__item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } Defining a definite grid using keyword auto for setting width of the rows and columns: .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); } } In both examples, we are defining a strict grid — a number of columns in a row are strictly defined. Solution 2017 A NEW SOLUTION I have been using CSS Grid for more than a year now, and I learned how to use its features properly along the way: , [minmax()](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax) function , [auto-fit](https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit) keyword , and [grid-auto-flow](https://www.w3.org/TR/css-grid-1/#propdef-grid-auto-flow) property how to avoid media queries 🎊. The code I have forked the previous solution and updated it with the features mentioned above. Here’s the final solution. .nav — grid2 { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fit, minmax(60px, auto)); justify-content: center;} Solution 2018 Let’s break down this piece of code. minmax() function defines a size as a range between minimum and maximum value. It allows defining a dynamic size of columns and rows. minmax() We could use this property to define a minimum and a maximum width of navigation item. In our example, we are using the following minmax definition: minmax(60px, auto) We are saying that column should be at least 60px wide, and it should be as wide as the maximum content width. See for more details. [auto](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-auto) keyword auto-fit should be used as a repetition number—a number used in . It says that the grid should place as many items as possible like when items are empty (I think 🤔). auto-fit [repeat()](https://www.w3.org/TR/css-grid-1/#funcdef-repeat) function grid-auto-flow is a property that controls how the grid algorithm for placing items works. In our example, we are using . It says that the grid should fill holes that could be left when larger grid items occur. grid-auto-flow [dense](https://www.w3.org/TR/css-grid-1/#valdef-grid-auto-flow-dense) keyword justify-content aligns the content of the box. We are using to align the content of the items to the center. [justify-content](https://www.w3.org/TR/css-align-3/#propdef-justify-content) property justify-content: center As you could see, we haven’t used media queries. Media queries are useful and without them, and there wouldn’t be a responsive web design, but it feels so satisfying when we able to build responsive behavior without using one. Final thoughts CSS Grid still may not be the best approach for navigation element, but it works. Always try using CSS Grid where appropriate, even if it solves your problem. If you are a rebel, ignore this thought and use it nevertheless — there are no rules when building web solutions as long as your users are happy. 😎 Originally published at www.silvestarbistrovic.from.hr .

Flow

Alpha, Beta, Gamma naming convention

Using CSS Grid where appropriate (revisited)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2018: My Technology Retrospective

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

2018: My Technology Retrospective

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps