How do I create a centered CSS grid with the same width columns?
I want to have a menu bar where all the menu items are the same width (as wide as the widest). The number of menu items can vary. The menu should be centered inside the container if there is extra space.
Elements can wrap to another line if they won't fit on one line, but they must have the same width. Something like that:
| [ short ] [loooooooong] [ between ] |
| [ wrapped ] |
Can I do this with CSS?
I tried to 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>
(same in Codepen: https://codepen.io/jarnoan/pen/gxrEpR )
Question Centered table layout with columns of equal width using CSS? is similar, but the number of buttons is fixed and there is no wrapper.
No need to display: grid.
source to share
Have you tried 1fr 1fr 1fr
(each stood for one single part of a whole, in this case a column)
Others recommend flexbox, but css-grid can theoretically do anything flexbox, but has the added benefit of being two-dimensional (versus 1 w / flexbox). Also, css-grid is browser-integrated and therefore doesn't rely on any frameworks.
source to share