Categories
CSS Web development

How to create a responsive three-column layout?

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):

Column 1

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Column 2

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Column 3

Add some text here..

Add some text here..

Add some text here..

Add some text here..

*resize the browser window to see the responsive effect.


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):

Side

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Main

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Side

Add some text here..

Add some text here..

Add some text here..

Add some text here..

*resize the browser window to see the responsive effect.


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!