「CSS」カラム幅を指定する「column-width」

「column-count」プロパティの代わりにカラム調整に有効なです。指定された全体の幅に対しカラム幅の指定にあわせてカラム数が調整されます。

column-width：値；
auto	初期値。
長さ(pixel)	査定された長さで最適なカラム幅が決まります。

column-width: 200px;

<html>
<style type="test/css">
.news {
  width: 510px;
  margin-left:10px;
  margin-bottom:30px;
  padding:10px;
  column-gap: 0;
  column-rule: none;
  -webkit-column-width: 200px; /* Chrome, Safari, Opera */
  -moz-column-width: 200px; /* Firefox */
  column-width: 200px;
}
</style>

■ column-width: 200px;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

An Uber spokeswoman said New Year's Eve 2014 was one of its busiest days. And the company has quadrupled its presence in the last year. It's now operating in over 260 cities across the world -- up from 66 in 2014.

But how much -- or how little -- might riders pay? That's unpredictable due to Uber's price algorithm, which charges riders inordinate sums of money during periods when its cars are most in demand. (Hello, New Years Eve!)

On Tuesday, the company issued a blog post explaining its surge pricing and providing timing guidelines (the highest fares are expected to be between 12:30 and 2:30 a.m., when Ubers are most in demand).

■ column-width: 150px;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

下記のように、文字の幅に対しカラム幅の値が小さすぎる場合、カラム数は増えるが、カラム同士の文字が重なってしまうことがあります。

column-width:45px;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

column-count	カラム数を指定します。
column-gap	カラムの間隔を指定します。値はピクセル(pixel)、%(percentage)で指定できます。
column-rule	カラムの区切り線のスタイルや幅、色を指定します。

「CSS」 カラム幅を指定する「column-width」

「CSS」カラム幅を指定する「column-width」