皆さん、こんにちは。新入社員のTです。

今流行ってるかも？なグリッドレイアウトについてお話していきます。

グリッドレイアウト(デザイン)とは

格子を作成し自由に組み合わせて写真や文字を配置することです。

新聞などの2D媒体でよく使用されます📚

HPにおいて、グリッドレイアウトには3種類の型があります。

◆定形型
決まった形のブロックを組み合わせてレイアウトをしていく方式
◆可変型
様々な大きさのブロックが配置されており、ブラウザの幅に合わせて変化する
◆ハイブリッド型
デスクトップやタブレットサイズでは可変型を採用しつつ、幅の狭いモバイル端末では1カラムを中心とした定形型を採用する方法

【CSS Grid Generator】というサイトで実は簡単にCSSでグリッドレイアウトが作れちゃうんです

組みたいレイアウトをこのツールで作った後、HTML/CSSコードをコピペする流れになります。

グリッドデザインにすることにより、ユーザーに対して情報が整理されたWebサイトという印象を与えることができます。

さらにデザインの幅も広がりますし、何より効率的にコーディング更新作業をすることが可能になります！

私もまだHTML/CSSは勉強中なので、これからもっと制作を効率化かつ簡単にできるよう研究してまいります✊