I know there is a lot of documentation to this but I've only managed to find one working solution. I have a grid with 1 row and 3 columns. The first column has a lot of text that makes the column automatically expand to fit it. Code:
.grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
overflow: hidden;
min-width: 0;
}<div>
<h1>Hi</h1>
</div>
<div class="grid">
<div>
<h1>dummytextdummytextdummytext</h1>
</div>
<div>
<h1>hi</h1>
</div>
<div>
<h1>hi</h1>
</div>
</div>However, the columns still automatically expand to fit the "dummytext" h1.
Now, when I specifically apply a class, say column-1 to the specific column that overflows, it stops overflowing and strictly adheres to the size of 1fr. Example:
.column-1
{
overflow: hidden;
}
My question is, why does it work when I specifically apply it to a column, and how do I get it to apply to the grid as a whole?
