How to Create Three-Column Layout in HTML and CSS

Introduction

A three-column layout is a common design pattern in web development, used for arranging content into three sections, typically for navigation, main content, and additional information. You can easily create a three-column layout using Flexbox or CSS Grid.

In this tutorial, you'll learn how to create a three-column layout using both Flexbox and CSS Grid.

Problem Statement

Create a CSS layout that:

Displays content in three columns.
Adjusts the layout to stack vertically on smaller screens.

Example:

Input: Three div elements containing content.
Output: The div elements are displayed side by side in three columns on larger screens and stack vertically on smaller screens.

Solution Steps

Create a Three-Column Layout Using Flexbox: Align three div elements side by side using Flexbox.
Create a Three-Column Layout Using CSS Grid: Set up a three-column grid using CSS Grid.

Method 1: Three-Column Layout Using Flexbox

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Column Layout with Flexbox</title>
    <style>
        /* Step 1: Create the Flexbox container */
        .flex-container {
            display: flex;  /* Aligns items side by side */
            gap: 20px;      /* Adds space between the columns */
        }

        /* Step 2: Style the columns */
        .column {
            flex: 1;  /* Makes each column take equal space */
            padding: 20px;
            background-color: #f4f4f4;
        }

        /* Optional: Responsive design */
        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column;  /* Stacks columns on smaller screens */
            }
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="column">
            <h2>Column 1</h2>
            <p>This is the first column with some content.</p>
        </div>
        <div class="column">
            <h2>Column 2</h2>
            <p>This is the second column with some content.</p>
        </div>
        <div class="column">
            <h2>Column 3</h2>
            <p>This is the third column with some content.</p>
        </div>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Create the Flexbox Container

Use display: flex to align items side by side:
```
.flex-container {
    display: flex;  /* Aligns items side by side */
    gap: 20px;      /* Adds space between the columns */
}
```
- display: flex; enables horizontal alignment of the child elements.
- gap: 20px; creates space between the columns.

Step 2: Style the Columns

Use flex: 1 to ensure all columns take equal space:

.column {
    flex: 1;  /* Ensures all columns take equal space */
    padding: 20px;
    background-color: #f4f4f4;
}

Optional: Responsive Design

Use media queries to make the columns stack vertically on smaller screens:

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;  /* Stacks columns on smaller screens */
    }
}

Method 2: Three-Column Layout Using CSS Grid

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Column Layout with CSS Grid</title>
    <style>
        /* Step 1: Create the grid container */
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;  /* Three equal-width columns */
            gap: 20px;  /* Adds space between the columns */
        }

        /* Step 2: Style the grid items */
        .grid-item {
            padding: 20px;
            background-color: #3498db;
            color: white;
        }

        /* Optional: Responsive design */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;  /* Stacks columns on smaller screens */
            }
        }
    </style>
</head>
<body>

    <div class="grid-container">
        <div class="grid-item">
            <h2>Column 1</h2>
            <p>This is the first column with content inside.</p>
        </div>
        <div class="grid-item">
            <h2>Column 2</h2>
            <p>This is the second column with content inside.</p>
        </div>
        <div class="grid-item">
            <h2>Column 3</h2>
            <p>This is the third column with content inside.</p>
        </div>
    </div>

</body>
</html>

Explanation

Step 1: Create the Grid Container

Use display: grid to create a three-column layout:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* Three equal-width columns */
    gap: 20px;  /* Adds space between the columns */
}

display: grid; enables the grid layout.
grid-template-columns: 1fr 1fr 1fr; creates three equal-width columns.

Step 2: Style the Grid Items

Use padding and background color to style the grid items:

.grid-item {
    padding: 20px;
    background-color: #3498db;
    color: white;
}

Optional: Responsive Design

Stack the columns vertically on smaller screens using media queries:

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;  /* Stacks columns on smaller screens */
    }
}

Conclusion

In this tutorial, you learned two ways to create a three-column layout using Flexbox and CSS Grid. Flexbox is a flexible and responsive solution, while CSS Grid offers more control over the structure of the layout. Both methods allow you to easily align elements side by side and stack them vertically on smaller screens using media queries. Choose the approach that best suits your project.

Java Guides

Search This Blog