Preventing a Grid Blowout
Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.
.grid {
display: grid;
grid-template-columns: 1fr 300px;
}
That's somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It's true that the auto value would do the same, but auto isn't quite as robust since it's size is based on the content inside. So, if you had too little content, then your column might not fill the entire space you want it to. But while 1fr is slightly more robust, it won't quite protect you from content that is too big!
Here's the grid behaving just fine with some text content:
Now, watch that right column get blown off the page when we drop a gigantic image in that colum...