将列的宽度限制为特定网格项的宽度

Question

我有一个简单的用例：商品标题和描述。标题应出现在说明上方，我希望标题确定整个列的宽度，也适用于 'description' 行。

CSS 网格是否可能，如果可以，如何实现？

这是期望的输出：

这就是代码，基本上：

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Answer 1

我认为这对于网格（或任何其他 CSS 没有明确设置宽度的显示类型）是不可能的。 CSS-tricks 有关于网格的综合指南，如果你对它感兴趣：

https://css-tricks.com/snippets/css/complete-guide-grid/

我知道您要求 CSS 解决方案，但为了以防万一您在这里找不到它，这里有一个 jQuery 解决方案：

$( document ).ready(function() {
 $('.B').outerWidth($('.A').outerWidth()).show();
});

.A{
  display: table;
}
.B{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)    
  </div>
</div>

Answer 2

不要将列宽设置为 1fr，而是使用 min-content。

使用 min-content，该列将 采取所有换行（文本换行）机会 。

它基本上环绕所有文本，直到列达到最长单词的宽度。

.grid-container {
  display: grid;
  grid-template-columns: min-content; /* formerly 1fr */
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

然后，取消标题框中的换行符：

.grid-container {
  display: grid;
  grid-template-columns: min-content;
}

.A {
  white-space: nowrap;
  background-color: lightgreen; /* just for illustration */
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

参考文献：

将列的宽度限制为特定网格项的宽度

Limit the width of a column to the width of a particular grid item

css

css-grid