CSS Grid template area not rendering how it should

Question

I don't understand, I simply want to have a layout like this. 3 columns per row

'EMPTY TOP     EMPTY'

'LEFT  MIDDLE  RIGHT'

'EMPTY BOTTOM  EMPTY'

The output is 2 rows with 5 columns.

'TOP   LEFT    MIDDLE'
'RIGHT BOTTOM'

Am i doing something wrong?

.grid-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 300px 300px 300px;
        grid-gap: 20px;
        grid-template-areas:
            '. top .'
            'left middle right'
            '. bottom .';
    }

    .mobile-top {
        grid-area: 'top';
        background-color: blue;
    }

    .mobile-left {
        grid-area: 'left';
        background-color: purple;
    }

    .mobile-right {
        grid-area: 'right';
        background-color: orange;
    }

    .mobile-middle {
        grid-area: 'middle';
        background-color: pink;
    }

    .mobile-bottom {
        grid-area: 'bottom';
        background-color: red;
    }

    <section class="grid-mobile">
        <div class="mobile-top">e</div>
        <div class="mobile-left">weqr</div>
        <div class="mobile-middle">e</div>
        <div class="mobile-right">e</div>
        <div class="mobile-bottom">wqer</div>
    </section>

thanks, that was really hard to miss cause I haven't used template areas before — Jackal, Sep 01 '20 at 20:43

score 0 · Accepted Answer · answered Sep 01 '20 at 20:49

Thanks for the comments above, might be this snippet will help having solution in stackoverflow.

.grid-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px;
  grid-gap: 20px;
  grid-template-areas:
    '. top .'
    'left middle right'
    '. bottom .';
}

.mobile-top {
  grid-area: top;
  background-color: blue;
}

.mobile-left {
  grid-area: left;
  background-color: purple;
}

.mobile-right {
  grid-area: right;
  background-color: orange;
}

.mobile-middle {
  grid-area: middle;
  background-color: pink;
}

.mobile-bottom {
  grid-area: bottom;
  background-color: red;
}

<section class="grid-mobile">
  <div class="mobile-top">e</div>
  <div class="mobile-left">weqr</div>
  <div class="mobile-middle">e</div>
  <div class="mobile-right">e</div>
  <div class="mobile-bottom">wqer</div>
</section>

CSS Grid template area not rendering how it should

1 Answers1