Flex box columns

by CreativeDreams

HTML

<div class="columns-container">

  <div class="column col-1">
    <div class="column-inner">
      <h5>Column 1</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  
  <div class="column col-2">
    <div class="column-inner">
      <h5>Column 2</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  
  <div class="column col-3">
    <div class="column-inner">
      <h5>Column 3</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  
  <div class="column col-4">
    <div class="column-inner">
      <h5>Column 4</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  
  <div class="column col-5">
    <div class="column-inner">
      <h5>Column 5</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  
</div>

CSS

.columns-container {
  display: flex;
	flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 20px;
}

.column {
	flex: 1 1 calc((100% / 3) - 2rem);
}

.column-inner {
  padding: 30px;
}

.col-2 .column-inner {
  padding: 60px;
}

.col-3 {
  align-self: center;
}

.col-3 .column-inner {
  margin-left: -100px;
  
  background: #191919;
}




/* misc */
body {
  font-family: Helvetica;
}
h5 {
  margin: 0 0 10px 0;
}

.column-inner {
  color: #fff;
  background: #4F6D45;
}