How to Create a Four-Column Layout in CSS

Author:

Introduction

A four-column layout is widely used in web design to display content such as product listings, image galleries, or sections of a webpage. There are several methods to achieve a four-column layout using CSS, including CSS Grid, Flexbox, and the traditional float method.

In this tutorial, you’ll learn how to create a four-column layout using different approaches and make it responsive for smaller screens.

Development Steps

  1. Create a Four-Column Layout Using CSS Grid.
  2. Create a Four-Column Layout Using Flexbox.
  3. Create a Four-Column Layout Using float.
  4. Add Responsiveness to the Layout.

Method 1: Four-Column Layout Using CSS Grid

CSS Grid is an efficient way to create a four-column layout. It gives you full control over both rows and columns.

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>Four-Column Layout with CSS Grid</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);  /* Four equal columns */
            gap: 20px;
        }

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

        @media (max-width: 1024px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);  /* Two columns on tablets */
            }
        }

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

    <div class="grid-container">
        <div class="grid-item">Column 1</div>
        <div class="grid-item">Column 2</div>
        <div class="grid-item">Column 3</div>
        <div class="grid-item">Column 4</div>
    </div>

</body>
</html>

Explanation

  • grid-template-columns: repeat(4, 1fr); creates four equal columns.
  • gap: 20px; adds space between columns.
  • Media queries adjust the layout to two columns on tablets and a single column on mobile devices.

Method 2: Four-Column Layout Using Flexbox

Flexbox can also be used to create a four-column layout. It’s easy to set up and offers flexibility for responsive design.

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>Four-Column Layout with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;  /* Space between columns */
            flex-wrap: wrap;  /* Allows wrapping on smaller screens */
        }

        .flex-item {
            flex: 1 1 calc(25% - 20px);  /* Each item takes 25% of the width */
            margin: 10px;
            padding: 20px;
            background-color: #e74c3c;
            color: white;
            text-align: center;
        }

        @media (max-width: 1024px) {
            .flex-item {
                flex: 1 1 calc(50% - 20px);  /* Two columns on tablets */
            }
        }

        @media (max-width: 768px) {
            .flex-item {
                flex: 1 1 100%;  /* Stacks items vertically on mobile */
            }
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="flex-item">Column 1</div>
        <div class="flex-item">Column 2</div>
        <div class="flex-item">Column 3</div>
        <div class="flex-item">Column 4</div>
    </div>

</body>
</html>

Explanation

  • flex: 1 1 calc(25% - 20px); makes each item take 25% of the available space.
  • flex-wrap: wrap; ensures the columns wrap on smaller screens.
  • Media queries adjust the layout to two columns on tablets and one column on mobile screens.

Method 3: Four-Column Layout Using float

The traditional method of creating a column layout involves floating elements. Though not as commonly used today, it’s still helpful for older projects.

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>Four-Column Layout with Float</title>
    <style>
        .float-container {
            overflow: hidden;  /* Ensures the container wraps the floated elements */
        }

        .float-item {
            float: left;
            width: 23%;  /* Each item takes approximately 25% with margin considered */
            margin: 1%;
            padding: 20px;
            background-color: #2ecc71;
            color: white;
            text-align: center;
        }

        @media (max-width: 1024px) {
            .float-item {
                width: 48%;  /* Two columns on tablets */
            }
        }

        @media (max-width: 768px) {
            .float-item {
                width: 100%;  /* Stacks columns vertically on mobile */
            }
        }
    </style>
</head>
<body>

    <div class="float-container">
        <div class="float-item">Column 1</div>
        <div class="float-item">Column 2</div>
        <div class="float-item">Column 3</div>
        <div class="float-item">Column 4</div>
    </div>

</body>
</html>

Explanation

  • float: left; makes the elements float side by side.
  • Media queries adjust the layout to two columns on tablets and a single column on mobile.

Conclusion

There are several ways to create a four-column layout in CSS. CSS Grid and Flexbox are the most modern and responsive approaches, providing flexibility and ease of use. The traditional float method is still applicable in some cases, particularly in older designs. Choose the method that best fits your project needs, and ensure responsiveness for a smooth user experience across all devices.

Comments

Post a Comment

Leave Comment