Practical use of CSS Grid min-content

There are several use-cases for CSS Grid. In this example, it is used to solve the following requirements:

• Create a table component with a fixed height
• A header should always be at the top of the component
• A footer should always be at the bottom of the component
• The component should always have the same height, no matter how many rows are displayed
• Overflow should be scollable

This can be accomplished with auto and min-content:

<div class="grid">
  <div class="header-filter">
    ...
  </div>
  <div class="table">
    ...
  </div>
  <div class="footer-pagination">
    ...
  </div>
</div>

.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 250px;
}

.table {
  overflow: auto;
}

Check out this CodePen for a working example.