【发布时间】：2021-12-29 14:42:58
【问题描述】：
我有一个网格系统，嵌入在无序列表的列表项中。网格系统定义如下。元素 3 跨越 2 行。元素 4 跨越两列
Grid List item 1:
/----------/----------/----------/
/ 1 / 2 / /
/----------/----------/ 3 /
/ 4 / /
/----------/----------/----------/
Grid List item 2:
/----------/----------/----------/
/ 1 / 2 / /
/----------/----------/ 3 /
/ 4 / /
/----------/----------/----------/
...
目标是第 1 行对其内容保持最小大小，而第 2 行扩展以适应元素 3 的大小。
为了实现这种行为，我将grid-auto-rows: 100%; 添加到网格容器中。第一行现在具有标题所需的最小高度，如果元素 '3' 大于元素 2+4 中内容的高度，则第二行将扩展
但我注意到这会弄乱父网格的高度。子元素溢出父容器，可以在下面示例代码的边框中看到： 黑色边框溢出父容器。请参阅下面的示例代码。随着标题跨越更多行，情况会变得更糟。
问题：如何让父级（= 网格容器）扩展到其子级的高度，同时保持第一行具有最小高度（由所需高度定义）的行为对于元素 2 中的文本） 注意：我需要这种网格结构，以便可以轻松地为更小的视口重新组织内容。
示例代码： https://jsfiddle.net/92n3xrpq/
header{
height:100px;
background-color:grey;
}
#productlist{
margin:0;padding:0; list-style-type:none;
}
#productlist li{margin-top:30px;}
.grid-container{
position:relative;
display:grid;
grid-template-columns: 130px auto 200px;
grid-template-rows:auto;
grid-auto-rows: 100%;
border:1px solid red;
}
.grid-container > div{
border: 1px solid black;
}
.first{
}
.second{
align-self:start;
}
.second h2{
font-size:1.2em;
color:black;
margin:0;
}
.data{
padding:8px;
font-size:0.9em;
grid-row: 1 / span 2;
grid-column: 3 / 4;
display:grid;
grid-template-columns:1fr 1fr;
grid-gap: 5px;
align-self: start;
}
.gr-2span{
grid-column: 1 / span 2;
}
.data span{
display:block;
font-weight:bold;
}
.content{
font-size:0.9em;
grid-row: 2/ 3;
grid-column: 1 / span 2;
place-self: stretch stretch;
}
<header>
</header>
<section>
<ul id="productlist">
<li class="grid-container">
<div class="first">
</div>
<div class="second">
<h2><a href="">Some title</a></h2>
</div>
<div class="data">
<div class="gr-2span">
<span class="product_info_title">Author(s):</span>Y. This guy
</div>
<div>
<span class="product_info_title">Publisher:</span>
My publis
</div>
<div>
<span class="product_info_title">Pages:</span>
999
</div>
<div>
<span class="product_info_title">Yearr:</span>
1464
</div>
<div>
<span class="product_info_title">Weight:</span>
9900 gr.
</div>
<div>
<span class="product_info_title">Formaat:</span>
30,5x20,5 cm
</div>
<div>
<span class="product_info_title">Price:</span>
€ -
</div>
<div class="gr-2span">
<span class="product_info_title">Extra:</span>text.
</div>
</div>
<div class="gr-2cols content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</div>
</li>
<li class="grid-container">
<div class="first">
</div>
<div class="second">
<h2><a href="">Some title</a></h2>
</div>
<div class="data">
<div class="gr-2span">
<span class="product_info_title">Author(s):</span>Y. This guy
</div>
<div>
<span class="product_info_title">Publisher:</span>
My publis
</div>
<div>
<span class="product_info_title">Pages:</span>
999
</div>
<div>
<span class="product_info_title">Yearr:</span>
1464
</div>
<div>
<span class="product_info_title">Weight:</span>
9900 gr.
</div>
<div>
<span class="product_info_title">Formaat:</span>
30,5x20,5 cm
</div>
<div>
<span class="product_info_title">Price:</span>
€ -
</div>
<div class="gr-2span">
<span class="product_info_title">Extra:</span>text.
</div>
</div>
<div class="gr-2cols content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.f</p>
</div>
</li>
</li>
<li class="grid-container">
<div class="first">
</div>
<div class="second">
<h2><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text It has roots in a piece of classical Latin literature </a></h2>
</div>
<div class="data">
<div class="gr-2span">
<span class="product_info_title">Author(s):</span>Y. This guy
</div>
<div>
<span class="product_info_title">Publisher:</span>
My publis
</div>
<div>
<span class="product_info_title">Pages:</span>
999
</div>
<div>
<span class="product_info_title">Yearr:</span>
1464
</div>
<div>
<span class="product_info_title">Weight:</span>
9900 gr.
</div>
<div>
<span class="product_info_title">Formaat:</span>
30,5x20,5 cm
</div>
<div>
<span class="product_info_title">Price:</span>
€ -
</div>
<div class="gr-2span">
<span class="product_info_title">Extra:</span>text.
</div>
</div>
<div class="gr-2cols content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.f</p>
</div>
</li>
</ul>
</section>【问题讨论】：