css - column-count では、解像度が小さい場合、3 列から 2 列に動的に変更できますか?

Question

このプロパティを使用して、column-count3 つの列に複数の div があるページを設定しています。これは、大きな画面で見栄えがします。各 div の幅は、たとえば 500px (含まれる画像) に固定されています。

ただし、小さい画面で作業している場合、ブラウザーはコンテンツを元の \3 列内に強制しようとしますが、2 列に移動する必要があります。コンテンツがオーバーラップし始めたときに、コンテンツを 2 列に移動する最適な方法はありますか?

Answer 1

column-widthではなくプロパティを使用するcolumn-countと、ブラウザーは必要に応じて列の数を自動的に調整して、使用可能なスペースを埋めます。

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 500px; // shorthand, prefixes may be necessary
}

Answer 2

@media (max-width: 500px) {
  .your element selector here {
 -webkit-column-count: 2;
  -moz-column-count:    2;
  column-count:         2;

  }
}