在 CSS Grid 中使用文本时，相等的列宽不起作用答案

【问题标题】：Equal column width not working when use text right in CSS Grid在 CSS Grid 中使用文本时，相等的列宽不起作用
【发布时间】：2022-11-11 00:28:50
【问题描述】：

我希望网格列的宽度相等，无论是一列、两列还是更多列，也列间距必须相同。我找到了其中一个示例，但是当将text-right 用于列时，列宽似乎不相等。任何人都可以帮助我实现这一目标？在以下示例中，列间距和宽度不相等。我想用 CSS 或 JS 来实现。

.grid-equal-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.grid-equal-columns > * {
    overflow: hidden;
    text-align: right;
    margin: 10px;
}

<div class="grid-equal-columns">
  <div>Sample</div>
  <div>12122</div><div>hello text</div> 
    <div>44444</div> 
  <div>5555</div><div>6666666666666666666666666</div>
</div>

</div>

【问题讨论】：

删除grid-auto-columns: 1fr;?
为您的 div 添加背景，您会注意到您的列是相等的

标签： javascript html css flexbox grid

【解决方案1】：

您需要为您的grid-column 提供固定宽度，因此需要修复width 并且您的每个column 应该相同。

<!DOCTYPE html>
<html>
   <style>
      .grid-equal-columns {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      }
      .grid-equal-columns > * {
      width: 50px;
      overflow: hidden;
      text-align: right;
      margin: 10px;
      }
   </style>
   <body>
      <div class="grid-equal-columns">
      <div>Sample</div>
      <div>12122</div>
      <div>hello text</div>
      <div>44444</div>
      <div>5555</div>
      <div>6666666666666666666666666</div</div>
   </body>
</html>

【讨论】：

【解决方案2】：

grid-auto-columns: 1fr;

创建平均分布到网格的 1fr 列。无论您的文本将在单元格中保留多长时间。

您可以通过两种方式实现。

删除grid-auto-columns: 1fr;

.grid-equal-columns {
    display: grid;
    grid-auto-flow: column;
}
.grid-equal-columns > * {
    overflow: hidden;
    text-align: right;
    margin: 10px;
}

<div class="grid-equal-columns">
  <div>Sample</div>
  <div>12122</div>
  <div>hello text</div> 
    <div>44444</div> 
  <div>5555</div>
  <div> 6666666666666666666666666</div>
</div>

或使用flexbox 和justify-content: space-evenly

.grid-equal-columns {
    display: flex;
    justify-content: space-evenly;
}
.grid-equal-columns > * {
    overflow: hidden;
    text-align: right;
    margin: 10px;
}

<div class="grid-equal-columns">
  <div>Sample</div>
  <div>12122</div>
  <div>hello text</div> 
    <div>44444</div> 
  <div>5555</div>
  <div>6666666666666666666666666</div>
</div>

【讨论】：