如何对齐网格中的列以独立于内容？答案

【问题标题】：How to align columns in a grid to be independent of content?如何对齐网格中的列以独立于内容？
【发布时间】：2021-04-24 04:47:04
【问题描述】：

我有一个包含 3 列的网格（string、buttons、price）。我希望将网格分成相等的 3 部分。现在，如果右侧的任何价格比其他价格长，则中间的按钮不相等。如何解决？

.fab-button {
  border-radius: 50%;
  display: table;
}

.fab-button div {
  background: rgb(0, 0, 0);
  margin: 11px;
}

.fab-button .plus {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 rgb(0, 0, 0), 0 -3px rgb(0, 0, 0), 0 3px rgb(0, 0, 0), -3px 0 rgb(0, 0, 0), 3px 0 rgb(0, 0, 0), 0 -6px rgb(0, 0, 0), 0 6px rgb(0, 0, 0), -6px 0 rgb(0, 0, 0), 6px 0 rgb(0, 0, 0);
}

.fab-button .minus {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 rgb(0, 0, 0), -3px 0 rgb(0, 0, 0), 3px 0 rgb(0, 0, 0), -6px 0 rgb(0, 0, 0), 6px 0 rgb(0, 0, 0);
}

.grid-container {
  display: grid;
}

<div class="list-group-item">
  <div class="grid-container" style="grid-template-columns: 35% auto auto;">
    <div class="grid-item">
      <h6 style="size: 10px; float:left;">{{ item.name }}</h6>
    </div>
    <div class="grid-item">
      <a class="fab-button red bg-success" style=" float:right;">
        <div class="plus"></div>
      </a>
      <a style="float:right; size: 20px; padding-right: 2mm; padding-left: 2mm;">
        <strong>{{count}}</strong>
      </a>
      <a class="fab-button red bg-success" style=" float: right;">
        <div class="minus"></div>
      </a>
    </div>
    <div class="grid-item">
      <span class="text-muted" style="float:right;">
                {{ item.price }} zł
            </span>
    </div>
  </div>
</div>

现在看起来像这样：

【问题讨论】：

你能添加一个预期布局的排水吗？
@tacoshy 我编辑了我的问题

标签： html css angular styles

【解决方案1】：

在你的内联样式中你有：

grid-template-columns: 35% auto auto

--> 所以目前你的列被分割了 35% | 32,5% | 32.5%

并且第二列中的内容向右浮动。我不知道我是否理解您的问题，但是对于 grid-template-columns: auto auto auto 或 grid-template-columns: 1fr 1fr 1fr，您有相同大小的列。

您还可以在列内对齐内容。

【讨论】：