title: grid-template-columns is not working
body: <p>I have one block, <code>display: grid</code>.</p>
  
  <p>According to the idea, the first element should be stretched to 2 columns and 2 rows, the others occupy one cell each.</p>
  
  <p>But the <code>grid-template-columns</code> property does not work for me, whatever value I put there, the content does not move.</p>
  
  <p>Now the first element got into the first cell only, got out of bounds, but did not stretch on two columns and two rows.</p>
  
  <p>Where is my issue?</p>
  
  <p>What I need:</p>
  
  <p><img src="https://i.stack.imgur.com/j5EW2.png" alt="picture"></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>.exclusive-content {
    display: grid;
    grid: 270px 270px / repeat(4, 270px);
    justify-content: center;
    grid-gap: 30px;
    margin-top: 120px;
  }
  
  .exclusive-content img {
    background-size: cover;
    background-position: center;
  }
  
  .exclusive-content a:first-child {
    width: 540px;
    height: 540px;
    grid-template-columns: 1 / 3;
    grid-template-rows: 1 / 3
  }
  
  .exclusive-content a:nth-child(2) {
    grid-template-columns: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="exclusive-content"&gt;
    &lt;a href="#"&gt;&lt;img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>