I'm trying to make a periodic table with CSS grid. To do that, I would need empty cells in multiple rows - I'm trying to achieve that with the documentation shown here: <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas>

**HTML**

```
<div class="wrapper">
    <div class="element">El</div>
    //repeated 90 times
</div>

```

**CSS**

```
.element {
  grid-area: el;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
    grid-template-areas:
        'el . . . . . . . . . . . . . . . . el'
        'el el . . . . . . . . . . el el el el el el'
        'el el . . . . . . . . . . el el el el el el'
        'el el el el el el el el el el el el el el el el el el'
        'el el el el el el el el el el el el el el el el el el'
        'el el . el el el el el el el el el el el el el el el'
        'el el . el el el el el el el el el el el el el el el';
}

```

However, when rendered, it seems as if everything gets bunched up in the top right, as shown here: <https://jsfiddle.net/agreyfield91/9qnwv16u/9/>. Why is this?