title: How to create 1 row below 2 colums with CSS Grid?
body: <p>Using CSS Grid I'm trying to create a blurb layout that has 2 columns at the top with 1 full row below.</p>
  <p>This would allow for FA Icon and Title, with full description underneath, like the image below.</p>
  <p>I think I've got the grid layout, but I'm unsure how to make the width of the top 2 columns (<code>icon</code> and <code>title</code>) shift together and auto-fit to the contents?</p>
  <p>Would this be easier with firebox?</p>
  <p>Thanks,</p>
  <p><a href="https://i.stack.imgur.com/QrMyR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QrMyR.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://codepen.io/Rosko34/pen/LYeZpKJ" rel="nofollow noreferrer">CodePen Link</a></p>
  <p>HMTL</p>
  <pre><code>&lt;div class=&quot;main_description_container&quot;&gt;
  &lt;div class=&quot;description_gridwrapper&quot;&gt;
      &lt;div id=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-info-circle&quot;&gt;&lt;!--tr--&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div id=&quot;title&quot;&gt;&lt;h3&gt;Title Text&lt;/h3&gt;&lt;/div&gt;
      &lt;div id=&quot;text&quot;&gt;Long Paragraph Text&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.main_description_container{
  display: block;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  }
  
  .description_gridwrapper {
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px;
  height: 100%;
  }
    
  .description_gridwrapper #icon {
     background-color: #68dd99; 
     grid-row-start: 1;
     grid-column-start: 1;
     grid-row-end: 2;
     grid-column-end: 2;
  }
  
  .description_gridwrapper #icon i.fas{
  color: #B1DDF1;
  font-size: 36px !important;
  max-width: 36px !important;
  width: 36px !important;
  }
  
  .description_gridwrapper #title {
     background-color: #D75DDC; 
     grid-row-start: 1;
     grid-column-start: 2;
     grid-row-end: 2;
     grid-column-end: 3;
  color: #31324E;
  }
  
  .description_gridwrapper #text {
     background-color: #9FDABB; 
     grid-row-start: 2;
     grid-column-start: 1;
     grid-row-end: 3;
     grid-column-end: 3;
  }
  </code></pre>