CSS 网格 grid-auto-rows: 100% children 溢出 parent
CSS Grid grid-auto-rows: 100% children overflow parent
我有一个网格系统，嵌入在一个无序列表的列表项中。网格系统定义如下。元素 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
中内容的高度，第二行将扩展
但我注意到这会弄乱 parent 网格的高度。 children 溢出它们的 parent，可以在下面示例代码的边框中看到： 黑色边框溢出 parent 容器。请参阅下面的示例代码。随着标题跨越更多行，情况变得更糟。
问题： 如何让 parent（= 网格容器）扩展到其 children 的高度，同时保持第一行有一个最小高度（由元素 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>
只要把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 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>
因为你有固定数量的行，使用 grid-auto-rows 不是正确的方法。
最好明确定义 grid-template-rows 如：
.grid-container{
position: relative;
display: grid;
grid-template-columns: 130px 1fr 200px;
grid-template-rows: auto 1fr;
border: 1px solid red;
}
你的CSS还有其他问题，你使用关键字span，这个关键字是用来添加元素的。在您的情况下，这不是必需的。所以你可以像这样替换行：
grid-row: 1 / span 2;
作者：
grid-row: 1 / 3;
在下面找到经过编辑的工作片段：
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 1fr 200px;
grid-template-rows: auto 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 / 3;
grid-column: 3;
display:grid;
grid-template-columns:1fr 1fr;
grid-gap: 5px;
align-self: start;
}
.gr-2span{
grid-column: 1 / 2;
}
.data span{
display:block;
font-weight:bold;
}
.content{
font-size:0.9em;
grid-row: 2;
grid-column: 1 / 3;
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>
我有一个网格系统，嵌入在一个无序列表的列表项中。网格系统定义如下。元素 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
但我注意到这会弄乱 parent 网格的高度。 children 溢出它们的 parent，可以在下面示例代码的边框中看到： 黑色边框溢出 parent 容器。请参阅下面的示例代码。随着标题跨越更多行，情况变得更糟。
问题： 如何让 parent（= 网格容器）扩展到其 children 的高度，同时保持第一行有一个最小高度（由元素 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>
只要把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 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>
因为你有固定数量的行，使用 grid-auto-rows 不是正确的方法。
最好明确定义 grid-template-rows 如：
.grid-container{
position: relative;
display: grid;
grid-template-columns: 130px 1fr 200px;
grid-template-rows: auto 1fr;
border: 1px solid red;
}
你的CSS还有其他问题，你使用关键字span，这个关键字是用来添加元素的。在您的情况下，这不是必需的。所以你可以像这样替换行：
grid-row: 1 / span 2;
作者：
grid-row: 1 / 3;
在下面找到经过编辑的工作片段：
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 1fr 200px;
grid-template-rows: auto 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 / 3;
grid-column: 3;
display:grid;
grid-template-columns:1fr 1fr;
grid-gap: 5px;
align-self: start;
}
.gr-2span{
grid-column: 1 / 2;
}
.data span{
display:block;
font-weight:bold;
}
.content{
font-size:0.9em;
grid-row: 2;
grid-column: 1 / 3;
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>