Gridのgapで後悔したこと

gridって？ gapって？

See the Pen Untitled by himeka223 (@himeka223) on CodePen.

grid
...子要素を見えないグリッドで仕切り、配置、サイズなど自由にできる
gap
...子要素同士の余白を指定（gridの他にflexでも使える）

どんな使い方で後悔したのか

親要素に子要素同士の余白を指定できるのが楽すぎて、gridを使わなくていいのにgapを使うためだけに乱用していた。下記みたいなときは、なんと3行も節約できちゃう！　

親にgapを使用

.area{
  display: grid;
  gap: 8px;
}

子にmarginを使用

.area{
  &__title{
    margin-bottom: 8px;
  }
  &__text{
    margin-bottom: 8px;
  }
  &__data{
    margin-bottom: 8px;
  }
  ...
}

システム組込み時の新たなタグの出現

どこで後悔したかというと、初めてSalesforceのHTMLコーディグをしていたときのこと。
下記のようにシステム系のタグが入り、のちにHTMLタグとして出力するようで、gapが無効化してしまった。。。

こんなとき

<div class="area">
  <システム系のタグ> 👈
    <h1 class="area__title">タイトル</h1>  
    <p class="area__text">テキストテキストテキスト</p>
    <div class="area__data">...</div>
  </システム系のタグ> 👈
</div>  

こうなってしまう箇所は少なかったので、ユーティリティで用意してた余白のみのクラスを追加して対応しました。

システムを組込むときはgapの使い方は見直したほうが良さそう

純粋なHTMLだけでできてるコーポレイトサイトとかでは楽で便利だけど、管理画面のコーディングや、システムの組み込みのあるときはgapは相性が悪かったです。
あと共通エリアで指定して、余白が固定されてしまうと、汎用的でなくなり拡張性も悪くなります。（すべての使用箇所で完全に同じ余白であればむしろ揃うので良いかもしれない）

とりあえずは下記を意識するのが大事。

小さいパーツ（buttonとか）の中で使う
パーツ同士の余白には使わない

システムに組み込まれる場合はどこに何が来ても崩れないマークアップが大事だなと実感しました。