title: How to create a CSS Grid Layout box that spans 2 columns and 2 rows?
body: <p>I've created a grid layout following the newest CSS Grid spec, but am not completely familiar with it yet. I'm trying to create the following layout without having to define grid areas for each grid child.</p>
  
  <p><a href="https://codepen.io/coreybruyere/pen/JJjXbj" rel="noreferrer">codepen</a></p>
  
  <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 {
    max-width: 1024px;
    margin: 10px auto;
  }
  
  .grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a a b" "a a c" "d e f";
  }
  
  .grid__thing {
    background-color: rebeccapurple;
  }
  
  .a {
    grid-area: a;
  }
  
  .b {
    grid-area: b;
  }
  
  .c {
    grid-area: c;
  }
  
  .d {
    grid-area: d;
  }
  
  .e {
    grid-area: e;
  }
  
  .f {
    grid-area: f;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="grid__thing a"&gt;
      &lt;img src="https://placehold.it/1360x880" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="grid__thing b"&gt;
      &lt;img src="https://placehold.it/660x405" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="grid__thing c"&gt;
      &lt;img src="https://placehold.it/660x405" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="grid__thing d"&gt;
      &lt;img src="https://placehold.it/660x405" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="grid__thing e"&gt;
      &lt;img src="https://placehold.it/1327x817" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="grid__thing f"&gt;
      &lt;img src="https://placehold.it/1327x817" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Ideally, I'd like to be able to set all the grid sizing properties in the grid parent and then ONLY define properties in grid item A to span across 2 columns and rows. </p>
  
  <p>Currently specifying each grid area and attaching a unique class like so:</p>
  
  <pre><code>.grid {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:  1fr 1fr 1fr;
      grid-template-areas: "a a b"
                           "a a c"
                           "d e f";
  .a {
      grid-area: a;
  }
  .b {
      grid-area: b;
  }
  .c {
      grid-area: c;
  }
  .d {
      grid-area: d;
  }
  .e {
      grid-area: e;
  }
  .f {
      grid-area: f;
  }
  </code></pre>
  
  <p>Would like to do something like this so I don't have to create a unique CSS class for each grid item:</p>
  
  <pre><code>.grid {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:  1fr 1fr 1fr;
      grid-template-areas: "a a b"
                           "a a c"
                           "d e f";
  }
  .a {
      // The only unique selector, so this is the only thing that
      // should be given unique styling
  }
  </code></pre>