How to Get a Table Like Row/Column Alignment in a Flexbox ?

Last Updated : 26 Apr, 2023

In HTML, we can use an <table> element to create a structured layout of rows and columns. However, when using Flexbox to create a layout, we might wonder how we can achieve the same row/column alignment that we get with tables. In this article, we will explore different approaches to achieve table-like row/column alignment in a Flexbox.

Syntax:

.container {
    display: flex;
    flex-direction: row;
    /* or column */
    justify-content: center;
    /* or flex-start, flex-end, 
          space-between, space-around, 
          space-evenly */
    align-items: center;
    /* or flex-start, flex-end, 
          center, baseline, stretch */
}

.container>div {
    /* Flexbox properties for child elements */
}

We can set a container element to be a Flexbox by setting its display property to Flex. We can then use various Flexbox properties to control the layout of its child elements.

Approach 1: Using Flexbox and Grid: One approach is to use both Flexbox and Grid. We can set the container element to be a Flexbox with a row direction, and each child element to be a Grid with one row and one column. This way, we can align the child elements as if they were table cells.

Example: In this example, we use Flexbox to center the Grid container vertically, and Grid to create the columns and rows. The repeat() function is used to specify that we want 3 columns with equal width (1fr) in each row. The grid-column-gap property is used to add some space between the columns.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Table-like Row/Column Alignment 
        using Flexbox and Grid 
    </title> 
    <style> 
        .container { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        } 
  
        .row { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            grid-column-gap: 10px; 
            margin: 10px 0; 
        } 
  
        .cell { 
            padding: 10px; 
            border: 1px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; text-align: center;"> 
        GeeksforGeeks 
    </h1> 
      
    <div class="container"> 
        <div class="row"> 
            <div class="cell">Name</div> 
            <div class="cell">Age</div> 
            <div class="cell">Gender</div> 
        </div> 
        <div class="row"> 
            <div class="cell">John Doe</div> 
            <div class="cell">30</div> 
            <div class="cell">Male</div> 
        </div> 
        <div class="row"> 
            <div class="cell">Jane Doe</div> 
            <div class="cell">25</div> 
            <div class="cell">Female</div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Approach 2: Using Flexbox and Pseudo-elements: Another approach is to use Flexbox and pseudo-elements to create additional columns. We can set the container element to be a Flexbox with a row direction, and use the ::before and ::after pseudo-elements to create additional columns. We can then set the width of the pseudo-elements to be equal to the desired gap between columns and set the flex-grow property of the child elements to fill the available space.

Example: In this example, we have a container div with three child divs, each with the class “row”. The first child div represents the table header, while the remaining child divs represent the table content. Each row div contains several child divs, each with the class “cell”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Table-like Row/Column Alignment  
        using Flexbox and Grid 
    </title> 
    <style> 
        .table { 
            display: flex; 
            flex-direction: column; 
            align-items: stretch; 
        } 
  
        .row { 
            display: flex; 
            flex-direction: row; 
            align-items: center; 
        } 
  
        .cell { 
            flex-grow: 1; 
            padding: 10px; 
            border: 1px solid black; 
        } 
  
        .header { 
            font-weight: bold; 
        } 
  
        .table::before, 
        .table::after, 
        .row::before, 
        .row::after { 
            content: ""; 
            flex-basis: 10px; 
            flex-shrink: 0; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; text-align: center;"> 
        GeeksforGeeks 
    </h1> 
      
    <div class="table"> 
        <div class="row header"> 
            <div class="cell">Name</div> 
            <div class="cell">Age</div> 
            <div class="cell">Gender</div> 
        </div> 
        <div class="row"> 
            <div class="cell">John Doe</div> 
            <div class="cell">30</div> 
            <div class="cell">Male</div> 
        </div> 
        <div class="row"> 
            <div class="cell">Jane Doe</div> 
            <div class="cell">25</div> 
            <div class="cell">Female</div> 
        </div> 
    </div> 
</body> 
  
</html>