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 class="table">
  <div class="footer-pagination">
.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 250px;

.table {
  overflow: auto;

Check out this CodePen for a working example.

Loading comments...