グリッドレイアウトを使えばHTML要素を汚さずwebサイトのレイアウトができる【Grid Layout】

CSSグリッドレイアウトは、CSSで利用可能なレイアウトシステムです。

これまでfloatflexで表現してきた横のレイアウトですが、

これまで1次元システムであったflexboxとは異なり、列と行の両方を一括で扱うことができます

メリットを上げるならこんな感じ。

メリット
  • 複雑な配置もカンタンな記述で実現可能
  • コードがすっきり見やすい
  • HTMLの記述量が削減ができる
  • 引き継ぎする人も楽

使いこなせるとこれまでに比べ脳内もスッキリすると思うのでおすすめです。

グリッドレイアウトは、親要素(グリッドコンテナになる)と子要素(グリッド項目になる要素)の両方にCSSルールを適用することによって動作します。

従来のレイアウト

シンプル!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です