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

Last Updated : 14 Oct, 2024

Getting a table-like row/column alignment in Flexbox refers to structuring content similarly to traditional tables, but with more flexibility. Flexbox allows items to align in rows and columns dynamically, offering responsive control over spacing, alignment, and positioning, ideal for modern layouts.

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.

Table of Content

Using Flexbox and Grid
Using Flexbox and Pseudo-elements

1. Using Flexbox and Grid

The Using Flexbox and Grid approach involves setting the container as a Flexbox for centering, while child elements use CSS Grid to create a table-like structure. Grid handles the columns and rows, offering flexible, responsive alignment and spacing.

Example: In this example the table-like alignment using Flexbox and Grid. It creates a structured layout with rows and cells for displaying data, such as names, ages, and genders.

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>

    <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:

row-column — Using Flexbox and Grid Example Output

2. Using Flexbox and Pseudo-elements

The Using Flexbox and Pseudo-elements approach creates a table-like layout by using Flexbox for row alignment and ::before/::after pseudo-elements to simulate column spacing. The flex-grow property ensures child elements fill available space, mimicking table cells with flexible, responsive design.

Example: In this example we creates a table-like layout using Flexbox. It displays data in rows and cells, including headers for name, age, and gender, with flexible spacing.

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>

    <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>