How to Create a Two Column Responsive Layout using Flexbox

In this tutorial, we are going to learn about how to create a two-column responsive layout by using flexbox.

Note: This is my second project from the #15daysofcss challenge.

Codepen Demo

Here is the codepen demo of the two-column responsive layout.

Getting Started

First, we need to create an html markup which contains one main div with a two sub divs.

<div class="container">
   <div class="column-1 box"></div>
   <div class="column-2 box"></div>
</div>

The Css (Layout)

Now, we need to set the .container class with a display: flex property so that it will place the two child items which are column-1 and column-2 in a horizontal direction or X-axis.

body {
  margin: 0;
  padding: 1rem;
  max-width: 1200px;
  margin: 30px auto;
}

.container{
    display:flex;}

.column-1 {
  flex-shrink: 0; /* shrinks to 0 to apply 70% width*/
  flex-basis: 70%; /* sets initial width to 70% */
}

.box {
  background-color: rgb(245, 215, 160);
  padding: 10px;
  border-radius: 12px;
  border: 2px solid rgb(116, 113, 113);
  margin: 1rem;
  box-shadow: 1px 1px 1px #000;
}

In the above code, we have set .column-1 class with two properties flex-shrink: 0 and flex-basis:70%

By setting those two properties the column-1 occupies the 70% of the available space and the remaining 30% space is occupied by column-2 you can test it by opening the codepen demo in a new tab.

Responsive part

Currently, our two-column layout is fitting perfectly in larger devices to make the layout responsive in mobile devices we need to use @media queries and set the .container class with a flex-direction: column.

@media only screen and (max-width: 900px) {
  .container {
      /* it place the items in vertical direction */
    flex-direction: column;
  }

  .box {
    margin: 0 0 1rem;
  }
}

The flex-direction: column property places the child items in a vertical direction so that it will fit perfectly in the screens less than 900px.

Note: Our columns are breaking at 900px so that i used 900px.

Adding some content

Let’s add some content to our columns.

<div class="container">
    <div class="column-1 box">
        <h1>What is Lorem Ipsum?</h1>
        <p>
            What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
            and typesetting industry. Lorem Ipsum has been the industry's standard
            dummy text ever since the 1500s, when an unknown printer took a galley
            of type and scrambled it to make a type specimen book. It has survived
            not only five centuries, but also the leap into electronic
            typesetting, remaining essentially unchanged
        </p>
    </div>
    <div class="column-2 box">
        <h1>What is Lorem Ipsum?</h1>
        <p>
            What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
            and typesetting industry. Lorem Ipsum has been the industry's standard
            dummy text ever since the 1500s, when an unknown printer took a galley
            of type and scrambled it to make a type specimen book. It has survived
            not only five centuries, but also the leap into electronic
            typesetting, remaining essentially unchanged
        </p>
    </div>
</div>

Final output:

Small tip: If you want to make column-1 30% and column-2 70% just remove the flex-shrink property in the .column-1 class

.column-1 {
  flex-basis: 70%;
}

I hope you enjoyed ✓ and learned something new.

If you are interested in doing 15daysofcss challenge checkout 15daysofcss page.