How TO - Mixed Column Layout

Learn how to create a mixed column layout grid with CSS.

Learn how to create a responsive column layout that varies between 4 columns, 2 columns and full-width columns depending on screen width.

Resize the browser window to see the responsive effect:

Try it Yourself »

How To Create a Mixed Column Layout

Step 1) Add HTML:

Example

Step 2) Add CSS:

In this example, we will create a four column layout that will transform to two columns on screens that are less than 900px wide. However, on screens that are less than 600px wide, the columns will stack on top of each other instead of floating next to each other.

Example

/* Create four equal columns that floats next to each other */
.column {
  float: left;
width: 25%;
}

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

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
    width: 50%;
  }
}

/* Responsive layout - makes the two 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 ❯