HTML

flexbox column layout

<!--Please give a thumbs up if this was helpfull-->

<div class="container">
  <div class="item">
    <p>1</p>
  </div>
  <div class="item">
    <p>2</p>
  </div>
  <div class="item">
    <p>3</p>
  </div>
  <div class="item">
    <p>4</p>
  </div>
  <div class="item">
    <p>5</p>
  </div>
  <div class="item">
    <p>6</p>
  </div>
</div>

<style>
:root{
  --padding:10px;
  --one-third-width: 33.33%;
  --white: #FFFFFF;
}

.container{
  width:300px;
  height:300px;
  display:flex;
  dlex-direction:row;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:10px;
}


.item{
  background:red;
  display:inline-flex;
  color:var(--white);
  width:calc(var(--one-third-width) - 30px);
  height:50%;
  padding:var(--padding);
}

p{  
  padding:var(--padding);
  margin: 0;
}
</style>

Simple Layout using Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}