70462


[【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】 -
YouTube](https://www.youtube.com/watch?v=cwkkD0ejX8Q) で `grid-template`
で余白を設けるのにドットを用いています（解説されているように `gap` を使うよりわかりやすそうなので使うつもりです）。

ソースコードは下記のようです。  
[html-css-class/style.css at master · lightsound/html-css-
class](https://github.com/lightsound/html-css-
class/blob/master/002b_%20HolyGrail-grid/style.css)

引用:

[code]

    grid-template:
        "... ...... ...... ...... ...... ...... ..."
        "... header header header header header ..." 150px
        "... ...... ...... ...... ...... ...... ..."
        "... left   ...... center ...... right  ..." 1fr
        "... ...... ...... ...... ...... ...... ..."
        "... footer footer footer footer footer ..." 300px
        "... ...... ...... ...... ...... ...... ..."
        / auto 150px auto 1fr auto 200px auto;
    
[/code]

このドットについて検索したのですが、仕様のようなものを見つけられませんでした。  
ドットでなくても任意の文字列でもいいのでしょうか？ それとも `grid-area`
に指定していない名前を表現するためにドットを使う等のグリッドに関する仕様があるのでしょうか？


CC BY-SA 4.0
2020-09-16T22:10:09.590
70461
2020-09-16T22:30:39.117
9008
question
html css
grid-template で余白を設けるときにドットを使うのはそういう仕様ですか？


`grid-template-areas` プロパティの値における 1 つ以上のドット (U+002E FULL STOP) は **null
セルトークン** を表します[[1]](https://drafts.csswg.org/css-grid/#grid-template-areas-
null-cell-token)。 Null セルトークンはグリッドコンテナー内の名前のない領域を表しています。

> ### § 7.3. Named Areas: the grid-template-areas
> property[[1]](https://drafts.csswg.org/css-grid/#grid-template-areas-null-
> cell-token)
>
>   * A sequence of one or more "." (U+002E FULL STOP), representing a null
> cell token.
>


CC BY-SA 4.0
2020-09-16T22:30:39.117
70462
2020-09-16T22:30:39.117
32986
70461
answer