CSSグリッドレイアウト:乗算と征服-またはグリッドを使用して実際に設計する方法。

Twitterで私をフォローして、チュートリアルやJavaScriptのヒントなどを入手できます。

このチュートリアルでは、CSSグリッドを使用してレスポンシブレイアウトを設計します。そして、プロセスから何を期待するかの鳥瞰図です:

flexの仕組みを理解するには、このページのflex layout editorを試してください。

エンチラーダ全体。時間のスクロールを節約するために、鳥瞰図の画像コンテンツを前もって投稿するのが好きです。

解像度に依存しないハンドヘルドデバイスでは、事態は複雑になりました。これにより、従来のレスポンシブデザインルールでさえも変更されます、IM。

そこで、IQテストなどのすべてのCSSグリッドの可能性を駆使して、レスポンシブデザインを標準化するための探求に着手しました。

私が発見したことは次のとおりです。

列分割の背後にある基本的なアイデア

各列の分割から実際に得られるものを把握しようとしました。

1列のデザインは、すべてのコンテンツを長い縦型リストに入れるのに役立ちます。

2列のデザインは、ミニ(タブレット?)の画像ギャラリー/ポートフォリオには適しています。

ツリーコラムデザインは、ボーダー(マージン)を提供する最初のデザインです。

4列のデザインは、フルスクリーンの画像ギャラリーとして機能します。

ボーダーベースのレイアウトで奇数列レイアウト(≥1)が機能することに気付きました。

うーん。 5カラムデザインはどうですか?ボーダーの作成には奇数列がよく使用されることを覚えておいてください。彼らは常に2つの余分な側面になってしまうので。

5列のデザインは、かなりまともな@Mediumのような記事形式を作成できます。

そして、このチュートリアルの残りの部分では、1つを作成する方法を探ります!

fr単位を使用して、マージンのように拡張します。通常の要素では自動です。プライマリコンテンツがピクセルまたはラージ(r)fr値(10fr、20frなど)を使用して指定されている限り、境界線が1frか2frかn-frかは関係ありません。

ここでの唯一の違いは、Mediumがワイドコンテンツに1000pxを使用し、メイン記事列に700pxを使用することです。しかし、考え方は同じです。

レスポンシブグリッド+モバイル化

これまでのところ、主要な足場を作成しました。しかし、レスポンシブデザインはどうでしょうか。

CSSグリッドを使用すると、思ったより簡単になります。

覚えておいてください:

レスポンシブコンテンツ!=レスポンシブ境界線。

2つの手法は別々に扱う必要があります。しかし…

多くの場合、この場合のように、レスポンシブ境界の問題を解決することでレスポンシブコンテンツの問題を解決できます。

あなたの創造性を使って、1つのテクニックを使用することで複数の問題を解決できるなら…さらに良い。

この場合、テンプレートの外側のレーンを0.5fr(紫と青のレーン)に切り替えるだけで解決できます。また、スパンまたはテンプレート領域のいずれかを切り替えて、複数の列に展開し、広いコンテンツスペースを作成します。 。 (上のピンク色の領域。)

これは、メディアクエリまたはJavaScriptを使用して実行できます。

最後に…メインレーン(緑)を10frに変更します。 (同様の値を使用できますが、通常10以上で問題ありません。)これにより、メイン(緑)レーンが現在の画面解像度に自動的にスケーリングされます。両方の境界線が0.5frになったため、境界線とコンテンツを含むすべてが適切にスケーリングされます。

0.5frの境界線を完全に削除する必要がある場合は、0frに設定できます。しかし、個人的には、モバイルビューに小さな境界線が必要です。私の意見では、コンテンツレーンの見栄えが良くなるだけです。

モバイル化

上記の手順をすべて実行したら...小さいスペースに絞ると、このようなもの(上記)に到達するはずです。

ここで学んだ教訓?

常に最も優雅な解決策を見つけるようにしてください。つまり、クリーンで複雑ではなく、可能であれば、1つ(または2つ)の変更を適用することで複数の問題を解決します。これは、聞こえるほど難しくはありません。

  • これが唯一の解決策ですか?番号。
  • これは完璧な解決策ですか?番号。
  • しかし、問題を解決し、十分に機能します。

そして、それは目指すべき良いことです。このチュートリアルで示されるアプローチは次のとおりです。

1.よりやりがいのある楽しい
 2.立派です。
 3.何かが機能する方法と理由を実際に理解するように促します。
 4.簡単です。したがって、保守しやすいコードを作成します。
 5.きれいなコードを生成します。
 6.良心を清潔に保ちます。

そういえば…そうでなければ…コードを「ハッキング」し始めるかもしれません。 (試行錯誤によって問題を解決しようと試みますが、多くの場合、実際にどのように機能するかを理解することはありません)そして、おそらくある種の達成さえ感じます。でも…面白くありません

動的な記事エディターは媒体が好きですか?

もちろん、動的に生成されるアーティクルエディターでは、アルゴリズムで機能するようにワイドコンテンツ列をコーディングする必要があります。作成者が使用するテキストとワイドコンテンツの組み合わせを知ることはできません。

それらは任意の方法で配置できます。ただし、JavaScriptと数時間を使用すると、上記のようにグリッドテンプレート領域を交換することで、動的に生成される記事エディター(Mediumのように)を作成できると思います。

自分で手作業でデザインし、どのタイプのコンテンツが後に続くかを事前に把握している場合は、単純な静的記事にこのレイアウトを使用できます(もちろん)。

Mediumのような記事をデザインするための非CSSグリッド代替物?

CSSグリッドなしの代替手段?まあ…あまり違いはありません。より複雑かもしれません。まだアルゴリズムですが、通常のDIV要素を使用することになります。

頑張ってね。

CSSグリッドは、クリーンなコードを犠牲にすることなくプロセスを簡素化すると思います。

Mediumチュートリアルページの<ソースコード>を確認しました。混乱です。

最後の言葉

主にJavaScriptプログラマとして、ウェブサイトやアプリケーションのレイアウトが得意ではありませんでした。特にレスポンシブ時代が来た後。しかし、CSSグリッドは、このとらえどころのないタスクを再考するように私を奮い立たせました。

CSSグリッドを使用して作成された実際のレイアウトの手順と例を段階的に表示する必要があったため、独自の作成を開始できました。

しかし…それを実証するオンラインチュートリアルを見つけることができませんでした。そこで、私は自分で書いてあなたと共有することにしました!

目的に基づいて物事を理解しようとすることがすべてです。

CSSグリッドをよく理解するために時間を費やすなら、それはごまかしのようなものです。

レイアウト設計のほうが実際よりも優れているように感じます。

私はこの時点でCSSグリッドにはまっていると言わざるを得ず、今後のレイアウトをすべて作成するためにそれを使用します。

これらのシンプルなアイデアが、CSSグリッドに慣れるのに役立つことを願っています。

毎週フリーミアムをもっと…

週末のPDFプレゼントとしてTwitterでフォローしてください。

JavaScriptのクイックヒットについては、Instagramでフォローしてください。

Facebookで無料のコーディングをフォローしてください。

期間限定

このチュートリアルの図は、原稿から直接影響を受けました!

CSSビジュアルディクショナリは、中規模読者向けに28%オフです。

28%オフ

中読者のみ:

CSS Visual Dictionary

== 1コピーをつかむ==

すべてのCSSプロパティが含まれます。