4 Equal Columns Layout CSS Flexbox

14 Jul 2021

Illustration of 4 equal columns layout

Four Equal 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 class="column">
     ///  Column 4: Put any relevant content here  ///
  </div>
</div>

CSS

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

.column {
  flex: 25%;
}

Result

[Image screenshot]

Responsive 4 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;
  }
}

Full width layout container

Just put them in a container and add some padding.

<div class="container">
  <div class=" columns">
    ///Put your individual columns inside here ///
  </div>
</div

CSS

.container {
   padding: 2em 4em;
}

Boxed Layout

For boxed Layout put the columns in a container with a maximum width.

HTML

<div class="container">
  <div class=" columns">
    ///Put your individual columns inside here ///
  </div>
</div>

CSS

.container {
  max-width: 1000px;
  margin-right: auto;
  margin-left:auto;
}

4 Equal Columns Layout Website Examples

Website Example 1: Boxed 4 column layout

[Screenshot with caption of with details like: boxed or full width]

[Links: 1. For full length screenshot. 2. For link to website page]

Website Example 2: full width 4 column layout