How to create: mixed column layout

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

Learn how to create a responsive column layout that can change between four columns, two columns, and full-width columns based on the screen width.

Adjust the size of the browser window to view the responsive effect:

Try it yourself

How to create a mixed column layout

Step 1 - Add HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Step 2 - Add CSS:

In this example, we will create a four-column layout that will change to two columns when the screen width is less than 900 pixels. However, when the screen width is less than 600 pixels, the columns will stack instead of being side by side.

/* Create four equal-width columns that float together */
.column {
  float: left;
  width: 25%;
{}
/* Clear float */
.row:after {
  content: "";
  display: table;
   clear: both;
{}
/* Responsive layout - Change layout to two columns instead of four */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  {}
{}
/* Responsive layout - Stack two columns instead of side by side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  {}
{}

Try it yourself

Related Pages

Tutorial:CSS Website Layout

Tutorial:CSS Responsive Web Design