title: grid-template-columns not working in grids
body: <p>I just started learining css grids. I created a HTML file with seven divs. I am trying to convert width of each div to 50% using <code>grid-template-columns:1fr 1fr</code>, but this is not working. All divs just take the whole width of body.</p>
  
  <p>I didn't understood why it behaves like that. Explain me why all the divs take whole space instead of taking only 50% of space.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    display: grid;
    box-sizing: border-box;
  }
  
  div {
    grid-template-columns: 1fr 1fr;
    border: 0.5px solid black;
    height: 100px;
  }
  
  #one{background-color:#9f9}
  #two{background-color:#f99}
  #three{background-color:#99f}
  #four{background-color:#555}
  #five{background-color:rgb(25, 233, 25)}
  #six{background-color:rgb(255, 214, 153)}
  #seven{background-color:rgb(255, 253, 153)}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=one&gt;&lt;/div&gt;
  &lt;div id="two"&gt;&lt;/div&gt;
  &lt;div id="three"&gt;&lt;/div&gt;
  &lt;div id="four"&gt;&lt;/div&gt;
  &lt;div id="five"&gt;&lt;/div&gt;
  &lt;div id="six"&gt;&lt;/div&gt;
  &lt;div id="seven"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>