Why isn't grid-template-areas property valid?

Question

I've got the following code:

CSS

.items {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    grid-template-columns: auto 40px auto;
    grid-template-areas: 
    "i1 . i2 . i3"
    ". . ."
    "i4 . i5 . i6";
}
.i1 {
    grid-area: i1;
}
.i2 {
    grid-area: i2;
}
.i3 {
    grid-area: i3;
}
.i4 {
    grid-area: i4;
}
.i5 {
    grid-area: i5;
}
.i6 {
    grid-area: i6;
}

HTML

<div class="i1"></div>
<div class="i2"></div>
<div class="i3"></div>
<div class="i4"></div>
<div class="i5"></div>
<div class="i6"></div>

Everything becomes a mess, and in Dev Tools I can see that I'm getting a warning on line defining grid-template-areas property saying "Invalid property value".

If I delete ". . ." from property value, it all starts working.

But I need this indent between rows. How can I make it work?

"..." is only three columns. Make it "....." You need an equal number of columns in each string. — Michael Benjamin, Mar 22 '21 at 16:48
@cse_vikashgupta as far as I know it's not supported in many browsers, or it's fine to use it now? — Coder4Fun, Mar 26 '21 at 15:43

Mr. Polywhirl · Accepted Answer · 2021-03-26T18:30:25.750

1

Simplify your grid to:

i1 i2 i3
i4 i5 i6

After you have done that, aply a grid row/column gap of 40px.

.items {
  display: grid;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(1fr);
  grid-template-areas:
    "i1 i2 i3"
    "i4 i5 i6";
}

.i1 { grid-area: i1; }
.i2 { grid-area: i2; }
.i3 { grid-area: i3; }
.i4 { grid-area: i4; }
.i5 { grid-area: i5; }
.i6 { grid-area: i6; }

<div class="items">
  <div class="i1">1</div>
  <div class="i2">2</div>
  <div class="i3">3</div>
  <div class="i4">4</div>
  <div class="i5">5</div>
  <div class="i6">6</div>
</div>

Here is a version with margins (if grid-gap is not available):

.items {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-areas:
    "i1 i2 i3"
    "i4 i5 i6";
}

.i1, .i2, .i3 { margin-bottom: 20px; }
.i4, .i5, .i6 { margin-top: 20px; }

.i1, .i4 { margin-right: 20px; }
.i2, .i5 { margin-left: 20px; margin-right: 20px; }
.i3, .i6 { margin-left: 20px; }

.i1 { grid-area: i1; }
.i2 { grid-area: i2; }
.i3 { grid-area: i3; }
.i4 { grid-area: i4; }
.i5 { grid-area: i5; }
.i6 { grid-area: i6; }

<div class="items">
  <div class="i1">1</div>
  <div class="i2">2</div>
  <div class="i3">3</div>
  <div class="i4">4</div>
  <div class="i5">5</div>
  <div class="i6">6</div>
</div>

edited Mar 26 '21 at 18:30

answered Mar 22 '21 at 16:55

Mr. Polywhirl

42,981
12
84
132

or simplify it by using `grid-gap: 40px;` instead of `grid-column-gap: 40px; grid-row-gap: 40px;`. – tacoshy Mar 22 '21 at 19:44
1

@tacoshy I separated the rules, in case the spacing varied between rows vs columns. – Mr. Polywhirl Mar 22 '21 at 19:47
no need to explain yourself. which is more then a valid reason. I just gave that comment so that OP could shorten the code when he wants to. – tacoshy Mar 22 '21 at 19:54
Is it OK to use these properties now? As far as I knew, these properties were not supported in many browsers – Coder4Fun Mar 26 '21 at 15:47
I've checked this property on www.caniuse.com and it's not supported in IE 11 – Coder4Fun Mar 26 '21 at 15:51
@Coder4Fun You could add margins. – Mr. Polywhirl Mar 26 '21 at 18:26

Why isn't grid-template-areas property valid?

1 Answers1