How to Make Empty grid-template-row to Fill Remaining Space in CSS ?

Last Updated : 01 Jun, 2023

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .grid-container { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            grid-template-rows: repeat(3, minmax(auto, 1fr)); 
            gap: 10px; 
            background-color: #f2f2f2; 
            padding: 10px; 
        } 
          
        .grid-item { 
            background-color: #ffffff; 
            border: 1px solid #cccccc; 
            padding: 20px; 
            font-size: 30px; 
            text-align: center; 
        } 
          
        .item-4 { 
            grid-row: 3 / 4; 
            grid-column: 1 / 3; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
              GeeksforGeeks 
          </h1> 
    </center> 
    <div class="grid-container"> 
        <div class="grid-item">1</div> 
        <div class="grid-item">2</div> 
        <div class="grid-item">3</div> 
        <div class="grid-item item-4"> 
              4 (spans 2 rows) 
        </div> 
    </div> 
</body> 
  
</html>