CSS
The CSS column-fill property is used to evenly distribute content across multiple columns, and it can minimize the amount of white space by setting the value to "balance". However, it has limited browser support.
column-fill
column-fillプロパティは、複数の列に分割された領域内で、どのようにコンテンツを配置するかを指定するためのプロパティです。column-fillプロパティを使用することで、最初の列が完全に埋められなくても、余白を最小限に抑えて、列の高さを均等に分割することができます。
column-fillプロパティは、CSS3で導入された比較的新しいプロパティの1つです。このプロパティを使用することで、複数の列に分割された領域内で、コンテンツをより均等に配置することができます。column-fillプロパティには、autoとbalanceの 2つの値があります。
- auto
- この値が設定された場合、ブラウザーは最初の列を埋めるために、コンテンツを自動的に分割します。
- balance
- この値が設定された場合、ブラウザーは列の高さを均等に分割し、余白を最小限に抑えて、コンテンツを配置します。
以下は、column-fillプロパティを使用して、3列に分割された領域内でコンテンツを均等に配置する例です。
CSS
.wrapper {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}Browser support
