How to Create a Group of Buttons with Evenly Space in CSS ?

Last Updated : 26 Apr, 2023

When working with a group of buttons, it is important to ensure that they are spaced evenly so that they appear visually appealing and are easy to use. There are several approaches to achieving this in CSS. In this article, we will see the different ways to get a group of buttons with even space using CSS. The following approaches will be used to accomplish this task, which are described below.

Approach 1: Use display: flex and justify-content: space-between: This approach makes use of the flexbox layout model. By applying display: flex to the container element that holds the buttons, you can control the spacing between the buttons using the justify-content property. Setting it to space-between will evenly distribute the space between the buttons, pushing the first and last buttons to the edges of the container.

Syntax:

.container {
    display: flex;
    justify-content: space-between;
}

Example: This example describes the simple way to group the buttons with space evenly using the display & justify-content property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
          Using display: flex and  
          justify-content: space-between 
      </title> 
    
    <style> 
        .container { 
            display: flex; 
            justify-content: space-between; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green;"> 
          GeeksforGeeks 
      </h1> 
      
      <div class="container"> 
        <button>Button 1</button> 
        <button>Button 2</button> 
        <button>Button 3</button> 
        <button>Button 4</button> 
    </div> 
</body> 
</html>

Output:

using justify-content: space-between

Approach 2: Use display: grid and grid-template-columns: This approach uses a CSS grid to create a grid layout for the buttons. By setting the grid-template-columns property to a value that divides the container width evenly, you can create equal spacing between the buttons.

Syntax:

.container {
    display: grid;
    grid-template-columns: repeat(n, 1fr);
    gap: 10px;
}

Example: This example describes the simple way to group the buttons with space evenly using the display & grid-template-columns property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        Using display: grid and  
        grid-template-columns 
    </title> 
    <style> 
        .container { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
      
      <div class="container"> 
        <button>Button 1</button> 
        <button>Button 2</button> 
        <button>Button 3</button> 
        <button>Button 4</button> 
    </div> 
</body> 
</html>

Output:

Approach 3: Use margin and calc() function: This approach uses the calc() function in CSS to calculate the margin value for the buttons. By subtracting the total margin from the container width and dividing the result by the number of buttons minus 1, you can create equal spacing between the buttons.

Syntax:

.container {
    display: flex;
}

button {
    margin-right: calc((100% - (n * width)) / (n - 1));
    width: width;
}

Example 3: This example describes the simple way to group the buttons with space evenly using the margin property and calc() method.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Using margin and calc() function</title> 
    <style> 
        .container { 
            display: flex; 
        } 
  
        button { 
            margin-right: calc((100% - (4 * 100px)) / 2); 
            width: 100px; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green;"> 
          GeeksforGeeks 
      </h1> 
      
      <div class="container"> 
        <button>Button 1</button> 
        <button>Button 2</button> 
        <button>Button 3</button> 
        <button>Button 4</button> 
    </div> 
</body> 
</html>