How to Create a 2-Column Layout Grid with CSS?

Last Updated : 06 Aug, 2024

Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or other types of content distribution.

These are the following approaches:

Table of Content

Using CSS Flexbox
Using CSS Grid
Using Inline-Block

Using CSS Flexbox

Flexbox is a modern CSS layout module that allows for flexible and efficient layouts. It is especially useful for creating complex layouts and aligning content. The "display: flex;" property sets up a flex container. This enables the use of flexbox properties for its children. The "flex: 1;" property makes each column take up an equal amount of space within the container. the child selectors apply different background colors to the two columns for visual distinction.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <style>
        .container {
            display: flex;
            /* Enables flexbox layout */
        }

        .column {
            flex: 1;
            /* Each column takes up 
          an equal amount of space */
            padding: 10px;
            /* Adds padding inside each column */
        }

        .column:nth-child(1) {
            background-color: #f2f2f2;
            /* Light grey background
          for the first column */
        }

        .column:nth-child(2) {
            background-color: #e6e6e6;
            /* Slightly darker grey background
          for the second column */
        }
    </style>
</head>

<body>

    <h2>Flexbox 2-Column Layout</h2>

    <div class="container">
        <div class="column">
            <h2>Column 1</h2>
            <p>Some text..</p>
        </div>
        <div class="column">
            <h2>Column 2</h2>
            <p>Some text..</p>
        </div>
    </div>

</body>

</html>

Output:

Recording-2024-08-05-181142 — using flexbox

Using CSS Grid

CSS Grid Layout is a powerful layout system that allows for two-dimensional layouts with rows and columns. The "display: grid;" property sets up a grid container. "grid-template-columns: 1fr 1fr;"This property creates two columns of equal width. The 1fr unit represents a fraction of the available space. "gap: 10px;" Adds a 10-pixel gap between the columns.

Example: This example shows the use of CSS grid to create 2-column layout.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1">
    <style>
        .container {
            display: grid;
            /* Enables grid layout */
            grid-template-columns: 1fr 1fr;
            /* Creates two equal-width columns */
            gap: 10px;
            /* Adds space between columns */
        }

        .column {
            padding: 10px;
            /* Adds padding inside each column */
        }

        .column:nth-child(1) {
            background-color: #f2f2f2;
            /* Light grey background for the first column */
        }

        .column:nth-child(2) {
            background-color: #e6e6e6;
            /* Slightly darker grey 
          background for the second column */
        }
    </style>
</head>

<body>

    <h2>CSS Grid 2-Column Layout</h2>

    <div class="container">
        <div class="column">
            <h2>Column 1</h2>
            <p>Some text..</p>
        </div>
        <div class="column">
            <h2>Column 2</h2>
            <p>Some text..</p>
        </div>
    </div>

</body>

</html>

Output:

Recording-2024-08-05-181501 — Using CSS Grid

Using Inline-Block Property

The inline-block method is another way to achieve a column layout, although it's less common in modern layouts. "The font-size: 0;" property removes any whitespace between inline-block elements. The "display: inline-block;" property allows columns to sit side by side, and width: 49%; ensures each column is nearly half the width of the container (accounting for any padding).

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1">
    <style>
        .container {
            font-size: 0;
            /* Removes whitespace between 
          inline-block elements */
        }

        .column {
            display: inline-block;
            /* Allows columns to sit next to each other */
            width: 49%;
            /* Each column takes up 49% of the container width */
            vertical-align: top;
            /* Aligns columns to the top */
            padding: 10px;
            /* Adds padding inside each column */
            box-sizing: border-box;
            /* Includes padding in the column width */
        }

        .column:nth-child(1) {
            background-color: #f2f2f2;
            /* Light grey background
          for the first column */
        }

        .column:nth-child(2) {
            background-color: #e6e6e6;
            /* Slightly darker grey 
          background for the second column */
        }
    </style>
</head>

<body>

    <h2>Inline-Block 2-Column Layout</h2>

    <div class="container">
        <div class="column">
            <h2>Column 1</h2>
            <p>Some text..</p>
        </div>
        <div class="column">
            <h2>Column 2</h2>
            <p>Some text..</p>
        </div>
    </div>

</body>

</html>

Output:

Recording-2024-08-05-182705 — Using Inline - block

Conclusion

Each method for creating a 2-column layout offers distinct advantages and can be selected based on the specific requirements of a project. Flexbox and Grid are modern and versatile, making them suitable for most design scenarios. Float and Inline-Block, though older, are still useful for simpler layouts or legacy projects. The best approach depends on the design needs and browser compatibility requirements.