列の幅を特定のグリッド項目の幅に制限します

Question

私はこの単純な使用例を持っています：項目のタイトルと説明。タイトルは説明の上に表示され、タイトルは「列」全体の幅、「説明」行の幅を決定します。

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

代わりの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
• Difference between hard wrap and soft wrap?
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

私は（グリッドでこれが可能であるとは思いませんか明示的に幅を設定せずに他のCSS表示タイプ）。

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

私はあなたがCSSのソリューションを求めて知っているが、念のためにあなたがここでそれを見つけることができませんjQueryのソリューションです：CSS-トリックは、あなたがそれに興味がある場合は、グリッド上の包括的なガイドがあります。

$(document).ready(function() { 
 
\t $('.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>