title: Inner padding and border for a flex-box 2x2 grid
body: <p>I have some issue with 2x2 that I tried to achive using flexbox. I'm trying to achieve something like this. </p>
  
  <p><img src="https://i.imgur.com/yi1CwOy.png" alt=""></p>
  
  <p>Every single grid should contain equal amount of padding. Also it's required to add borders only inside. (Within the grid, like a cross)</p>
  
  <p>This is the code that I've come up with but it doesn't work properly.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="info-box"&gt;
  &lt;div class="info-item grid1"&gt;&lt;/div&gt;
  &lt;div class="info-item grid2"&gt;&lt;/div&gt;
  &lt;div class="info-item grid3"&gt;&lt;/div&gt;
  &lt;div class="info-item grid4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-flow: row wrap;
  flex-direction: column;
  .info-item {
    flex: 1 1 calc(50%);
    background: $light;
    &amp;:nth-child(odd) {
      flex: 0 0 50%;
    }
  }
  }
  </code></pre>
  
  <p>How can I have some text inside those individual 4 grids and have some padding around it. Also I'm trying to add the border only inside. Can anyone help me?</p>