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

Last Updated : 08 Aug, 2024

We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a common design structure used in web pages to neatly organize content. By dividing our content into four equal or custom-sized columns, we can create a clean and balanced look. This layout is perfect for showcasing multiple items side by side, such as product listings, image galleries, or article previews.

Below are different approaches to creating a 4-column Layout Grid:

Table of Content

Using CSS Grid
Using CSS Flexbox
Using Float and Width

Using CSS Grid

CSS Grid is a powerful layout system that allows you to create complex grid-based layouts. It is the most modern and flexible way to create a 4-column grid layout.

Syntax:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Example: In this example, grid-template-columns: repeat(4, 1fr); creates a grid with four equal columns. The 1fr unit means "one fraction" of the available space, so each column will take up an equal amount of the container's width.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>4-Column Layout with CSS Grid</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .grid-item {
            background-color: #ccc;
            padding: 20px;
            text-align: center;
        }
    </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>

Output:

Using CSS Flexbox

Flexbox is another layout system that can create a 4-column layout, but it's more suited to single rows or columns rather than grids. However, it can still be used effectively for this purpose.

Syntax:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flex-item {
  flex: 1 1 22%;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Example: In this example, each flex item is given flex: 1 1 22%;, which means each column will take up 22% of the container's width, leaving some space for gaps between the columns.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>4-Column Layout with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .flex-item {
            flex: 1 1 22%;
            background-color: #ccc;
            padding: 20px;
            text-align: center;
        }
    </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>

Output:

Using Float and Width

Before CSS Grid and Flexbox, the float property was commonly used to create multi-column layouts. Though less flexible and more outdated, it's still useful to know.

Syntax:

.float-container {
  overflow: hidden;
}
.float-item {
  float: left;
  width: 24%;
  margin-right: 1%;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}
.float-item:last-child {
  margin-right: 0;
}

Example: In this example, each column is floated to the left with a width of 24% and a margin to create space between the columns. The last column has no right margin to avoid extra spacing.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>4-Column Layout with Floats</title>
    <style>
        .float-container {
            overflow: hidden;
        }

        .float-item {
            float: left;
            width: 24%;
            margin-right: 1%;
            background-color: #ccc;
            padding: 20px;
            text-align: center;
        }

        .float-item:last-child {
            margin-right: 0;
        }
    </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>

Output:

Conclusion

It is easy to create a 4-column layout grid in CSS if we use the correct approach. CSS Grid offers the most flexibility and ease of use for creating grid layouts, but Flexbox, and Float also provide viable solutions depending on our needs.