How to create a responsive three-column layout?

To create the CSS responsive two-column layout (three equal columns, or three unequal columns) follow the steps below:

Demo (three equal columns):

Step1.

Add HTML

Create the column container and add three columns:

<div class="col-container">
  <div class="col" style="background-color:#2a9d8f;">
    <h4>Column 1</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="col" style="background-color:#e9c46a;">
    <h4>Column 2</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="col" style="background-color:#e76f51;">
    <h4>Column 3</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}
.col {
  float: left;
  width: 33.33%;
  padding: 15px;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .col {
    width: 100%;
  }
}

Demo (three unequal columns):

Step1.

Add HTML

Create the column container and add three columns:

<div class="column-container">
  <div class="column left-side" style="background-color:#2a9d8f;">
    <h4>Side</h4>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
  </div>
  <div class="column main" style="background-color:#e9c46a;">
    <h4>Main</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="column right-side" style="background-color:#e76f51;">
    <h4>Side</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

.column {
  float: left;
  padding: 10px;

}

.left-side, .right-side {
  width: 30%;
}

.main {
  width: 40%;
}

.column-container:after {
  content: "";
  display: table;
  clear: both;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Enjoy coding!

Read also:

CSS Columns

CSS Grid