grid-template-areas: none vs grid-template-areas: dot? - html

Question

csstricks says, we have three property values for grid-template-areas, out of which two are . and none. I can't see any difference in the way . and none affect the grid. See following:
.grid-container {
display: grid;
grid-template-areas: "one none two three"
"four five . six" ;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: two;
}
.item3 {
grid-area: three;
}
.item4 {
grid-area: four;
}
.item5 {
grid-area: five;
}
.item6 {
grid-area: six;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
As you can see above . and none both leave empty blocks in the grid. I also searched on MDN, but theres no explanation for the difference. So,
What is the difference between grid-template-areas: none and grid-template-areas: .?

Answer 1

From the specification:
Name: grid-template-areas
Value: none | <string>+
Initial: none
none is a value on its own (grid-template-areas:none) and not a value to be used like grid-template-areas:" none one". the latter will fall under the <string>+ and "none" will become a named area and is different from .
A sequence of name code points, representing a named cell token with a name consisting of its code points.
A sequence of one or more "." (U+002E FULL STOP), representing a null cell token.
Below, I am placing 6 at "none" area
.grid-container {
display: grid;
grid-template-areas: "one . two three"
"four five none six" ;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: two;
}
.item3 {
grid-area: three;
}
.item4 {
grid-area: four;
}
.item5 {
grid-area: five;
}
.item6 {
grid-area: none;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
This said, your example will show no difference because you are explicitly placing all your items so "none" and "." will remain empty in all the case. You can put anything there, the result will be the same.