CSS Grid - 在三列中定位文本答案

【问题标题】：CSS Grid - position text in three columnsCSS Grid - 在三列中定位文本
【发布时间】：2021-09-12 03:00:24
【问题描述】：

目前我正在努力定位这 3 个文本列，就像在图片中一样。每列包含 3 个段落。

问题是，段落的宽度不相等，所以grid-template-columns:repeat(3, 1fr) 不是理想的解决方案，因为第二和第三段会有不必要的大空白，这就是责任进来时的问题。（因此布局很快就会中断空白）。

我尝试了min-content 或max-content 属性，但我仍然无法弄清楚，所以它看起来就像在图片中一样。

所以目标是像在图片中一样对齐其中的列和段落，但没有不需要的空白，因此负责的工作会更容易。

有没有更好的解决办法？

我已经尽力了，这里是codepen

谢谢！

【问题讨论】：

网格显示需要一个父项，您可以从该父项中设置该网格。然后 auto 将从它所拥有的最宽的内容或单元格中调整列的大小。 justify-content 将告诉它应该如何放置。开始，中心，结束，...一个可能的例子codepen.io/gc-nomade/pen/VwbYaqL
所以你想让内容决定列的宽度？
...这也可能是一个真正的表格...当内容值得时使用表格并没有错。

标签： html css flexbox grid css-grid

【解决方案1】：

您可以在grid-template-column 属性minmax(5rem, 10rem) minmax(3rem, 5rem) auto; 中使用minmax，这会将第一列的最小宽度设置为5rem和最大宽度到10rem，秒到3rem的min > 和 max 的 5rem，那么 最后一列的宽度将是 其内容的宽度 => 自动。

css-grid-layout-minmax ~ MDN

.card {
  background: silver;
  padding: 0 1rem;
  border-radius: 12px;
}

.column {
  display: grid;
  grid-template-columns: minmax(5rem, 10rem) minmax(3rem, 5rem) auto;
  justify-content: flex-start;
}

p:nth-of-type(3),
p:nth-of-type(4),
p:nth-of-type(2) {
  text-align: right;
}

p + p {
  margin-left: 1rem;
}

<div class="card">
  <div class="column-wrapper">
    <div class="column">
      <p>lorem:</p>
      <p>282726€</p>
      <p>28%</p>
    </div>

    <div class="column">
      <p>lorem ipsum:</p>
      <p>287€</p>
      <p>10%</p>
    </div>

    <div class="column">
      <p>lorem:</p>
      <p>19118€</p>
    </div>
  </div>
</div>

【讨论】：