CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート
Post on:2022年12月6日
sponsors
レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。
レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立たせたい箇所には少し広め・かなり広めといった使い方ができます。
HTMLもCSSもシンプルなので、スニペットに登録しておくと便利です。
Layout Breakouts with CSS Grid
HTMLは、非常にシンプルです。
ラッパーに.contentを与え、最大幅を設定した通常のコンテンツはclassなし、あとは幅に応じて.popout, .feature, .fullを与えるだけです。
|
1 2 3 4 5 6 7 8 9 |
<div class="content"> <div>Content</div> <div class="popout">Popout</div> <div>Content</div> <div class="feature">Feature</div> <div>Content</div> <div class="full">Full</div> <div>Content</div> </div> |
CSSは、CSS Gridを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.content { --gap: clamp(1rem, 6vw, 3rem); --full: minmax(var(--gap), 1fr); --content: min(50ch, 100% - var(--gap) * 2); --popout: minmax(0, 2rem); --feature: minmax(0, 5rem); display: grid; grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]; } |
実装のポイントは、2つ。
- 名前付き
grid-template-columnsでグリッドを定義し、ラッパー要素（.content）に対してすべてのコンテンツを配置。 - 最大幅・少し広め、かなり広め、全幅には、CSSの比較関数（
min(),minmax()）で実装。
CSS Gridのgrid-template-columnsについては、以前の記事をご覧ください。
CSSの比較関数（min(), minmax()）については、以前の記事をご覧ください。
あとは、グリッドのテンプレートエリアを使用して、すべてのコンテンツの幅を制御します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.content > * { grid-column: content; } .popout { grid-column: popout; } .feature { grid-column: feature; } .full { grid-column: full; } |
実際の動作は、デモページでご覧ください。
上部の「Show grid lines」をオンにすると、グリッドが表示されます。
このページでデモを見ても全幅しか違いがないので、右上「Edit on CodePen」をクリックしてブラウザを広げて見てください。
See the Pen
Layout Breakouts with CSS Grid by Ryan Mulligan (@hexagoncircle)
on CodePen.
sponsors
