CSSのGrid Layoutで子要素がaタグ（anchor）だと崩れやちらつきになる

結論

Grid Layoutの子要素にaタグは使ってはいけない。
aタグをさらに内包したときにスタイルが崩れる。

経緯

GatsbyとTailwindCSSで実装したブログのページが初期表示の一瞬だけちらついているのに気がついた。
最初はFOUCと呼ばれるCSSの反映が遅れている現象かと思って、色々調査するもことごとく空振り。
しょうがないので徹底的にHTML要素を消したり変えたりいじくり回していると、aタグの有無が挙動に変化を与える事実に気づいた。

事象の詳細

今回の事象はブログの記事一覧で発生した。
ちなみにこんな感じ。

不要な部分を削ぎ落としてざっくりの構成としては、下記のようなGrid Layoutになっていた。

<div class="container">
  <a class="item">
    <div><a>要素1</a></div>
  </a>
  <a class="item">
    <div><a>要素2</a></div>
  </a>
  <a class="item">
    <div><a>要素3</a></div>
  </a>
</div>

外側のリンクは各記事へ遷移するため、内包されたリンクは記事に紐づくタグの部分で、クリックするとタグが紐づく記事の一覧に遷移するために設定している。
これを実際にレンダリングすると下記のNGパターンのように崩れる。

• バニラCSS
• TailwindCSS

原因

Gridの親要素の直下（子要素の枠）にaタグを使用した上で、子要素にさらにaタグを内包すると発生する模様。
そもそもGridの親要素の直下（子要素の枠）にdivなど他のタグを使えば、子要素にaタグを内包していてもスタイルは崩れない。

<div class="container">
  <div class="item">
    <a>要素1</a>
  </div>
  <div class="item">
    <a>要素2</a>
  </div>
  <div class="item">
    <a>要素3</a>
  </div>
</div>

感想

原因が分からなくてめちゃくちゃ時間溶かした。
なぜかGatsbyでレンダリングしたときは最初一瞬崩れるだけですぐ直るので、CSSの基本的な実装方法に問題があるとなかなか気づけなかった…。
無駄にFOUCに詳しくなってしまった気がする。