10の便利なCSSグリッドコードスニペット

CSSグリッド仕様は正確に「新しい」わけではありませんが、主流の開発者の世界では間違いなく新しいものです。 多くのフロントエンドコーダーは、CSSグリッドのプロパティについてもまだ知りません。ましてや、それらがインターフェイスにどのように適用されるかについても知りません。

検索するとたくさんのチュートリアルが見つかりますが、コードスニペットを調べることもお勧めします。 このようにして、実際のプロジェクトに飛び込み、ライブWebページでCSSグリッドがどのように機能するかを確認できます。

このコレクションは、Webで何をしていても、CSSグリッドを学習、カスタマイズ、およびスタイル変更するのに役立つ多くのリソースを提供する必要があります。

1.マルチイメージヒーローブロック

グリッドプロパティで設計されたこの本当にクールなヒーローブロックで物事を始めましょう。 このデザインは、多くの雑誌スタイルのWebサイトにあるホームページのヒーロー画像セクションを模倣しています。

開発者のレイチェル・アンドリューは、自分のプロジェクトのカスタムCSSを少し使用してこれを作成しました。 それは信じられないほどうまく機能し、デザインは起動に完全に反応します。

言うまでもなく、モバイル画面では見栄えがします。 大きな画像ブロックでいつも見かけるものではありません。

これは、CSSグリッドを研究するための優れたリソースであり、雑誌スタイルのブログテーマをコーディングする人にとっては便利なスニペットです。

2.CSSグリッドレイアウト

grid-auto-flowプロパティは、「dense」設定を使用したこのデモで完全に表示されます。 これにより、グリッドのサイズが変更されると、アイテムがページのさらに下に押し込まれます。

この設定を使用すると、どのページ要素が位置を変更するか、それらの変更が発生する場所、およびグリッドがどのように応答するかを細かく制御できます。 これは、主にレスポンシブデザインで使用されるメディアクエリの最前線に立っています。

このコードが何をするのかわからない場合は、覚えておいてください。Googleはあなたの友達です。 このセットアップ全体をカバーするたくさんの素晴らしい投稿とStackOverflowスレッド。

3.それほど不気味なカボチャの事実

これは、いくつかの基本的なカボチャの事実で作成されたかなりクールなスニペットです。 さて、CSSグリッドレイアウトによって整理されたカボチャの事実。

コードは実際にはSCSS / Sassで実行されます。つまり、掘り下げるには言語にある程度精通している必要があります。ただし、基本的なプロパティを確認したい場合は、CodePen内でSassコードを生のCSSにコンパイルすることもできます。

このデザインで私のお気に入りの1つは、色とタイポグラフィです。 それは本当にカボチャのアイコンと黄色/オレンジのすべてのそれらの色合いでハロウィーンを叫びます。

4.自動六角形レイアウト

これはおそらく、このギャラリーで見つけた最も実用的なプロジェクトの1つです。 このグリッドスタイルを見て、ブラウザのサイズを変更してみてください。

六角形のアイテムは、それに応じてページに収まるように再フォーマットされます。 これは、写真がたくさんある複雑なページを処理するためのおそらく最良の方法です。 この種のレイアウトは、会議のWebサイトや、従業員が多い企業の「会社概要」ページでよく見られます。

これで、CSSグリッド構造を使用して、手動のレスポンシブスタイルについて心配する必要がなくなりました。 そして、このコードスニペットは、同様のレイアウトを計画するための開始点として最適です。

5.CSSグリッドのポケモン図鑑

CSSグリッドでこのポケモン図鑑ほどクリエイティブなものはまだ見たことがありません。 セルサイズを自動入力するために、JavaScriptを少し使用したHTMLとCSSに依存しています。

ページのサイズを変更すると、グラフィック自体のサイズも大きくなります。 これはCSSで非常に扱いやすく、グリッドのプロパティのいくつかを習得すればさらに簡単になります。

これはインタラクティブではないため、何もクリックしたり、新しいページを開いたりすることはできません。 しかし、レイアウトの基礎が固まっているので、これらの機能を追加するのは非常に簡単です。

6.シンプルグリッド

これは、印刷デザインスタイルをWebにもたらす非常に興味深いアイデアです。 ヘッダーと特大のタイポグラフィを備えた多くの列を特徴とするCodePenのこの例をご覧ください。

グリッドレイアウト自体は、事前定義されたギャップを持つ設定された列に依存しています。 これは、ブラウザのサイズを変更すると、特定の列がこれらのルールに従って分割されることを意味します。

これは、特定の列が常に隣り合って表示されるようにする、または少なくとも表示されるようにするための優れた方法であるため、読みやすくなっています。

7.Flexboxフォールバックを備えたCSSグリッド

すべてのブラウザがCSSグリッド構造に追いついているわけではありません。 そのため、このスニペットでは、フォールバックとしてフレックスボックス（およびフロート）を使用してカスタムCSSグリッドを設計する方法を説明しています。

グリッドプロパティがサポートされている場合はそれを使用したいが、サポートされていない場合はブラウザに無視させたいので、これは実際には注意が必要です。 ありがたいことに、コードには十分なコメントが付けられているので、掘り下げて、いくつかの機能を自分で調整してみることができます。

これを完璧なフォールバックソリューションとは言いませんが、何もないよりは間違いなく優れています。

8.グリッド用語のデモ

この紛らわしいCSSグリッド用語のすべてについてよくわかりませんか？ 次に、このスニペットは問題を解決するのに役立つ場合があります。

この例を掘り下げると、途中のグリッドを説明する記事が付いた、いくつかの強調表示された機能が見つかります。 また、グリッド線を正しく表示する方法と、ページ上でCSSグリッドを正確に表示する方法についても学習します。

すべてを網羅しているわけではないため、このデモからすべてを収集するわけではないことに注意してください。 これは、視覚的な補助機能を備えた最も簡単なプロパティの簡単な紹介です。

9. grid-template-columnsの使用：repeat（）

grid-template-columnsプロパティの非常に具体的な例については、このライブデモをご覧ください。 CSSで同じ列の値を複数回宣言する代わりに、繰り返し機能を使用する方法を示します。

繰り返しになりますが、ブラウザのサポートはまだこれに追いついていますが、ほとんどの最新のWebブラウザはこの手法で動作します。

言うまでもなく、CSS内には、これが何をするのかを理解するのに役立つコメントがたくさんあります。

10.純粋なCSSグリッドクロスワード

楽しいメモで終わるために、エイドリアン・ローワースの純粋なCSSクロスワードパズルを見てください。 このレイアウト全体は、HTMLとCSSコード、特にレイアウト構造のCSSグリッドプロパティのみに基づいて構築されています。

さらにクレイジーなのは、クロスワードボックスにコンテンツを入力して、実際にパズルを解くことができることです。 なんてクールなんだ！

これはかなり複雑であり、ここにリストされている数少ないプロジェクトの1つであり、モバイルフレンドリーではないことに注意してください。 しかし、これはWeb上でグリッドレイアウトがどれだけ進んだかを証明しているので、近い将来、この種のものがもっとたくさん見られることを期待しています。