Tailwindcss + CSSGrid

[shogosakihama]

Tailwindcssにcssgrid入れたら幸せだよね。

CSSで画面の高さ100%の指定方法

《Nuxt.js》CSSのオートプレフィクスをカスタマイズする方法。GridのIE対応も！

《CSS》デザイナーでも簡単便利、Gridの神な実践機能を少しだけ伝えたい。

[shogosakihama]

あらかじめ作られているデザインを作り替えた方が楽だよね。 最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks

[shogosakihama]

他コンポーネントを取り込んで表示した場合、hover:text-white-100が効かない。なぜだろう？

[shogosakihama]

レスポンシブデザイン 、スマートフォンのサイズの時はフーバー効かない。

[shogosakihama]

縦を100％にする書き方。

html,
body,
#__nuxt,
#__layout,
#__layout > div,
div,
div.container.m-auto {
  width: 100%;
  height: 100%;
}

[shogosakihama]

このやり方だとやりやすい。 ただ今回は凡ミスした。 input要素を1つづつdivで囲んだからレイアウト崩れた。 普通は大丈夫だが、上のやり方だと矛盾が生じるのかもしれない。

あとこのやり方だと以下のdivタグが全部100％になってしまうので、pタグに変更するなど必要になる。でも縦100％が使えるのは魅力。

[shogosakihama]

でもfooterが伸縮にあわせて下方に移動してくれないな〜。 まだ実際の案件には使えないか。

[shogosakihama]

例えば投稿によってどんどん縦の比率が変化するレイアウトに向いてないかもしれない。課題。

[shogosakihama]

この縦の比率が問題。比率の合計が100％を超えているが、こうしないと投稿の表示が見切れる。 投稿に応じて縦が伸びれば良い。変数に代入できるだろうか？

.container {
  height: 100%;
  display: grid;
  grid-template-rows: 15% 140% 10%;
  grid-template-columns: 15% 70% 15%;
}

[shogosakihama]

やっぱりflexに直すかも。

[shogosakihama]

縦の投稿表示欄を1frにしたら問題解決。

.container {
  height: 100%;
  display: grid;
  grid-template-rows: 15% 1fr 10%;
  grid-template-columns: 15% 70% 15%;
}

[shogosakihama]

結論

この設定でOK!

html,
body,
#__nuxt,
#__layout,
#__layout > div,
div{
  width: 100%;
  height: 100%;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: 15% 1fr 10%;
  grid-template-columns: 15% 70% 15%;
}

[shogosakihama]

.container {
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: 15% 100% 10%;
  grid-template-columns: 15% 70% 15%;
}

いや、やっぱりこれがいい！楽！ min-height: 100vh;にするとviewに対して100％にしてくれる。vhview,height. 【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】