How To Create Centered Css Grid With Equal Width Columns?

I want to have a menu bar where all menu items have same width (as wide as the widest one is). The number of menu items can vary. The menu should be centered within its container i

Solution 1:

Have you tried 1fr 1fr 1fr (each standing for 1 single fraction of the whole, in this case, column)

Others are reccommending flexbox, but css-grid can theoretically do anything flexbox can but has the additional benefit of being 2-dimensional (versus only 1 w/ flexbox). Moreover, css-grid is integrated at the browser level and therefore doesn't rely on any frameworks.

Solution 2:

I have the same problem at the moment. The best I could come up with is.

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    flex: 01200px;
    text-align: center;
}

That way the menu items will usually take up 200px, but shrink if there isn't enough available space and wrap if the content demands it.

The downside is that if an item needs more than 200px it will grow, but the other's will not grow with it. And every wrapped item will be centered as well and not aligned to the left.