如何创建具有等宽列的居中 CSS 网格？答案

【问题标题】：How to create centered CSS grid with equal width columns?如何创建具有等宽列的居中 CSS 网格？
【发布时间】：2018-01-08 07:55:06
【问题描述】：

我想要一个菜单栏，其中所有菜单项的宽度都相同（与最宽的一样宽）。菜单项的数量可能会有所不同。如果有多余的空间，菜单应在其容器内居中。

如果项目不能放在一行中，它们可能会换行，但它们仍应具有相同的宽度。像这样的：

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

我可以用 CSS 做到这一点吗？

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

.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）

Centered table-like layout with columns of equal widths using CSS? 的问题类似，但按钮的数量是固定的，没有换行。

不需要是 display:grid。

【问题讨论】：

您探索过flex-box 解决方案吗？
可能 flex-box 是要走的路，但对包装最近的浏览器/设备的支持很差，这就是我个人避免它的原因。除了包装，这里是前两种情况的解决方案。如果您需要我解释，请告诉我。 codepen.io/anon/pen/qXZGrg
我不认为有一个纯 css 解决方案可以做到这一点，因此它也适用于多行 - flex 不能这样做以使所有内容都与最长的项目一样长 - 通常如果它要匹配最长的项目，它只会是每行或每列，除非你改变了基础，那么它只会匹配基础
确实，很确定这不是 any 布局方法。
是的，我也尝试过 flexbox，但也无法做到我想要的。我想我需要使用 javascript 或使用我所拥有的。感谢 cmets！

标签： html css css-grid

【解决方案1】：

您是否尝试过1fr 1fr 1fr（每个代表整体的 1 个单个分数，在本例中为列）

其他人推荐 flexbox，但 css-grid 理论上可以做任何 flexbox 可以做的事情，但具有二维的额外好处（相对于只有 1 个 w/flexbox）。此外，css-grid 集成在浏览器级别，因此不依赖任何框架。

【讨论】：

【解决方案2】：

我现在也有同样的问题。我能想到的最好的就是。

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

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

缺点是，如果一个项目需要超过 200 像素，它会增长，但另一个不会随之增长。而且每个包裹的物品也将居中，而不是向左对齐。

【讨论】：