title: CSS Grid Item Placement
body: <p>I was trying to learn how to change the order of columns on a very simple grid (<code>grid-template-columns: 1fr 1fr</code>). The answer was quite simple: add the following rule to the second item: <code>grid-row-start: 1; /* grid-row: 1; shortcut also works */</code>.</p>
  <pre><code>_________     _________
  | A | B | --&gt; | B | A |
  ---------     ---------
  </code></pre>
  <p><strong>But I can't understand why this works. I'm trying to change the order of columns but I'm using row rules? The second item is already in the first row. What changed after adding that rule?</strong></p>
  <hr />
  <p>I tried to make sense of it. I reset the grid and added <code>grid-column-start: 1;</code> to the second item. I ended up with this grid:</p>
  <pre><code>_________
  | A |   |      #B { grid-column-start: 1; }
  ---------
  | B |   |
  ---------
  </code></pre>
  <p>After that, I added <code>grid-column-start: 2;</code> to the first item and the result was:</p>
  <pre><code>_________
  |   | A |      #A { grid-column-start: 2; }
  ---------      #B { grid-column-start: 1; }
  | B |   |
  ---------
  </code></pre>
  <p>Now, I have to tell the second item to start at the first row: <code>grid-row-start: 1;</code> and I finally got what I wanted.</p>
  <pre><code>_________
  | B | A |      #A { grid-column-start: 2; }
  ---------      #B { grid-column-start: 1; grid-row-start: 1; }
  </code></pre>
  <p>But the thing is, I can keep only <code>grid-row-start: 1;</code> and achieve the same result! <strong>Why?!</strong></p>
  <hr />
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: lightgoldenrodyellow;
  }
  
  #content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  h2 {
    text-align: center;
  }
  
  .grid {
    display: grid;
    width: 480px;
    height: 240px;
    margin: 4rem auto;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    font-size: 3rem;
  }
  
  .column {
    border: black solid 1px;
  }
  
  .colorA {
    background: turquoise;
    text-align: center;
  }
  
  .colorB {
    background: aliceblue;
    text-align: center;
  }
  
  .column3 {
    /* does nothing */
    display: block;
  }
  
  .column4 {
    grid-row-start: 1;
  }
  
  .column5 {
    /* does nothing */
    display: block; 
  }
  
  .column6 {
    grid-column-start: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
    
    &lt;div&gt;
      &lt;h2&gt;Original&lt;/h2&gt;
      &lt;div class="grid"&gt;
        &lt;div class="column colorA column1"&gt;A&lt;/div&gt;
        &lt;div class="column colorB column2"&gt;B&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;h2&gt;Using grid-row-start&lt;/h2&gt;
      &lt;div class="grid"&gt;
        &lt;div class="column colorA column3"&gt;A&lt;/div&gt;
        &lt;div class="column colorB column4"&gt;B&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;h2&gt;Using grid-column-start&lt;/h2&gt;
      &lt;div class="grid"&gt;
        &lt;div class="column colorA column5"&gt;A&lt;/div&gt;
        &lt;div class="column colorB column6"&gt;B&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>