我有一個網格系統，嵌入在無序串列的串列項中。網格系統定義如下。元素 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 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熱心網友回復：
由于您有固定數量的行 usinggrid-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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397283.html
上一篇：如何更改有序串列(HTML)中專案符號的顏色？[復制]
下一篇：樣式表CSS的問題