The snippet below uses CSS Grid to increase the number of columns for wide containers. For narrow containers (e.g. uncomment width: 80vw
or resize the example), it adds implicit rows (only 2 are explicit in the grid-template-rows
property). How can I maintain only 2 rows, making the grid items that "overflow" the 2-by-n grid hidden?
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
/* width: 80vw; */
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(2, 1fr);
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
When we use grid-template-columns and grid-template-rows we create an Explicit Grid. However if we try and place an item outside of that grid the browser will create an Implicit Grid line or lines in order to hold that item.
The grid-auto-rows CSS property is part of the CSS Grid Layout specification, specifying the size of the grid rows that were created without having an explicit size. In other words, this property sets the size of implicit rows and any other rows that have not been explicitly sized in the grid-template-rows property.
You can set height of auto generated row to 0px
using grid-auto-rows: 0;
and hide them using overflow-y: hidden
. Demo:
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(2, 1fr);
grid-auto-rows: 0; /* set height to 0 for autogenerated grid rows */
overflow-y: hidden; /* hide grid items that overflow */
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
</div>
You can't prevent implicit rows from being created (spec reference), but you can set a height on the container and hide the overflow.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
max-height: 110px;
overflow: hidden;
border: 2px solid #f76707;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With