I'm using CSS Grid to lay out a fixed-height container with 8 rows. Each row is defined using:
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
The container has a fixed height of 600px
, and there are 8 .box
items inside it. One of these items (the third one) contains a very large block of text, which clearly overflows its grid cell.
.container {
height: 600px;
width: 500px;
display: grid;
grid-auto-flow: row;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}
.box {
color: white;
font-size: 1.5rem;
text-align: center;
}
body {
background-color: bisque;
}
<body>
<div class="container">
<div class="box" style="background-color: #e53935">FIRST</div>
<div class="box" style="background-color: #d81b60">SECOND</div>
<div class="box" style="background-color: #8e24aa">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus sed
tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
inventore illum perferendis odio quo eligendi consequatur beatae, libero
repellat eaque esse. Error. Vero deleniti repellendus enim itaque
sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
voluptatibus non modi facere saepe minus necessitatibus, cum autem
blanditiis?
</div>
<div class="box" style="background-color: #5e35b1">FOURTH</div>
<div class="box" style="background-color: #3949ab">FIFTH</div>
<div class="box" style="background-color: #1e88e5">SIXTH</div>
<div class="box" style="background-color: #00acc1">SEVENTH</div>
<div class="box" style="background-color: #00897b">EIGHTH</div>
</div>
</body>
I expected the third row to expand vertically to fit its overflowing content. But instead, it stays fixed at 100px
and overflows visually.
I am trying to understand the underlying concept here why THIRD ROW NOT EXPANDING to fit the content?
The reason the third row not expanding is because the grid track size and grid item size are NOT the same thing. With repeat(auto-fit, minmax(100px, 1fr))
, you devided the grid into 6 row tracks with 100px each. The thrid grid item has a larger size that cannot fit in the 100px grid track size, so it overflows. But it will NOT expand its grid track since it will modify the grid row definition.
TL;DR, the grid track will not expand automatically if there are no free space left.
FYI. If you're looking for a soltuion that make a container with at least 600px -
Then you could try the following solution:
.container {
/* use min-height instead of height, so the track size can be expanded */
min-height: 600px;
width: 500px;
display: grid;
grid-auto-flow: row;
/* with max(100px, auto), it takes at least 100px, but respect its minimum content size */
grid-auto-rows: minmax(max(100px, auto), 1fr);
}
.box {
color: white;
font-size: 1.5rem;
text-align: center;
/* define minimum grid item size */
min-height: 100px;
}
body {
background-color: bisque;
}
<body>
<div class="container">
<div class="box" style="background-color: #e53935">FIRST</div>
<div class="box" style="background-color: #d81b60">SECOND</div>
<div class="box" style="background-color: #8e24aa">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus sed
tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
inventore illum perferendis odio quo eligendi consequatur beatae, libero
repellat eaque esse. Error. Vero deleniti repellendus enim itaque
sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
voluptatibus non modi facere saepe minus necessitatibus, cum autem
blanditiis?
</div>
<div class="box" style="background-color: #5e35b1">FOURTH</div>
<div class="box" style="background-color: #3949ab">FIFTH</div>
<div class="box" style="background-color: #1e88e5">SIXTH</div>
<div class="box" style="background-color: #00acc1">SEVENTH</div>
<div class="box" style="background-color: #00897b">EIGHTH</div>
</div>
</body>
To answer the follow up question in the comment. By default, implicitly created rows/columns will always use min-content
as their sizes. Thus with grid-template-columns
but no grid-template-rows
or grid-auto-rows
defined, the first rows is actually an implicit row, which uses the min-content
(determined by the long paragragh) as its default height. That it took all the available height (600px
) and even more than that to show all the content.
Here's a way to make it work as what you think it should work. Also here's an existing answer that explains what min-height: 0
does in details.
.container {
height: 600px;
width: 500px;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* make sure all the rows take the space equally */
grid-auto-rows: 1fr;
}
.box {
color: white;
font-size: 1.5rem;
text-align: center;
/* make sure the row size won't be affected by its content-size (which will cause it to overflow) */
min-height: 0;
}
body {
background-color: bisque;
}
<body>
<div class="container">
<div class="box" style="background-color: #e53935">FIRST</div>
<div class="box" style="background-color: #d81b60">SECOND</div>
<div class="box" style="background-color: #8e24aa">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus sed
tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
inventore illum perferendis odio quo eligendi consequatur beatae, libero
repellat eaque esse. Error. Vero deleniti repellendus enim itaque
sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
voluptatibus non modi facere saepe minus necessitatibus, cum autem
blanditiis?
</div>
<div class="box" style="background-color: #5e35b1">FOURTH</div>
<div class="box" style="background-color: #3949ab">FIFTH</div>
<div class="box" style="background-color: #1e88e5">SIXTH</div>
<div class="box" style="background-color: #00acc1">SEVENTH</div>
<div class="box" style="background-color: #00897b">EIGHTH</div>
</div>
</body>