title: How to remove the gap after spanning columns in grid?
body: <p>I was trying to do a shape using grid instead of flex and that is to make the first article span two columns and the other two article be under the first article, when i spanned the two columns a gap showed up between the second and third article elements, here's the code below, please help.</p>
  <p><strong>html</strong> `</p>
  <pre><code>&lt;main class=&quot;single-price-grid&quot;&gt;
      &lt;article class=&quot;single-price white&quot; &gt;
        &lt;h3&gt;Join our community&lt;/h3&gt;
        &lt;h5&gt;  30-day, hassle-free money back guarantee
        &lt;/h5&gt;
        &lt;p&gt;  Gain access to our full library of tutorials along with expert code reviews. 
          Perfect for any developers who are serious about honing their skills.
        &lt;/p&gt;
      &lt;/article&gt;
      &lt;article class=&quot;single-price blue&quot;&gt;
        &lt;h3&gt;  Monthly Subscription&lt;/h3&gt;
        &lt;span&gt; &amp;dollar;29&lt;/span&gt;&lt;span&gt;per month&lt;/span&gt;
        &lt;p&gt;
          Full access for less than &amp;dollar;1 a day
        &lt;/p&gt;
        &lt;button class=&quot;btn&quot;&gt;Sign Up&lt;/button&gt;
      &lt;/article&gt;
      &lt;article class=&quot;single-price pale-blue&quot;&gt;
        &lt;h3&gt;Why Us&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li&gt;Tutorials by industry experts&lt;/li&gt;
          &lt;li&gt;Peer &amp;amp; expert code review&lt;/li&gt;
          &lt;li&gt;Coding exercises&lt;/li&gt;
          &lt;li&gt;Access to our GitHub repos&lt;/li&gt;
          &lt;li&gt;Community forum&lt;/li&gt;
          &lt;li&gt;Flashcard decks&lt;/li&gt;
          &lt;li&gt;New videos every week&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/article&gt;
    &lt;/main&gt;
  </code></pre>
  <p>`</p>
  <p><strong>Css</strong> `</p>
  <pre><code>body {
      background-color: hsl(204, 43%, 93%);
      font-family: 'Karla', sans-serif;
  }
  
  .single-price-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-content: center;
      align-content: center;
      width: 100%;
      height: 100vh;
  }
  .single-price-grid .single-price {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      margin: 0 auto;
      display: inline-block;
  
  }
  .single-price-grid .white {
      grid-column: span 2;
      margin: 0 auto;
  }
  </code></pre>
  <p>`</p>