我有一个网格系统，嵌入在无序串列的串列项中。网格系统定义如下。元素 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>uj5u.com热心网友回复：
只需更改grid-auto-rows: 100%为grid-auto-rows: 1fr;
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: 1fr;
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 Lore
0 评论