Gridでレスポンシブ対応のレイアウトのサンプルをいくつか作成してみました。仕組みやプロパティなどの基本的な説明は省きます。レイアウトのサンプル5種全てのデモページを用意しています。Gridを導入しようと思い、参考に実際のWebサイトではどのような使われかたをしているかを調べたことがきっかけです。Gridで組まれたサイト自体あまり多くは見つけられなかったのですが、よく紹介されている「ヘッダー、フッター、サイドバー、メインコンテンツに分割してそれぞれの幅や位置を指定する」といったものではなく、より実践的なサンプルを作成してみたいと思いました。記事内のCSSはGridに関係する部分のみを記述しています。テキストや画像などは適宜調整してください。IE対応はベンダープレフィックスを付与するといった単純なものだけではないため省略します。Node.jsのツールAutoprefixerがあります)メインビジュアルにキャッチコピーを重ねるファーストビューのメインビジュアルでよく見られる、画像をウィンドウ幅よりやや狭めてキャッチコピーを重ねるレイアウトです。スマホでは重ねずキャッチコピーを上、画像を下にします。よる項目のレイヤー化に「グリッドアイテムは、同じセルを占有できます。」とある通り、グリッドアイテムを重ねることができます。指定することで重なりの順序を調整することができます。プロパティは使用しません。「メインビジュアルにキャッチコピーを重ねる」デモはこちら見出しとテキストと補助的な写真のセット片側に写真があり、もう片側に見出しや本文、リンクボタンなどがあるというレイアウトです。使用します(IE未対応)。スマホではテキスト類が上、画像が下になるようにします。作成する場合、HTML上でのグリッドアイテムの順番に関わらず自由に配置することができます。指定を変えるだけで、HTMLはそのままに位置を簡単に入れ替えることができます。「見出しとテキストと補助的な写真のセット」デモはこちらサムネイル付きのブログやニュース一覧トップページなどに数件の最新記事を表示するような場合のレイアウトです。サンプルはアイキャッチありで作成します。記事の表示数は4つ、レイアウトはスマホ2列、タブレット・PC4列とします。}}コンテナの列を12分割します。スマホでは1行に記事を2つ並べたいので、12トラックの半分6トラックにまたがるように指定します。PCでは1行に4つ並べるので、3トラックにまたがるようにします。コンテナの列の分割数はレイアウトにあわせて適宜調整してください。「サムネイル付きのブログやニュース一覧」デモはこちらブロークングリッドレイアウト縦軸や要素同士の間隔を完全には揃えず少し崩したブロークングリッドレイアウトです。スマホでは1列に並べます。}}PCではコンテナの列を12分割します。アイテムごとに、トラックいくつ分の幅にするか、どのグリッド線の位置に配置するかを自由に指定してください。「ブロークングリッドレイアウト」デモはこちらフッターフッターの内部のロゴやリンクリスト、コピーライトなどのレイアウトです。リンクリストの3つのブロック部分はFlexboxを使用しています。}}PCではフッターの上段にロゴやリンクリスト、下段にその他のリンクとコピーライトが配置されるようにしています。