3 Equal Columns Layout CSS Flexbox

Illustration of 3 equal columns layout

Three Columns Layout Flexbox

HTML

<div class="columns">
   <div class="column">
     ///  Column 1: Put any relevant content here   ///
   </div>
   <div class="column">
     ///  Column 2: Put any relevant content here  ///
  </div>
  <div class="column">
     ///  Column 3: Put any relevant content here  ///
  </div>
</div>

CSS

.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  flex: 33.33%;
}

Result

3 columns unresponsive flexbox screenshot Code result

Responsive 3 column layout Flexbox

Let’s use some media queries to make it responsive

Method 1:

.column{
  width:100%;
}

@media (min-width: 48em) {
  .columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }
}

Method 2:

.columns {
  display:flex;
  flex-direction:row;
  width:100%;
  flex-wrap:wrap;
}

@media (min-width: 48em) {
  .columns {
    flex-wrap: nowrap;
  }
}

Result

3 columns responsive flexbox screenshot

Browser support for 3 columns CSS Flexbox