<div class="wrapper">

<div class="box flex">
  <div>I am flex item 1</div>
  <div>I am flex item 2</div>
  <div>I am flex item 3</div>
  <div>I am flex item 4</div>
</div>

<div class="box grid">
  <div>I am grid item 1</div>
  <div>I am grid item 2</div>
  <div>I am grid item 3</div>
  <div>I am grid item 4</div>
</div>
<div class="box multicol">

<p>As the moment for departure drew near, friends became impatient, and every one anxiously watched the final arrangements, which were made by Mr Coxwell, on whom was laid the important duty of letting go. His hand was on the catch, his countenance was fixed, and his expression stern, as he gazed up into the heavens. He was waiting for the right moment, for the sky was partially cloudy, and it was necessary to wait until the balloon was midway between the cloud that had just passed and the next that was approaching, so that the aeronauts might have a clear sky, and be able to see the earth they were about to quit for a time. Nor was this all; he knew that in every wind, however strong it might be, there are periods of calm. If he could start in one of these he would avoid much rotatory motion. The deciding, therefore, of the exact moment for making a fair start was not so easy a matter as one might suppose.</p>

<p>Some one at this critical time, with the characteristic eagerness of poor human nature to “put its finger in the pie,” cried out “Now!” and another shouted “Pull!” but Mr Coxwell, regardless of every one, decided for himself; and, just when the wind lulled and the sun shone bright, and the balloon stood proudly erect, he pulled the trigger and they were free.</p>

<p>But they were more than free. They were suddenly in profound repose, for—however high the wind may be, however agitated the balloon, swaying to and fro with sudden and violent action, despite the efforts of many hands that endeavour to restrain it,—no sooner do aeronauts quit their hold of earth, than, in an instant, all agitation ceases and they are in perfect stillness, without any sense of motion whatever; and this freedom continues throughout the entire flight—except, indeed, when they sink so low as to come into contact with mother earth, when the serenity of their flight is terribly and violently interrupted, as shall be seen in the case of another balloon voyage hereafter to be described.</p>
</div>
  
</div>

@mixin gridded($type: grid, $col: 20em, $gap: $gap) {
  @if ($type == 'flex') {
    display: flex;
    flex-wrap: wrap;
    margin-left:  -#{$gap} ;
    > * {
      flex: 1 1 $col;
      margin: 0 0 $gap $gap;
    }
  }
  @if ($type == 'grid') {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($col,1fr));
    grid-gap: $gap;
  }

  @if ($type == 'multicol') {
    column-gap: $gap;
    column-width: $col;
  }    
}

* { box-sizing: border-box; }

.wrapper {
  width: 90%;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}

.box {
  margin-bottom: 2em;
}

.box > div {
  border: 5px solid rgb(61, 63, 112);
  background-color: rgba(61, 63, 112,.7);
  color: #fff;
  border-radius: 10px;
  padding: 10px;
}

body {
  padding: 40px;
  background-color: rgb(255,255,255);
  color: rgb(61, 63, 112);
  font: 1.1em/1.4 "Open Sans", sans-serif;
}

.multicol {
  @include gridded('multicol',200px,20px);
}

.grid{
  @include gridded('grid',200px,20px);
}

.flex {
  @include gridded('flex',200px,20px);
}