title: How to freeze css grid column widths after initial display
body: <p>I'm using CSS Grid to display a table of records. Each column is defined as &quot;auto&quot; because I'd like the column widths to fit the content.</p>
  <p>In my app I have a button to fetch the next page of results, and I dynamically repopulate the grid from page 2 of the results. This has the effect of making the grid jump, because, of course, the content of each column on page 2 is not the same as it was on page 1. (I'm populating the table using Vue in a v-for loop.)</p>
  <p>Is there any way to freeze the width of the columns after they are initially populated?</p>
  <p>The only method I can think of is to use Javascript to get the widths of each column and then rewrite the CSS <code>grid-template-columns</code> value to specify columns as fixed-width. This is possible, but it feels like a kludge.</p>
  <p>Maybe there's some CSS magic I don't know about? Something <code>position: sticky</code>, but for column widths?</p>