CSSでMulti Columnのカラムごとの幅を設定する方法/column-widthプロパティの使い方

CSSでカラム数を指定した場合、カラムごとに幅を設定することが可能です。

column-widthの使い方

カラムに対してcolumn-widthプロパティを設定することで、カラムの幅を指定することができます。

column-widthを20pxで指定した文章column-widthを20pxで指定した文章column-widthを20pxで指定した文章

<！-- html -->
<div class = "colmn20">column-widthを20pxで指定した文章</div>

/*CSS*/
.colmn20{
column-width:20px;
}

column-widthを50pxで指定した文章column-widthを50pxで指定した文章column-widthを50pxで指定した文章

<！-- html -->
<div class = "colmn50">column-widthを50pxで指定した文章</div>

/*CSS*/
.colmn50{
column-width:50px;
}

上記のように単体で使用すると可能な限りカラム数を増やしますが、Column-countプロパティでカラムの数も指定すると、カラムがすべて表示できる限りは、column-widthは無視されます。

3カラムで幅が50pxの文章3カラムで幅が50pxの文章3カラムで幅が50pxの文章3カラムで幅が50pxの文章3カラムで幅が50pxの文章

<！-- html -->
<div class = "colmn3">3カラムで幅が50pxの文章</div>

.colmn3{
column-width:50px;
column-count:3;
}

ただし、column-widthを指定しておくと、min-widthと同じような挙動をします。カラムをすべて表示するとcolumn-widthを達成できない場合、column-widthが優先されます。

3カラムで幅が500pxの文章3カラムで幅が500pxの文章3カラムで幅が500pxの文章3カラムで幅が500pxの文章3カラムで幅が500pxの文章

<！-- html -->
<div class = "colmn500">3カラムで幅が500pxの文章</div>

.colmn500{
column-width:500px;
column-count:3;
}

つまり両方指定することで、カラム幅の最低サイズは維持しつつ、表示可能なら横にカラムを多く表示するレイアウトとなります。