CSS グリッド レイアウトを使用してカード レイアウトを作成する方法

編集者注: このゲスト投稿は、UX ソフトウェア エンジニア兼 Web デザイナーであり、コード作成の芸術を愛する Abbey Fitzgerald によって書かれました。

CSS グリッド レイアウトは Web デザイナーの作業方法を変え、Web サイト コンテンツをより効率的にレイアウトできるようにします。

長い間待ち望まれていましたが、ついにこのアプローチが実際に採用され、多くの場合、製品化されました。 Web サイトの設計方法に革命をもたらし、デザイナーがコツをつかめば、Web レイアウトの柔軟性が向上します。

CSS グリッドを使用したデザインを試み、Web 上のチュートリアルを確認したことがある場合は、全体的なレイアウト アプローチに関連する情報を見つけた可能性があります。 ヘッダー、コンテンツ、フッターなど。

ただし、CSS グリッドは、カードなどの他の Web サイトの詳細にも役立ちます。 カード レイアウトは、コンテンツを表示する一般的な方法であり、CSS グリッドを使用して効率的に作成できます。 この方法を使用すると、カード コンテンツ領域を簡単に再現でき、さまざまな種類のデバイスで表示でき、サイズを簡単に制御できます。

CSS グリッド レイアウト ツール

作業を進めていくと、ページ上の内容を調べたくなります。 Firefox には、グリッド領域を表示するための優れた開発者ツールがあります。 Firefox 開発者ツールを使用すると、グリッドの輪郭を示すオーバーレイを表示できます。 Firefox Developer Edition にもこの機能があります。

表示するオーバーレイ グリッドを選択します (デザインによっては、複数ある場合があります)。 グリッド表示設定では、ライン番号、エリア名、およびラインの延長方法を表示することで、詳細を確認できます。 これは、設計時に役立ちます。

CSS グリッド レイアウトを使用したシンプルなカード

CSS グリッドを初めて使用する場合は、基本に磨きをかけ、簡単な CSS グリッド レイアウトを作成することをお勧めします。 カードは、コンテンツを表示する優れた方法であると同時に、直感的に使用できる興味深い UI 要素でもあります。 また、ユーザーがコンテンツをすばやくスキャンし、最も関心のあるものに取り組むための優れたフォーマットも提供します。カードを使用すると、デザイナーは、優れた画像、イントロ コンテンツ、リンクなどを使用して、視覚的に魅力的な方法でコンテンツをフォーマットすることもできます。

カードと全体的なページ レイアウト

余談ですが、CSS Grid はページ レイアウト全体で使用する必要はありません。 必要に応じて、ページの特定の領域でグリッドを使用できます。 これはカード レイアウトのチュートリアルであるため、ページの残りの部分で CSS グリッドが使用されていなくても、ここではグリッド アプローチのみを使用できます。 グリッド領域が定義され、次のようにdisplay: grid; ラッパーで宣言されている場合、このアプローチを使用できます。

セット数のカードを操作する

場合によっては、一定数のカードを計画するのは簡単です。 一定量のコンテンツで、カードの数は変わりません。 たとえば、ビジネス オファリングを説明する 4 つのカードがあり、各オファリングが独自のカードに記載されている場合があります。

この例 (および他の例) では、すべての.cardアイテムが.cardsコンテナー要素内にあります。 これを実現する方法は非常に簡単です。

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

.cardsの値をグリッドに表示することが重要です。 これがないと、グリッド領域を作成できません。 次のステップは、 grid-template-columnsを定義し、スタイルを選択することです。 実際のカード スタイルは、クラス.cardで宣言されます。

この例では、クラスが.cardの記事タグが複数表示されます。 Codepen で参照してください。

セット数のカードについて繰り返します

ここからカードが形になり始めます。 行ごとに流動的な量の列を作成するには、 repeat()関数で repeat を使用します。 この関数は、繰り返す回数と繰り返す値の 2 つの引数を取ります。

例: grid-template-columns: repeat(3, 200px); grid-template-columns: 200px 200px 200px; .

分数単位

サンプル コードで「fr」が使用されていることがわかります。 それは正確には何ですか？ この測定単位は、CSS グリッドで普及しました。 Fr は「分数単位」を意味し、 1fr使用可能なスペースの 1 部分を占めます。 スペースの計算を簡素化するのに役立ちます。

分数単位は単独で使用することも、 1frの幅を指定して子要素を追加することもできます。 複数の fr は、すべての子要素で均等に共有されます。

異なる分数単位を指定できます。 たとえば、グリッド列が1fr 2fr 1frの場合、2 つの分数単位は 1 つの分数単位の 2 倍のスペースを占有します。

動的な数のカードについて繰り返します

場合によっては、必要なカードの数がわからないことがあるため、セット数を計画してもうまくいきません。 繰り返しの場合と同じアプローチが取られますが、オートフィルで必要なだけフィットするオプションがあります。

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

auto-fillに加えて幅の宣言が必要です。 px 値を使用すると、カードを収めるのに十分なスペースがない場合に右側にスペースが生じる場合がありますが、後で説明するように、必ずしもそうである必要はありません。

カード幅をより詳細に制御するための最小値

分数単位だけでカードが全幅になるため、Minmax は完璧なソリューションです。 スタイル宣言に repeat と minmax の両方を追加すると、可能な空きスペースが取り除かれ、カードがより滑らかに表示されます。

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

列は常にグリッドに収まり、カードは少なくとも 200px になります。 最小スペースがスペースに完全に収まらない場合、ここで最大幅が機能します。 別の 200 ピクセル幅のカードが収まらない場合、他のカードは 200 ピクセルよりも大きくなるので、より多くのスペースで行を埋めるために引き伸ばされ、均等に分散されます。 [記事 id="21612" align="右"]

モバイル

最小および最大のカードが計画されているので、これはモバイルについて話す良い機会です。 コンテンツは消化可能なチャンクであり、カードは簡単に拡大および縮小できるため、カードは大小のデバイスでうまく機能します。 CSS グリッドは優れたモバイル エクスペリエンスの作成に役立ち、場合によっては、個別のメディア クエリを用意するよりもはるかに簡単です。

この例では、カードはモバイルに収まるようにサイズを小さくし、使用可能なスペースの一部になるようにサイズを大きくする必要があるため、小さなデバイスでは全幅で表示され、別のメディア クエリは必要ありません。

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

カードの最小幅は 300px です。 300px のカードが収まる数だけ行に表示されます。 デバイスが非常に小さい場合、2 枚のカードを続けて使用できるスペースがない可能性が高くなります。 それが1frの出番です。 分数単位はレスポンシブ デザインに最適です。 300px のカードのうち 2 枚が収まらない場合、モバイル ビューが非常に明確になります。 1fr最大幅として宣言されている場合、1 枚のカードが使用可能なすべてのスペースを占有し、互いの上にスタックされます。

グリッドギャップ

カードの幅が確立されたので、カード間にスペースを設けるかどうかを決定する必要があります。 このプロパティはグリッド コンテナーで使用でき、デザインにガターを簡単に作成できます。 Grid-column-gap各カード間にスペースを作成します。 grid-gapは、 grid-row-gapとgrid-column-gapの省略形を指します。 Grid-row-gapはカードの上下のスペース、 grid-column-gapはカードの左右のスペースです。

CSS グリッド レイアウト リソース

CSS グリッド レイアウトに関しては、学ぶべきことがたくさんあり、多くの可能性があります。 CSS グリッド レイアウトについて学ぶ最善の方法は、追加の読書と実験を行うことです。 そこには多くの優れたリソースがありますが、開始するためのいくつかを以下に示します。

• 例によるグリッド
• Wes Bos による CSS グリッド レイアウト コース
• Mozilla の CSS グリッドの紹介