Menu
I have a CSS grid that is set to auto-fill the columns, to display as many items on a row as will fit.
This is done with: grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
I would like to be able to resize selected grid items, which I am trying with:
resize: both;
overflow: auto;
This works at a basic level, but the content will overlap/stretch over adjacent grid items when resized horizontally:
When resized vertically, the rows below are instead pushed down, so there is no overlap:
This is the behaviour I want horizontally too.
I understand this is likely to do with using auto-fill for the columns, as when tracks are explicitly defined the stretching works the same on both axes.
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, 10em);
/* grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); */
}
.grid>div {
background-color: #eeeeff;
padding: 0.5rem;
}
.resize {
resize: both;
overflow: auto;
}<div class="grid">
<div class="resize">Resize Me</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>JSFiddle
902
You can use flex to achieve this:
.grid {
display: flex;
flex-wrap: wrap;
}
.grid>div {
border: 1px solid red;
width: 150px;
}
.grid>div {
background-color: #eeeeff;
margin: 1em;
padding: 10px;
}
.resize {
resize: both;
overflow: auto;
border: 1px solid red;
}<html>
<body>
<div class="grid">
<div class="resize">Resize Me</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</body>
</html>The way you have it defined, the resize works on the items, but not on the column tracks. That's why you're seeing the overlap when resizing horizontally. The columns are fixed in place, based on the grid-template-columns rule 1.
The only way to make the column tracks resize with the items would be if the columns were set to auto (content-based sizing), but this cannot co-exist with auto-fill or auto-fit2.
You don't have this resizing problem in the vertical direction because you haven't defined any rows. Therefore, the grid defaults to grid-auto-rows: auto (again, content-based sizing), and the items and row tracks resize in harmony.
But since you want horizontal wrapping, you can't use this technique for the columns. It's clearly a limitation in grid layout.
Try flexbox instead, which isn't a great alternative in this case (especially because it still doesn't support the gap property3), but it may get you a step closer to your goal.
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > div {
width: 10em;
margin: 5px;
background-color: #ccc;
padding: 0.5rem;
}
.resize {
resize: both;
overflow: auto;
border: 1px solid red;
}<div class="grid">
<div class="resize">Resize Me</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>References:
26
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
