CSSグリッドレイアウトを使用してカードレイアウトを作成する方法
公開: 2018-12-03CSSグリッドレイアウトは、Webデザイナーの作業方法を変更し、Webサイトコンテンツをより効率的にレイアウトできるようにします。 それは待望されていましたが、最終的にこのアプローチは実際に普及し、多くの場合、本番環境にあります。 これは、Webサイトの設計方法に革命をもたらし、デザイナーがそのコツをつかむと、Webレイアウトの柔軟性が高まります。
CSSグリッドを使用して設計を試み、Webでチュートリアルを確認した場合は、全体的なレイアウトアプローチに関連する情報を見つけた可能性があります。 ヘッダー、コンテンツ、フッターなど。ただし、CSSグリッドは、カードなどの他のWebサイトの詳細にも役立ちます。 カードレイアウトはコンテンツを表示する一般的な方法であり、CSSグリッドを使用して効率的に作成できます。 この方法を使用すると、カードのコンテンツ領域を簡単に再現でき、さまざまな種類のデバイスで表示でき、サイズを簡単に制御できます。
CSSグリッドレイアウトツール
あなたが進んでいるとき、あなたはページ上のものを調べたいと思うでしょう。 Firefoxには、グリッド領域を表示するための優れた開発者ツールがあります。 開発者ツールのFirefoxのバージョン52では、グリッドの輪郭を描くオーバーレイを見ることができます。 FirefoxDeveloperEditionにもこの機能があります。
表示するオーバーレイグリッドを選択します（デザインによっては、複数存在する場合があります）。 グリッド表示設定を使用すると、行番号、エリア名、および行の延長方法を表示して、詳細を確認できます。 これは、設計時に役立ちます。
CSSグリッドレイアウトのシンプルなカード
CSSグリッドを初めて使用する場合は、基本をブラッシュアップして、単純なCSSグリッドレイアウトを作成することをお勧めします。 カードは、コンテンツを表示するための優れた方法であるだけでなく、直感的に使用できる興味深いUI要素でもあります。 これらは、ユーザーがコンテンツをすばやくスキャンして最も興味のあるものに取り組むための優れたフォーマットです。カードを使用すると、デザイナーは優れた画像、イントロコンテンツ、リンクを使用して視覚的に魅力的な方法でコンテンツをフォーマットすることもできます。
カードと全体的なページレイアウト
余談ですが、CSSグリッドをページレイアウト全体で使用する必要はないことを知っておくことが重要です。 グリッドは、必要に応じてページの特定の領域で使用できます。 これはカードレイアウトのチュートリアルであるため、ページの残りの部分でCSSグリッドを使用しない場合でも、グリッドアプローチをここでのみ使用できます。 グリッド領域が定義され、 display: grid; ラッパーで宣言されている場合、このアプローチを使用できます。
設定した枚数のカードで作業している場合
場合によっては、カードのセット数を計画するのは簡単です。 コンテンツの量を設定すると、カードの数は同じままになります。 たとえば、ビジネスオファリングを説明する4つのカードがあり、各オファリングは独自のカードにあります。
この例（およびその他の例）では、すべての.cardアイテムが.cardsコンテナー要素内にあります。 これを達成するために、それは非常に簡単です。
.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;
}
.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倍のスペースを占めます。
カードの動的な数に対して繰り返します
場合によっては、必要なカードの数がわからないことがあるため、セット数の計画がうまくいかないことがあります。 リピートの場合と同じアプローチが採用されますが、自動入力で必要な数だけフィットするオプションがあります。
grid-template-columns: repeat(auto-fill, 250px);
auto-fillに加えて、幅の宣言が必要です。 熱心に、px値を使用すると、カードを収めるのに十分でない場合に右側にスペースが空く可能性がありますが、後で説明するように、そうである必要はありません。
カード幅をより細かく制御するためのMinmax
ミニマックスは完璧なソリューションです。分数単位だけでカードが全幅になるからです。 スタイル宣言にrepeatとminmaxの両方を追加すると、空の可能性のあるスペースがなくなり、カードがより流動的に表示されます。
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
列は常にグリッドに適合し、カードは少なくとも200ピクセルになります。 最小スペースがスペースに完全に適合しない場合、これが最大幅が作用する場所です。 別の200px幅のカードが収まらない場合、他のカードは200pxより大きくなるため、それらは伸びて列をより多くのスペースで埋め、均等に分散されます。
WordPressサイトをモバイルフレンドリーにする方法
モバイルフレンドリーなWordPressサイトが新しい標準であることは周知の事実ですが、どれほど一般的に見えるかもしれませんが、美しくレスポンシブなサイトを作成するには、まだ少し手間がかかる可能性があります。 このガイドは...
モバイル
最小と最大のカードが計画されているので、これはモバイルについて話す良い機会です。 コンテンツは消化可能なチャンクになっており、カードは簡単にスケールアップおよびスケールダウンできるため、カードは大小のデバイスでうまく機能します。 CSSグリッドは、優れたモバイルエクスペリエンスを作成するのに役立ち、場合によっては、個別のメディアクエリを使用するよりもはるかに簡単です。
この例では、カードはモバイルに収まるようにサイズを小さくし、使用可能なスペースの一部になるようにサイズを大きくする必要があるため、小さいデバイスでは全幅で表示され、個別のメディアクエリは必要ありません。
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
カードの最小幅は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グリッドレイアウトは、Webデザインにとって比較的新しいものです。 学ぶことはたくさんあり、多くの可能性があります。 CSSグリッドレイアウトについて学ぶための最良の方法は、いくつかの追加の読み物と実験を行うことです。 そこには多くの素晴らしいリソースがありますが、ここにあなたが始めるためのいくつかがあります：
- 例によるグリッド
- ウェスボスのCSSグリッドレイアウトコース
- CSSグリッドへのMozillaの紹介
開発者が大好きなWordPressプラグイン
サイト開発をスピードアップする完璧なWordPressプラグインを見つけることは、コードの文字列から単一のタイプミスを見つけようとすることに少し似ています。時間がかかる場合があります。 そして最近では、さまざまなタスク用のプラグインが非常に多いため、サイトが必要とする（または必要としない）機能と、それを効率的に提供するプラグインを正確に特定するのは難しい場合があります。
開発者に最も推奨されるプラグインのリストについては、この電子ブックをダウンロードしてください。 これらのプラグインはすべて、使いやすく、サイトのパフォーマンスがそれほど高くなく、まったく信頼できることがわかりました。
新しいお気に入りのプラグインをインストールする準備はできましたか？ 飛び込みましょう！
別のCSSチュートリアルの準備はできましたか？ これらをチェックしてください！
- FlexboxグリッドとCSSグリッドを組み合わせて効率的なレイアウトを実現する方法
- CSSブレークポイントを使用してレスポンシブデザインを作成する方法
- CSSを使用してSVGアニメーションを作成する方法