将列的宽度限制为特定网格项的宽度(Limit the width of a column to the width of a particular grid item)

我有这个简单的用例：项目标题和描述。 标题应出现在描述的上方，我希望标题确定整个列的宽度，也用于“描述”行。

这可能与CSS Grid，如果是这样，怎么样？

这是所需的输出：

这就是代码，基本上：

.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> 
  
 
I have this simple use case: an item title and description. The title should appear above the description and I want the title to determine the width of the entire column, also for the 'description' row.
 
Is that possible with CSS Grid, and if so, how?
 
This is the desired output:
 
 
And that's the code, basically:
 
 
 
  
  
.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> 
  
 

                
最满意答案
                
                    
                        
 不要将列宽设置为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> 
  
 
 
 参考文献： 
 
 
  https://www.w3.org/TR/css3-grid-layout/#track-sizing  
  https://www.w3.org/TR/css-sizing-3/#min-content  
  硬包装和软包装的区别？  
  https://developer.mozilla.org/en-US/docs/Web/CSS/white-space  
Instead of setting the column width to 1fr, use min-content.
 
With min-content, the column will take all line break (text wrapping) opportunities. 
 
It basically wraps all text until the column reaches the width of the longest word.
 
 
 
  
  
.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> 
  
 
 
Then, suppress the line breaks in the title box:
 
 
 
  
  
.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> 
  
 
 
References:
 
 
 https://www.w3.org/TR/css3-grid-layout/#track-sizing 
 https://www.w3.org/TR/css-sizing-3/#min-content 
 Difference between hard wrap and soft wrap? 
 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space