グリッドの密集したキーワードの自動流出能力

ニュースWebサイトのホームページに取り組んでいるとしましょう。おそらく、グリッドレイアウトでいくつかのカードベースのコンテンツを見るのに慣れていますよね？これが古典的な例です。ニューヨークタイムズ：

ええ、そのようなもの。

いくつかのカード/要素/ボックス/他のスペースよりも多くのスペースを占有する必要があるものがあります。特集の記事が思い浮かびます。

CSSグリッドは、行と列の2つの方向で作業しているため、ここで理想的です。さらに、利用可能なスペースに基づいてグリッドにアイテムを自動的に配置するこのベイクドイン機能があります。親要素でグリッドを単に定義する場合、他には何もない場合、各子供は、列と行の両方で利用可能なスペースがどれだけ利用できるかに応じて等しいスペースを割り当てられます。

言い換えれば、アイテムを配置するようにグリッドに伝える場所に厳格または明示的である必要はありません。

新聞サイトは本当にこれから利益を得ることができます。たぶん、ページ上の記事の数は異なります。たぶん、いくつかの状況では広告が表示されますが、他の状況では表示されません。コンテンツが予測不可能であっても、CSSグリッドは、自動的にアイテムを所定の位置に流すことでレイアウトを予測可能にすることができます。

完璧にフィットする9つのストーリーを持つことは素晴らしいことですが、おそらく1日は8つしかありません。まあ、CSSグリッドでは、アイテムがセルに均等に流れるようにカバーしています。

物事が少し粘着性になるかもしれない場所は、複数の行または列にまたがるアイテムがあるときです。その特徴の記事のアイデアに戻り、最後の2つの列に及ぶべきだと規定しましょう。

 .Article  - フィーチュアリング{
  グリッドコラム：2 /スパン2;
}

繰り返しますが、私たちのコンテンツは少し予測不可能であるため、いつか6つの記事があるかもしれません。

 <div>
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

心配ない！ Gridの自動配置機能は、その特徴の記事を回避することを期待しています。しかし、そこに注目の記事を落とすとき、ここに私たちが得るものがあります：

うーん、それは私たちが念頭に置いていたものではありません。 5つの記事が注目の記事の周りに流れた場合、それは非常に良くなるでしょう。

実際に起こっているのは、グリッドが特集記事の明示的な配置を取り、それを配置して、ソースの前の記事の後に2番目と3番目の列を占有するのに十分な利用可能なスペースがあることです。それはたまたま2列目であり、HTMLには他の記事が他の記事がないため、その前に空のスペースがあります。 Gridは、注目の記事をそのように配置し、それに応じて残りのアイテムを流します。

Gridにソースの順序を無視するように強制し、HTMLの注目の記事の後であっても、その周りの次に利用可能なアイテムを流すことができます。

そのような力を持つ魔法のナゲットは何ですか？オートフロー：濃い！

 .articles {
  ディスプレイ：グリッド;
  Grid-auto-flow：濃い​​;
  グリッドギャップ：1EM;
  Grid-Template-Columns：繰り返し（3、100px）;
  グリッドテンプレート列：繰り返し（3、1Fr）;
}

そこに行きます！グリッドでどのくらいのコンテンツがスローされているかに関係なく、レイアウトがひどく維持されることを保証できます。

以上がグリッドの密集したキーワードの自動流出能力の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。