空の要素が

Question

私はこのように、CSSグリッドのテンプレート領域を使用します。

grid-template-areas: 
    'sidebar tags' 
    'sidebar categories'; 

それが正常に動作していますが、私は一種の、このように、空の要素を追加したいと思います：

grid-template-areas: 
    'EMPTY sidebar tags  EMPTY' 
    'EMPTY sidebar categories EMPTY'; 

これは可能ですか？私はそれのための空のhtml要素を追加することができます知っているが、私はCSSのグリッドは、ほとんどの場合、本当にスマートです。

Answer 1

CSSグリッド仕様には、グリッド - カラム - ギャップとグリッド - ロー - ギャップのプロパティを持つ列と行のトラック間に溝を追加する機能が含まれています。これらは、複数列レイアウトのcolumn-gapプロパティと同じように機能するギャップを指定します。

ギャップは、グリッドのトラック間にのみ表示され、コンテナの上下左右にスペースを追加しません。したがって、これらのプロパティを使用して既存のテンプレート領域の間にギャップを作成することしかできませんでした。

grid-column-gap: 40px; 
grid-row-gap: 2em;