grid鍛錬。見当違いな予測していて恥ずかしすぎた

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

昨日は多分疲れていたんです。

昨日の日記何を書いてたんでしょう。

gridのデフォルトがheightがなんだって？

本当に恥ずかしい。

gridのデフォルトでheightなんてなんも関係ないのに！！

ちょっととち狂っていました。

昨日言いたかったのは、gridというよりもflexの挙動。

gridコンテナ内のflexboxとflexitemに起きた問題だったので

gridが〇〇〜って書いたのだと思います。ヤツは

heightがautoのflexitemってflexboxと同じ高さになってしまうので、そこ切り離すか、heightを設定せずにfelxitemだけ小さくできないかなぁという悩みでした。

まぁなんのことはないmarginを上下に着けて解決しましたよね。。

すみません。昨日も今日も主観で思うままに書いてしまってすごく分かりづらい文だと思います。

header内ににボタンを作成するため、header > button-wrapper > buttonという子孫関係を作りました。

headerにはgridがrow方向に4本

そしてbutton-wrapperにdisplay: flex; grid-row: 1 / 4;

この状態でボタンの高さをheightを使わずになんとか調整したいなってところでちょっと悩んでたんですね。

今見るとなんで悩んでんだ？って感じですね。

grid-row: 1 / 4;

そりゃボタンも太くなるわと。

ここでのこの記述は上下についてはじからはじまで領域がありますよっていう記述なんでheaderの上から下までbuttonの高さが広がっているんです。

なので、

grid-row: 2 / 3;

とかでもいいやんねってことです。

まぁでもこの記述のコードは配置が気に入らなかったので、採用しませんでしたが。

最終的にbutton-wrapperの上下のmarginを設定するのが一番しっくり来て無事解決でした。

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら