How to create a 4-column layout grid with CSS?

In this tutorial, we will learn how to create a 4-column layout grid with the help of CSS? By Apurva Mathur Last updated : July 23, 2023

Making a column layout grid in CSS is an effortless task. Dividing a page into some major sections can be easily accomplished by using some basic CSS properties.

Creating a 4-column layout grid with CSS

To create a 3-column layout grid with CSS, you just need to provide equal width depending upon the number of sections we want. In this article, we'll create 4-column layout grids which means a width of 25% should be given to every section so that they synchronize with each other. With width, it is also important to provide appropriate height and padding so that our grid and the content written inside the grid do not look awful.

Example to create a 4-column layout grid

Step 1: Make 4 DIVs and give them the suitable class which will help us to provide styling to these div containers.

<div class="div_1">
   <h1>First div </h1>
</div>
<div class="div_2">
   <h1> second div</h1>
</div>
<div class="div_3">
   <h1>third div</h1>
</div>
<div class="div_4">
   <h1>fourth div</h1>
</div>

Step 2: Let's style the first div,

.div_1 {
   float: left;
   width: 25%;
   padding: 10px;
   height: 400px;
   text-align: center;
   border-radius: 25px;
   box-shadow: 2px 2px 2px 2px navy;
   background-color: darkseagreen;
   color: white;
}

Starting 4 properties are defining the grid size and position of the grid on the page, these properties should remain the same for all the four div. The float-left property will provide the coverage to other grids, if you don't apply this property our grid won't synchronize properly. Since we are making 4-column layout grids that is why the width of 25% should be used here, to get the equal size of grids, similarly if you want to create 3-column layout grid then we'll use the width of 33.33% then only our grid will be in equal size. Talking about the padding and height property it is totally up to you, the value of these properties are not fixed you can change them according to your preference.

In the same way, other div containers will be styled.

<!DOCTYPE html>

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style>
         body {
         font-family: "Lucida Calligraphy";
         }
         * {
         box-sizing: border-box;
         }
         .div_1 {
         background-color: darkseagreen;
         float: left;
         width: 25%;
         color: white;
         padding: 10px;
         height: 400px;
         text-align: center;
         border-radius: 25px;
         box-shadow: 2px 2px 2px 2px navy;
         }
         .div_2 {
         background-color: lightgreen;
         float: left;
         width: 25%;
         color: white;
         padding: 10px;
         height: 400px;
         text-align: center;
         border-radius: 25px;
         box-shadow: 2px 2px 2px 2px navy;
         }
         .div_3 {
         background-color: mediumseagreen;
         float: left;
         width: 25%;
         color: white;
         padding: 10px;
         height: 400px;
         text-align: center;
         border-radius: 25px;
         box-shadow: 2px 2px 2px 2px navy;
         }
         .div_4 {
         background-color: yellowgreen;
         float: left;
         width: 25%;
         color: white;
         padding: 10px;
         height: 400px;
         text-align: center;
         border-radius: 25px;
         box-shadow: 2px 2px 2px 2px navy;
         }
      </style>
   </head>
   <body>
      <div class="div_1">
         <h1>First div </h1>
      </div>
      <div class="div_2">
         <h1> second div</h1>
      </div>
      <div class="div_3">
         <h1>third div</h1>
      </div>
      <div class="div_4">
         <h1>fourth div</h1>
      </div>
   </body>
</html>

Output:

CSS Examples »

How to create a 3-column layout grid with CSS?

How to create CSS3 Rounded Corners?