How to Create a Three-Column Footer Layout in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A three-column footer layout is useful for organizing content like links, contact information, or social media details in a clean, structured way. It can be easily created using either CSS Flexbox or CSS Grid, both of which offer flexibility and responsiveness.

This tutorial will guide you through creating a three-column footer layout using both methods and making it responsive for smaller screen sizes.

Steps to Create with Flexbox

Create the HTML Structure: Set up the HTML with three columns inside the footer.
Apply Flexbox for Layout: Use Flexbox to arrange the columns in a horizontal row.
Style the Footer Content: Add padding, background color, and other styles for a polished look.
Make the Layout Responsive: Use media queries to ensure the footer stacks vertically on smaller screens.

Step 1: Create the HTML Structure

Start by creating the HTML structure, where each div inside the footer will represent a column.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Column Footer Layout with Flexbox</title>
</head>
<body>

    <!-- Step 1: Footer structure -->
    <footer class="footer">
        <div class="column">
            <h4>Column 1</h4>
            <p>Information for the first column.</p>
        </div>
        <div class="column">
            <h4>Column 2</h4>
            <p>Information for the second column.</p>
        </div>
        <div class="column">
            <h4>Column 3</h4>
            <p>Information for the third column.</p>
        </div>
    </footer>

</body>
</html>

Step 2: Apply Flexbox for Layout

Next, use Flexbox to align the columns side by side.

/* Flexbox layout */
.footer {
    display: flex;
    justify-content: space-between;  /* Space between the columns */
    padding: 20px;
    background-color: #333;
    color: white;
}

.column {
    width: 30%;  /* Each column takes 30% of the footer width */
}

Explanation:

display: flex;: Makes the footer a flex container, aligning the columns side by side.
justify-content: space-between;: Spaces the columns evenly.
width: 30%;: Ensures each column takes up 30% of the width, leaving room for space between them.

Step 3: Style the Footer Content

Add additional styles for better readability and structure.

/* Footer content styling */
.footer h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.footer p {
    margin: 0;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

Step 4: Make the Layout Responsive

To make the footer responsive, use media queries to stack the columns vertically on smaller screens.

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .footer {
        flex-direction: column;  /* Stack the columns vertically */
        text-align: center;
    }

    .column {
        width: 100%;  /* Columns take up full width */
        margin-bottom: 20px;  /* Adds space between stacked columns */
    }
}

Complete Code (Flexbox)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Column Footer Layout with Flexbox</title>
    <style>
        /* Flexbox layout */
        .footer {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            background-color: #333;
            color: white;
        }

        .column {
            width: 30%;
        }

        /* Footer content styling */
        .footer h4 {
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .footer p {
            margin: 0;
        }

        .footer a {
            color: white;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* Responsive design for smaller screens */
        @media (max-width: 768px) {
            .footer {
                flex-direction: column;
                text-align: center;
            }

            .column {
                width: 100%;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- Flexbox Three-Column Footer -->
    <footer class="footer">
        <div class="column">
            <h4>Column 1</h4>
            <p>Information for the first column.</p>
        </div>
        <div class="column">
            <h4>Column 2</h4>
            <p>Information for the second column.</p>
        </div>
        <div class="column">
            <h4>Column 3</h4>
            <p>Information for the third column.</p>
        </div>
    </footer>

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

Steps to Create with CSS Grid

Create the HTML Structure: Use the same HTML structure as the Flexbox method.
Apply CSS Grid for Layout: Use CSS Grid to create a three-column layout.
Style the Footer Content: Add padding, background color, and other styling elements.
Make the Layout Responsive: Use media queries to stack the columns vertically on smaller screens.

Step 1: Create the HTML Structure

The HTML structure remains the same as in the Flexbox method.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Column Footer Layout with CSS Grid</title>
</head>
<body>

    <!-- Step 1: Footer structure -->
    <footer class="footer">
        <div class="column">
            <h4>Column 1</h4>
            <p>Information for the first column.</p>
        </div>
        <div class="column">
            <h4>Column 2</h4>
            <p>Information for the second column.</p>
        </div>
        <div class="column">
            <h4>Column 3</h4>
            <p>Information for the third column.</p>
        </div>
    </footer>

</body>
</html>

Step 2: Apply CSS Grid for Layout

Now, use CSS Grid to arrange the three columns inside the footer.

/* CSS Grid layout */
.footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Three equal columns */
    gap: 20px;  /* Space between columns */
    padding: 20px;
    background-color: #333;
    color: white;
}

Explanation:

display: grid;: Creates a grid layout.
grid-template-columns: repeat(3, 1fr);: Divides the footer into three equal columns, each taking up 1 fraction of the available space.
gap: 20px;: Adds space between the columns.

Step 3: Style the Footer Content

The footer content styles remain the same as in the Flexbox method.

/* Footer content styling */
.footer h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.footer p {
    margin: 0;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

Step 4: Make the Layout Responsive

To make the Grid layout responsive, stack the columns vertically on smaller screens using media queries.

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .footer {
        grid-template-columns: 1fr;  /* Single column on small screens */
        text-align: center;
    }
}

Complete Code (CSS Grid)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Column Footer Layout with CSS Grid</title>
    <style>
        /* CSS Grid layout */
        .footer {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 20px;
            background-color: #333;
            color: white;
        }

        /* Footer content styling */
        .footer h4 {
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .footer p {
            margin: 0;
        }

        .footer a {
            color: white;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* Responsive design for smaller screens */
        @media (max-width: 768px) {
            .footer {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }
    </style>
</head>
<body>

    <!-- Grid Three-Column Footer -->
    <footer class="footer">
        <div class="column">
            <h4>Column 1</h4>
            <p>Information for the first column.</p>
        </div>
        <div class="column">
            <h4>Column 2</h4>
            <p>Information for the second column.</p>
        </div>
        <div class="column">
            <h4>Column 3</h4>
            <p>Information for the third column.</p>
        </div>
    </footer>

</body>
</html>

Conclusion

In this tutorial, you learned how to create a three-column footer layout using both Flexbox and CSS Grid. Both methods allow for flexibility and can be made responsive using media queries to adjust the layout on smaller screens. You can choose the method that best suits your project requirements.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide