How TO - Four Column Layout

❮ Previous Next ❯

Learn how to create a 4-column layout grid with CSS.

Column 1

Some text..

Column 2

Some text..

Column 3

Some text..

Column 4

Some text..

Try it Yourself »

How To Create a Four Column Layout

Step 1) Add HTML:

Example

Step 2) Add CSS:

In this example, we will create four column layout:

Example

.column {
float: left;
width: 25%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

Try it Yourself »

In this example, we will create a responsive four column layout:

Example

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Try it Yourself »

Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.

Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.

❮ Previous Next ❯