How to create centered CSS grid with equal width columns?

user_109351 0
Viewed 2645

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 if there is extra space.

Items may wrap on another row if they won't fit on one row, but they should still have the same width. Something like this:

|    [   short   ] [loooooooong] [  between  ]    |
|    [  wrapped  ]                                |

Can I do this with CSS?

I tried with display:grid, but failed:

.container { 
  border: 1px solid black;
  display:inline-block;
}

.menu { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, -webkit-max-content));
  grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
  justify-content: center;
  grid-gap: 10px;
  
  background: #eee;
}

.item { 
  border: 1px solid #aaa;
  background: yellow;
  white-space: nowrap;
}
<div class="container">
  <h2>Two items</h2>
  
  <p>
    These should have equal widths (as wide as the widest one is) and be centered within the container.
  </p>
  
  <div class="menu">
    <div class="item">Short</div>
    <div class="item">Looooooooooong</div>
  </div>
  
  <p>
    They are centered all right, but don't have equal widths.
  </p>

  <h2>Three items</h2>
  
  <p>
    These three should also have same width with each other.
  </p>
  
  <div class="menu">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third</div>
  </div>

  <p>
    They are centered all right, but don't have equal widths.
  </p>
  
  <h2>So many items that they won't fit on one line</h2>

  <p>
    These should also have equal widths, but they should wrap to the next row. I don't care whether the second row is centered as long as the items are aligned with the row above.
  </p>
  
  <div class="menu">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third item, a longer one</div>
    <div class="item">Fourth item</div>
    <div class="item">Fifth item</div>
    <div class="item">Sixth item</div>
    <div class="item">Seventh item</div>
    <div class="item">Eight item</div>
    <div class="item">Ninth item</div>
    <div class="item">Tenth item</div>
    <div class="item">Item number 11</div>
    <div class="item">Item number 12</div>
    <div class="item">Item number 13</div>
    <div class="item">Item number 14</div>
    <div class="item">Item number 15</div>
    <div class="item">Item number 16</div>
    <div class="item">Item number 17</div>
    <div class="item">Item number 18</div>
    <div class="item">Item number 19</div>
    <div class="item">Item number 20</div>
    <div class="item">Item number 21</div>
    <div class="item">Item number 22</div>
    <div class="item">Item number 23</div>
  </div>
  <p>
    They have equal widths, but the width is the min width given in minmax and the content doesn't fit within the item.
  </p>
</div>

(the same in CodePen: https://codepen.io/jarnoan/pen/gxrEpR)

The question Centered table-like layout with columns of equal widths using CSS? is similar, but there the number of buttons is fixed and there is no wrapping.

It doesn't need to be display:grid.

css-grid css html
2 Answers

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.

user_43892530

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: 0 1 200px;
    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.

user_26957990
Related