わずか20行のCSSでのレスポンシブグリッドマガジンレイアウト

最近、ブログリストを再設計しようとしています。アイデアは、サイドバーでお気に入りのブログをリストするだけでなく、雑誌スタイルのレイアウトを使用して、これらのブログからの最新の投稿を読者に提供することです。

簡単な部分は、お気に入りのRSSフィードから要約の記事のリストを取得することです。これを行うために、WordPressプラグインFeedzy Liteを使用しました。これは、複数のフィードを時間単位でソートしたリストに集約します。最新のコンテンツを提示するのに最適です。難しいのは、見栄えを良くすることです。

このプラグインのデフォルトのリストUIはかなり当たり障りのないので、新聞や雑誌のウェブサイトに似ているようにスタイルを整えたかったので、小さくて大規模な「注目のコンテンツ」パネルを混ぜました。

これは、CSSグリッドにとって理想的なユースケースのようです！たとえば、5列のレイアウトと3列のレイアウトなど、さまざまなレイアウト用のグリッドレイアウトを作成し、メディアクエリを使用して異なるブレークポイントを切り替えます。右？しかし、グリッドの自動適応オプションを使用して自動的にスムーズなレスポンシブグリッドを作成できる場合、これらのメディアクエリとブレークポイントを識別するすべての手間が必要ですか？

このアプローチは魅力的に聞こえますが、クロスカラム要素の導入を開始したとき、狭い画面でグリッドがあふれていることに問題がありました。メディアクエリが唯一の解決策のようです。つまり、解決策が見つかるまでです！

CSSグリッドに関するいくつかのチュートリアルを見た後、それらは主に2つのカテゴリに分かれていることがわかりました。

1. スパン要素を使用して興味深いレイアウトを作成する方法を示すチュートリアルですが、列の数は修正されます。
2. 自動的にサイズ変更されたレスポンシブグリッドを作成する方法を説明するチュートリアルですが、すべてのグリッドアイテムには同じ幅（つまり、スパン列なし）があります。

グリッドに同時に両方を実行したい：応答性のある複数の列要素も含む完全な応答性のある流体レイアウトを作成します。

美しさは、レスポンシブグリッドの限界と、列のスパンがグリッドの応答性を破壊する理由とその時に、レスポンシブマガジン/ニューススタイルのレイアウトを1ダースのコードラインとシンプルなメディアクエリで定義できることです。

これは、すぐに使用できるRSSプラグインと、スタイルを整える方法を示すビジュアルです。

このマガジンスタイルのグリッドレイアウトは完全に応答性が高く、カラー機能パネルは、列の数が変化すると動的に調整されます。ページには約50の記事が表示されますが、レイアウトコードは表示されるアイテムの数とは関係ありません。プラグインをアップグレードして100のプロジェクトを表示すると、レイアウトは常に興味深いままです。

これはすべてCSSのみを使用して実装されており、最も狭い画面（つまり、460ピクセル未満）で単一の列ディスプレイを処理するメディアクエリは1つだけです。

信じられないほど、このレイアウトは21行のCSSコードのみを使用します（グローバルコンテンツスタイルを除く）。しかし、この柔軟性を非常に少ないコードで実現するために、CSSグリッドのより曖昧な部分のいくつかを深く掘り下げ、その固有の制限のいくつかを解決する方法を学ぶ必要がありました。

このレイアウトを生成するコードの基本要素は非常に短く、CSSグリッドの力を示しています。

 <code>.archive { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-gap: 32px; grid-auto-flow: dense; } /* 特宽网格文章*/ .article:nth-child(31n 1) { grid-column: 1 / -1; } .article:nth-child(16n 2) { grid-column: -3 / -1; } .article:nth-child(16n 10) { grid-column: 1 / -2; } /* 手机单列显示*/ @media (max-width: 459px) { .archive { display: flex; flex-direction: column; } }</code>

この記事の手法は、最新の記事ウィジェット、アーカイブページ、検索結果の出力など、動的に生成されたコンテンツをセットアップするためにもよく使用できます。

レスポンシブメッシュを作成します

ラッパーに含まれるすべての模擬モックコンテンツ（チット、画像、抜粋）を表示するために17のプロジェクトを設定しました

<code><div>
  </div></code>

これらのアイテムをレスポンシブグリッドに変換するコードは非常にコンパクトです。

 <code>.archive { /* 将元素定义为网格容器*/ display: grid; /* 自动适应尽可能多的项目在一行上，而不会低于180像素*/ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 文章之间的一点间距*/ grid-gap: 1em; }</code>

行の高さは、行の最高のコンテンツに合わせて自動的に調整されることに注意してください。ペンの幅を変更すると、アイテムが成長し、スムーズに縮小し、列の数がそれぞれ1つの列から5つの列に変化します。

ここで使用されるCSSグリッドマジックは、 grid-template-columnsに適用されるminmax()関数と組み合わせて使用​​されるauto-fitキーワードです。

それがどのように機能するか

次の方法のみを使用して、5列のレイアウトを実装できます。

 <code>.archive { display: grid; grid-template-columns: repeat(5, 1fr); }</code>

ただし、これにより、画面幅が異なると成長および縮小する5つの列が作成されますが、常に5つの列を保持し、小さな画面で非常に狭くなります。最初のアイデアは、多数のメディアクエリを作成し、異なる数の列でグリッドを再定義することです。これは正常に機能しますが、 auto-fitキーワードを使用すると、これらはすべて自動的に行われます。

auto-fit私たちが望む方法で動作するためには、 minmax()関数を使用する必要があります。これにより、列をどの程度小さく圧縮できるか、そして拡張できる最大幅をブラウザに伝えます。小さいため、列の数が自動的に減少します。大きく、列の数が増加します。

 <code>.archive { grid-template-columns: repeat (auto-fit, minmax(180px, 1fr)); }</code>

この例では、ブラウザはできるだけ多くの列を幅180ピクセルに収容します。スペースが残っている場合、列はそれらの間に残りのスペースを共有することで平均的に成長します。これは、 1fr値が書いていることです。列を使用可能な幅の等しい割合にします。

ウィンドウをドラッグし、利用可能なスペースが増加すると、すべての列が均等に成長して余分なスペースを使用します。利用可能なスペースが180ピクセルの追加の列を許可し、列全体が表示されるまで、列は成長し続けます。画面幅を減らすと、プロセスが逆になり、グリッドを1つの列レイアウトに完全に調整します。魔法！

また、1つのコードでこのすべての応答性を取得できます。これはどれほどクールですか？

「オートフラウ：密度」でスパンを作成する

これまでのところ、応答性の高いグリッドがありますが、すべてのアイテムには同じ幅があります。ニュースまたは雑誌のレイアウトの場合、2つ以上の列または場合によってはすべての列に及ぶことで強調表示されるコンテンツが必要です。

マルチコラムスパンを作成するために、より多くのスペースを取り上げたいグリッドプロジェクトにcolumn-span関数を追加できます。たとえば、リスト内の3番目のアイテムを幅2列にする必要がある場合は、次のことを追加できます。

 <code>.article:nth-child(3) { grid-column: span 2; }</code>

ただし、スパンの追加を開始すると、多くの問題が発生します。まず、グリッドにギャップが表示される可能性があります。これは、広いアイテムが行に適合しない可能性があるため、グリッドは自動的に適応して次の行にプッシュし、次のことになっているギャップを残します。

単純な回避策はgrid-auto-flow: denseを追加することです。これにより、ブラウザに他のアイテムでギャップを入力するように指示し、以下に示すように、より幅の広いアイテムの周りに狭いコンテンツフローを効果的に行います。

このプロジェクトは現在順調であり、4番目のプロジェクトは3番目のプロジェクトの前に2倍の幅で登場していることに注意してください。私の知る限り、これは避けることはできません。これは、受け入れなければならないCSSグリッドの制限の1つです。

Geoff Grahamの「グリッド集約型キーワードの自動フロー機能」をご覧くださいgrid-auto-flow: denseとその仕組みの例をご覧ください。

スパンを指定するいくつかの方法

アイテムに及ぶ列の数を示す方法はいくつかあります。最も簡単な方法は、 grid-columns: span [n]アイテムの1つに適用することです。ここで、nは要素がスパンする列の数です。レイアウトの3番目の項目にはgrid-column: span 2があります。これには、1つの列のみに及ぶ他のアイテムの2倍の幅である理由が説明されています。

他の方法では、グリッドラインを明示的に定義する必要があります。グリッドラインの番号付けシステムは次のとおりです。

正の値（1、2、3など）または負の値（-1、-2、-3など）を使用して左から右へのグリッドラインを指定して、右から左に実行できます。これらは、以下に示すように、 grid-columnプロパティを使用してグリッドにアイテムを配置するために使用できます。

 <code>.grid-item { grid-column: (起始轨道) / (结束轨道); }</code>

したがって、これにより、プロジェクトの範囲を指定する他の方法が与えられます。開始値または最終値の両方をspanキーワードに置き換えることができるため、これは特に柔軟です。たとえば、上記の例の3列の青いボックスは、次のいずれかを8番目のグリッド項目に追加することで作成できます。

• grid-column: 3 / 6
• grid-column: -4 / -1
• grid-column: 3 / span 3
• grid-column: -4 / span 3
• grid-column: span 3 / -1
• 等

非応答性（つまり、固定列）グリッドでは、これらはすべて同じ効果を生成します（上の写真の青いボックスのように）が、グリッドが応答し、列の数が変化すると、その違いが現れ始めます。一部の列スパンは、自動フローグリッドでレイアウトを破壊する可能性があり、2つのテクノロジーが互換性がないように見えます。幸いなことに、この2つを正常に組み合わせることができるソリューションがいくつかあります。

しかし、最初に、問題を理解する必要があります。

オーバーフローサイドスクロールの問題

上記のシンボルを使用して作成されたいくつかの注目の領域を次に示します。

すべてが全幅（5列）で良く見えますが、2つの列になるはずの点にサイズを変更すると、レイアウトは次のように休憩します。

ご覧のとおり、グリッドは応答性がなく、容器は縮小されていますが、グリッドは5つの列すべてを維持しようとします。これを行うために、同じ幅の列を維持しようとし、容器の右側からグリッドがオーバーフローし、水平スクロールを引き起こします。

何故ですか？問題は、ブラウザが名前が付けられた明示的なグリッドラインに従おうとすることです。この幅では、自動適応グリッドには2つの列を暗黙的に表示する必要がありますが、グリッドライン番号システムは、5番目のグリッドラインを明示的に参照することにより矛盾しています。この矛盾はカオスにつながります。暗黙の2列グリッドを正しく表示するために、許可されている唯一の行番号は、以下に示すように1、2、3、-3、-2、-1です。

ただし、グリッドアイテムには、グリッドライン番号4、5、または6（OR -4、-5、または-6）などのこの範囲外にあるgrid-column参照が含まれている場合、ブラウザは混合メッセージを受信します。一方では、柔軟な列を自動的に作成する必要があります（この画面幅の下で2つの列を暗黙的に与える必要があります）が、2列グリッドには存在しないグリッドラインを明示的に参照します。暗黙の（自動）列と明示的な列の数との間に競合がある場合、グリッドは常に明示的なグリッドに向かう傾向があります。したがって、不要な柱と水平オーバーフローが発生します（これはCSSデータ損失とも適切に呼ばれます）。グリッドライン番号を使用するのと同じように、スパンは明示的な列を作成することもできます。したがって、 grid-column: span 3 （デモの8番目のグリッドアイテム）は、グリッドに少なくとも3つの列を明示的に採用するように強制しますが、2つの列を暗黙的に表示する必要があります。

この時点で、今後の唯一の方法は、メディアクエリを使用して、レイアウトブレークの幅でgrid-column値を変更することですが、速すぎません。これはまさに私が最初に想定したものです。ただし、より慎重に考え、さまざまなオプションを試した後、2つの列までずっと動作する限られた回避策があることがわかりました。1つのメディアクエリのみが、最も狭い画面で単一の列レイアウトを処理するために1つのメディアクエリのみを残します。

解決

トリックは、表示しようとする最も狭いグリッドに表示されるグリッドラインのみを使用してスパンを指定することであることに気付きました。この場合、2列のグリッドです。 （メディアクエリを使用して、最も狭い画面で単一列シーンを処理します。）これは、グリッドを壊さずにグリッドライン1、2、および3（または-3、-2、および-1）を安全に使用できることを意味します。

当初、これは次の組み合わせを使用して、最大2つの列のスパンに制限することを意味すると考えていました。

• grid column: span 2
• grid-column: 1 /3
• grid-column: -3 / -1

これは、両方の列までの範囲全体で完全に反応し続けます。

これは機能しますが、デザインの観点からはむしろ制限されており、特にエキサイティングではありません。大画面で3、4、または5列の幅のスパンを作成できるようにしたいと思っています。しかし、何？私の最初の考えは、メディアクエリに目を向けなければならなかったということでした（良い、古い習慣は変えるのが難しいです！）が、私はこのアプローチを取り除き、レスポンシブデザインについて別の方法で考えようとしていました。

1対3と-3から-1でできることをもう一度見ると、1/-3や2/-2などのグリッド列の開始値と末端値の正と負の数を混合できることに徐々に気付きました。一見、これはあまり面白くないようです。グリッドのサイズを変更するときに、これらのラインの位置を実現すると事態が変化します。これらのスパニング要素は、画面サイズが変化するにつれて幅を変更します。これにより、レスポンシブ列のスパンの新しい可能性のセットが開きます。画面が広がるにつれて、メディアクエリなしで異なる列のアイテムが広がります。

私が見つけた最初の例はgrid-column: 1/-1です。これにより、アイテムは最初の列からすべての列の下の最後の列まで、全幅のバナーのようにスパンします。列の幅でも機能します！

grid-column: 1/-2を使用することにより、左アライメントのほぼ幅のスパンを作成できます。これは、常にアイテムの列を右に残します。 2つの列に絞り込むと、1つの列に敏感に縮小します。驚くべきことに、単一の列レイアウトに絞り込んだときに機能します。 （その理由は、グリッドがアイテムを幅にゼロに圧縮しないため、 grid-column: 1/1 。） grid-column: 2/-1同様に機能すると仮定しますが、ほとんどの場合、1つの列に表示されたときにオーバーフローを引き起こすことを除きます。

次に、 1/-3試しましたが、より広い画面で正常に動作し、少なくとも3つの列と1つの列が小さな画面に表示されます。最初のグリッドラインは-3のグリッドラインと同じであるため、2つの列グリッドで奇妙なことをすると思います。驚いたことに、それはまだ単一の列アイテムとして通常表示されます。

多くの試みの後、2つのグリッドのグリッドライン番号を使用して、11の可能なグリッド列値を見つけました。驚くべきことに、そのうち3つは単一の列レイアウトまで適切に機能します。他の7つは2つの列までずっと動作できます。単一の列ディスプレイを処理するために必要なメディアクエリは1つだけです。

これが完全なリストです：

ご覧のとおり、これはすべての可能な応答性のあるスパンの有限サブセットですが、実際には多くの可能性があります。

• 2/-2列まで正常に機能する中心的なスパンを作成するため、楽しいです！
• 3/-1 、2つの列でもオーバーフローを引き起こす可能性があるため、最も役に立ちません。
• 3/-3は驚きです。

このリストでさまざまなgrid-column値を使用することにより、興味深い完全なレスポンシブレイアウトを作成できます。単一のメディアクエリを使用して、最も狭い単一の列ディスプレイの場合、10の異なるグリッド列スパンパターンを使用できます。

シングルカラムメディアクエリも通常簡単です。この最後のデモの1つは、小さな画面にFlexBoxを復元します。

 <code>@media (max-width: 680px) { .archive { display: flex; flex-direction: column; } .article { margin-bottom: 2em; } }</code>

これは最終的なグリッドであり、ご覧のとおり、1つの列から5つの列まで完全に応答します。

nth-child（）を使用して可変長ディスプレイを繰り返します

コードを20行以上に削減するために使用した最後のトリックは次のとおりです:nth-child(n)セレクターは、グリッド内の複数のアイテムのスタイルに使用します。フィード内の複数のアイテムにスパンスタイルを適用して、注目のポストボックスがページに定期的に表示されるようにしたいと思います。最初に、次のように、セレクターのコンマ分離リストを使用しました。

 <code>.article:nth-child(2), .article:nth-child(18), .article:nth-child(34), .article:nth-child(50) { background-color: rgba(128,0,64,0.8); grid-column: -3 / -1; }</code>

しかし、私はこれをすぐに手間がかかることがわかりました。特に、各投稿でスタイルを整えたいすべての子供要素についてこのリストを繰り返さなければならなかった場合は、タイトル、リンクなど、スパンニング要素の位置で再生したい場合は、これらのリストの数字を手動で変更する必要があります。

当時、私は:nth-child上記のリストで使用したような単純な整数の代わりに、強力な機能を使用できることに気付きました。 :nth-child(n) 、次の方程式を取ることもできます:nth-child(2n 2)は、各2番目の子要素を見つけます。

グリッドで青色のフルワイトパネルを作成する方法は次のとおりです。ページの上部に表示され、ページの下に繰り返される:nth-child([公式])を使用してください。

 <code>.article:nth-child(31n 1) { grid-column: 1 / -1; background: rgba(11, 111, 222, 0.5); }</code>

括弧内のビット（31n 1）は、最初、32番目、63番目、およびその他のサブ項目が選択されるようにします。ブラウザは、n = 0（この場合は31 0 1 = 1）で始まり、n = 1（31 1 1 = 32）から始まり、n = 2（31 * 2 1 = 63）でループを実行します。最後のケースでは、ブラウザは63番目の子供がいないことを認識しているため、それを無視し、ループを停止し、CSSを1番目と32番目の子供に適用します。

右から左に交互に表示される紫色の箱に似たことをしました。

 <code>.article:nth-child(16n 2) { grid-column: -3 / -1; background: rgba(128, 0, 64, 0.8); } .article:nth-child(16n 10) { grid-column: 1 / -2; background: rgba(128, 0, 64, 0.8); }</code>

最初のセレクターは、右側の紫色のボックスに使用されます。 16n 2 2番目のプロジェクトから始まる16番目のグリッドプロジェクトごとにスタイルが適用されていることを確認してください。

2番目のセレクターは、右側のボックスを見つけます。同じ間隔（16n）を使用しますが、オフセットは異なります（10）。その結果、これらのボックスは、10、26、42などのグリッドアイテムの右側に定期的に表示されます。

これらのメッシュアイテムとそのコンテンツの視覚的なスタイルに関しては、別のトリックを使用して重複を減らします。両方のボックス（例えば、 background-color ）で共有されるスタイルの場合、単一のセレクターを使用して両方を見つけることができます。

 <code>.article:nth-child(8n 2) { background: rgba(128, 0, 64, 0.8); /* 其他共享样式*/ }</code>

これにより、項目2、10、18、26、34、42、50などが見つかります。つまり、左右に2つの機能ボックスを選択します。

8nが正確に16nの半分であり、2つの別々のセレクターで使用されるオフセットが8で異なるためです（つまり、10と2の差は8です）

最後の考え

現在、CSSグリッドを使用して、最小限のコードで柔軟なレスポンシブグリッドを作成できますが、これにはメディアクエリの後方ステップを使用せずに要素を見つけることにいくつかの重要な制限があります。

小さな画面でオーバーフローを強制しないスパンを指定できるのは素晴らしいことです。現在、私たちは実際にブラウザに「レスポンシブグリッドを作成してください」というブラウザに伝えています。これは非常に美しく行われています。しかし、「ああ、このグリッドアイテムを4つの列にスパンする」ことを続けると、狭い画面にかんしゃくを取得し、レスポンシブグリッドよりも4つの列スパンリクエストを優先します。グリッドに、スパンリクエストよりも応答性を優先するように指示できるのは素晴らしいことです。これに似ています：

 <code>.article { grid-column: span 3, autofit; }</code>

応答性のあるグリッドのもう1つの問題は、最後の行です。画面幅が変化すると、最後の行が満たされていないことがよくあります。私は長い間、最後のグリッドアイテムを残りの列をスパンする（そして埋める）方法を探していましたが、現時点ではグリッドではできないようです。 autoなどのキーワードを使用してプロジェクトの開始位置を指定できれば素晴らしいことです。つまり、「左端をどこにでも置いてください」を意味します。これに似ています：

 <code>.article { grid-column: auto, -1; }</code>

...これにより、左端がラインの端まで及びます。

以上がわずか20行のCSSでのレスポンシブグリッドマガジンレイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。