How to Align Last Row to Grid in Flexbox ?

Last Updated : 26 Apr, 2023

Flexbox is a very useful layout module of CSS (Cascading Style Sheets). It is very easy to create flexible and responsive layouts using Flexbox. But it doesn’t always give the expected alignment, especially on the last row of a grid. Flexbox will distribute the items evenly across the last row, which can result in unwanted gaps. In this article, we will see the useful approaches for aligning the last row of items in a Flexbox grid to create a more polished design.

Approaches 1: Here, we will justify-content: space-between property of CSS.

Syntax:

justify-content: space-between;

Example: In this example, we simply use the justify-content: space-between property to create a dummy child box and we set its visibility to hidden.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        #heading { 
            font-size: 42px; 
            font-weight: bold; 
            color: #009900; 
            margin: 20px; 
            margin-left: 80px; 
  
        } 
  
        .child { 
            width: 90px; 
            height: 80px; 
            border: 1px solid green; 
            background-color: green; 
            columns: white; 
            display: flex; 
            justify-content: center; 
  
        } 
  
        .parent { 
            width: 400px; 
            display: flex; 
            flex-wrap: wrap; 
            gap: 20px; 
            border: 2px solid green; 
            justify-content: space-between; 
        } 
  
        .dummy-child { 
            visibility: hidden; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="heading">GeeksforGeeks</div> 
    <div class="parent"> 
        <div class="child">Box 1</div> 
        <div class="child">Box 2</div> 
        <div class="child">Box 3</div> 
        <div class="child">Box 4</div> 
        <div class="child">Box 5</div> 
        <div class="child dummy-child">Box 6</div> 
    </div> 
</body> 
  
</html>

Output:

Approaches 2: Here, we will use the display: grid property of CSS.

Syntax:

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    justify-content: space-between;
}

Example 2: This example describes the alignment of the last row element to the grid with the help of the display property & setting its value as a grid.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        #heading { 
            font-size: 42px; 
            font-weight: bold; 
            color: #009900; 
            margin: 20px; 
            margin-left: 80px; 
        } 
  
        .child { 
            width: 90px; 
            height: 80px; 
            border: 1px solid green; 
            background-color: green; 
            columns: white; 
            display: flex; 
            justify-content: center; 
        } 
  
        .parent { 
            width: 400px; 
            display: grid; 
            grid-template-columns: repeat(auto-fill, 90px); 
            justify-content: space-between; 
            grid-gap: 20px; 
            border: 2px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="heading">GeeksforGeeks</div> 
    <div class="parent"> 
        <div class="child">Box 1</div> 
        <div class="child">Box 2</div> 
        <div class="child">Box 3</div> 
        <div class="child">Box 4</div> 
        <div class="child">Box 5</div> 
    </div> 
</body> 
  
</html>