CSS Gridで実装すると簡単! コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート

レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。

レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立たせたい箇所には少し広め・かなり広めといった使い方ができます。

HTMLもCSSもシンプルなので、スニペットに登録しておくと便利です。

CSS Gridで実装すると簡単! コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート

Layout Breakouts with CSS Grid

HTMLは、非常にシンプルです。
ラッパーに.contentを与え、最大幅を設定した通常のコンテンツはclassなし、あとは幅に応じて.popout, .feature, .fullを与えるだけです。

CSSは、CSS Gridを使用します。

実装のポイントは、2つ。

  • 名前付きgrid-template-columnsでグリッドを定義し、ラッパー要素(.content)に対してすべてのコンテンツを配置。
  • 最大幅・少し広め、かなり広め、全幅には、CSSの比較関数(min(), minmax())で実装。

CSS Gridのgrid-template-columnsについては、以前の記事をご覧ください。

CSSの比較関数(min(), minmax())については、以前の記事をご覧ください。

あとは、グリッドのテンプレートエリアを使用して、すべてのコンテンツの幅を制御します。

実際の動作は、デモページでご覧ください。
上部の「Show grid lines」をオンにすると、グリッドが表示されます。

このページでデモを見ても全幅しか違いがないので、右上「Edit on CodePen」をクリックしてブラウザを広げて見てください。

See the Pen
Layout Breakouts with CSS Grid
by Ryan Mulligan (@hexagoncircle)
on CodePen.

sponsors

top of page

©2024 coliss