In CSS grid, sometimes we want to create a grid layout where certain rows or columns take up a fixed amount of space and the remaining space is divided among the other rows or columns. In this article, we will see how to create the empty grid-template-row in order to fill up the remaining space using CSS. We can achieve this by using the CSS grid-template-rows or grid-template-columns properties with the “auto” and minmax() functions.

Syntax:

.grid-container {
    display: grid;
    grid-template-rows: repeat(n, minmax(auto, 1fr));
}

Approach: To create an empty row that fills up the remaining space in a CSS grid, we can follow the following approach.

• Determine the total number of rows in the grid.
• Use the grid-template-rows property to specify a pattern of rows for the grid.
• Use the repeat() function to create a pattern of rows with the specified properties.
• Use the minmax() function to specify a minimum and maximum size for each row.
• Use “auto” as the minimum size to allow the row to expand to fit its content.
• Use 1fr as the maximum size to allow the row to expand to fill the remaining space in the grid.

Example: This example demonstrates creating the empty grid-template-row to fill up the remaining space.

Output: