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!
That one is easy to fix — and you may never even have it happen to you, because this snippet is so common in our stylesheets:
img {
max-width: 100%;
}
To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.
So, we can either fix it like this:
.grid {
/* auto minimum width, causing problem */
grid-template-columns: 1fr 300px;
/* fix: minimum width of 0 */
grid-template-columns: minmax(0, 1fr) 300px;
}
Or, we put an actual min-width on the element that occupies that grid column. In our simple demo, the <main> element automatically places itself in that first column as it is the first child of the grid.
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.
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!
That one is easy to fix — and you may never even have it happen to you, because this snippet is so common in our stylesheets:
To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.
So, we can either fix it like this:
Or, we put an actual min-width on the element that occupies that grid column. In our simple demo, the
<main>element automatically places itself in that first column as it is the first child of the grid.Original post: https://css-tricks.com/preventing-a-grid-blowout/