How to Create Two-Column Layout in HTML and CSS

Introduction

A two-column layout is commonly used to organize content side by side, such as a main content area next to a sidebar. It splits the content into two sections side by side, which is useful for creating a clean and organized structure. You can create this layout easily using CSS properties like Flexbox and Grid.

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

Development Steps

Create Two Columns Using Flexbox: Use the Flexbox layout to align two div elements side by side.
Create Two Columns Using CSS Grid: Set up a grid with two columns using CSS Grid.

Method 1: Two-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>Two-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;  /* Ensures both columns 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>

</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; aligns the child elements horizontally.
- gap: 20px; creates space between the columns.

Step 2: Style the Columns

Use flex: 1 to ensure both columns take equal space:
```
.column {
    flex: 1;  /* Ensures both columns take equal space */
    padding: 20px;
    background-color: #f4f4f4;
}
```
- flex: 1; makes each column stretch equally across the available space.
- padding: 20px; adds padding inside the columns.

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: Two-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>Two-Column Layout with CSS Grid</title>
    <style>
        /* Step 1: Create the grid container */
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;  /* Two 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>

</body>
</html>

Explanation

Step 1: Create the Grid Container

Use display: grid to create a two-column grid:

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

display: grid; enables the grid layout.
grid-template-columns: 1fr 1fr; creates two equal 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 two-column layout using Flexbox and CSS Grid. Flexbox provides a flexible and responsive solution, while CSS Grid offers a structured layout. Both methods allow you to easily align elements side by side, and with media queries, they adjust for smaller screens as well. Choose the method that fits your project needs.

Java Guides

Search This Blog