如何创建等宽列的居中CSS网格? [英] 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 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  ]                                |

我可以使用CSS吗?

我尝试使用display:grid，但失败了:

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>

(与CodePen中的相同: https://codepen.io/jarnoan/pen/gxrEpR)

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

问题中心化的表格式布局使用CSS来宽度相等的列吗?是相似的，但是按钮的数量是固定的，并且没有换行.

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.

它不需要显示:网格.

推荐答案

此刻我有同样的问题.我能想到的最好的是.

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;
}

这样，菜单项通常会占用200像素，但是如果没有足够的可用空间则会缩小菜单，并在内容需要时进行包装.

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.

缺点是，如果一项需要大于200像素，则该项将增长，而另一项将不会随之增长.每个包裹的物品也将居中，而不是向左对齐.

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.

这篇关于如何创建等宽列的居中CSS网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！