gridレイアウト

本日は、CSSのgridレイアウトを使いました。久しぶりに使ったので、少し苦戦をしました。振り返りも兼ねて、gridについて簡単に書いていきたいと思います！

主な機能

1. grid-template-columns

• このプロパティを使用することで、列の幅を柔軟に設定できます！！例えば、「grid-template-columns: repeat(3, 1fr);」と指定することで、3つの等間隔のカラムを作成できます！gridでは「fr」という単位を使います！！

2. grid-template-rows

• 先ほどとかなり似ているプロパティです！これは、行の高さを指定する際に使えます。

例えば、「grid-template-rows: auto 4rem auto;」とすることで、最初の行は自動で2行目を4remで3行目を自動で設定できます！

3. gap

• こちらはアイテムの隙間を指定するために用います！

例えば「gap: 1rem;」にすると間隔を1remにできます！

振り返り

gridを用いることで、アイテムの配置を細かく変えられるので効果的でした！また、メディアクエリでサイト幅ごとに配置を設置できるので、より柔軟なパーツを作成できました。また、「display: contents;」を使うことで、余計なラッパー要素を省き、構造をシンプルに保ちました。

今後の課題

まだまだ、細かい配置変更などができていないので、もっと「grid」を使いこなさないといけないと感てます！！

-----------------------------------------------

G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/

G!FIT公式Twitter：https://twitter.com/gfit_gdn

メンバー紹介ページ：https://guardian.jpn.com/member/tomoya_matsuki/