I have a grid system, embedded in the list items of an unordered list. The grid system is defined as below. Element 3 spans 2 rows. Element 4 spans two columns
Grid List item 1:
/----------/----------/----------/
/ 1 / 2 / /
/----------/----------/ 3 /
/ 4 / /
/----------/----------/----------/
Grid List item 2:
/----------/----------/----------/
/ 1 / 2 / /
/----------/----------/ 3 /
/ 4 / /
/----------/----------/----------/
...
The goal is that row 1 remains minimal size to its content, whereas row 2 extends, to fit the size of element 3.
To achieve this behaviour, I added grid-auto-rows: 100%; to the grid container. The first row now has the minimal height needed for the title, and the second row will expand if element '3' is larger than the height of the content in elements 2+4
But I noticed that this messes up the height of the parent grid. The children overflow their parent, which can be seen in the borders in the sample code below: The black borders overflow the parent container. See sample code below. It becomes worse as the title spans more lines.
Question: How can I have the parent (= grid container) expand to the height of its children, while keeping the behavior that the first row has a minimal height (as defined by the height required for the text in element 2) Note: I require this grid structure, such that the content can be easily reorganized for smaller viewports.
Sample code: 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>Since you have a fixed number of rows using grid-auto-rows isn't the right way to do.
It's better to explicitly define grid-template-rows like:
.grid-container{
position: relative;
display: grid;
grid-template-columns: 130px 1fr 200px;
grid-template-rows: auto 1fr;
border: 1px solid red;
}
There is others issues in your CSS, you use the keyword span, this keyword is used to add elements. This isn't necessary in your case. So you can replace lines like this:
grid-row: 1 / span 2;
by:
grid-row: 1 / 3;
Find below the working snippet with the edits :
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>