My paragraph text lacks line breaks and needs to wrap onto a new line when the width exceeds that of the grid container. It works fine without using a grid.
I attempted the method suggested in Prevent content from expanding grid items but had no luck. Another query on word-wrap in a CSS grid appears to involve tables, which are outdated and not recommended in HTML5.
View my JSFiddle example here: https://jsfiddle.net/bvtsan8a/23/
.container {
display: grid;
grid-template-rows: auto;
width: 500px;
background: lightsalmon;
min-width: 0;
min-height: 0;
background:peru;
}
.child{
padding:30px;
margin:30px;
width:100%;
background:indigo;
}
.item{
background:indianred;
padding:30px;
margin:30px;
width:100%;
}
.item p {
min-width: 0;
min-height: 0;
color:gold ;
word-wrap: break-word;
max-width: 100%;
}<div class="container">
<div class="child">
<div class="item">
<p>lololololololololololololololololololololololololololololololololololololololololololo
lolololololololololololololo</p>
</div>
</div>
</div>