序章

CSS Multi-column Layout 仕様の一部として定義されたいくつかの簡単なルールを使用して、コンテンツが複数の列間を流れるレイアウトと複数列のマガジンスタイルのレイアウトをCSSで簡単に実装できるようになりました。 これは、 CSSグリッドおよびフレックスボックスとともに、最小限の労力でほとんどすべての種類のレイアウトを定義することを可能にします。 複数列のレイアウトに関して現在可能なことを見てみましょう。

基本的な複数列のレイアウト

複数列のレイアウトは、含まれているブロック要素に設定されたcolumn-countまたはcolumn-widthプロパティのいずれかで定義されます。

列数

column-count は、ブロック要素に必要な列数の整数値を取ります。

.col {
  background: var(--subtle-yellow2);
  padding: 1rem 2rem;
}

.col-3 {
  column-count: 3;
}
<article class="col col-3">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。

レスポンシブレイアウトを作成するには、小さいビューポートに異なる数の列を設定するのと同じくらい簡単です。

@media (max-width: 600px) {
  .col-3 {
    column-count: 1;
  }
}
@media (min-width: 601px)  and (max-width: 900px) {
  .col-3 {
    column-count: 2;
  }
}

列幅

column-width を使用すると、正確な列数を指定する代わりに、推奨される幅を指定すると、列数がその幅と使用可能なスペースに対して計算されます。 列の幅が8remである例を次に示します。

.col-8rem {
  column-width: 8rem;
}
<article class="col col-8rem">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。

ビューポートのサイズを変更すると、 column-width を使用すると、小さいビューポート用に異なる列数を定義しなくても、デフォルトで複数列のレイアウトがレスポンシブになります。

column-countおよびcolumn-withの省略形のプロパティもcolumnsと呼ばれます。 コンテナを2列または幅12remの列に設定する方法は次のとおりです。

.col-2-12rem {
  columns: 2 12rem;
}

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。

列数と列幅の両方を設定することは、ほとんどのユースケースではおそらく少し奇妙です。これは、提供された数または幅のいずれかに従うかどうかを決定するのはブラウザーに任されているためです。

ギャップとルール

column-gap プロパティを使用して列間のギャップの幅を指定し、 column-rule プロパティを使用してギャップの中央にルール(線)を定義できます。

列ギャップ

デフォルトでは、何も指定されていない場合、ほとんどのブラウザは1remの列ギャップを使用します。 5remの列ギャップの例を次に示します。

.col-gap-5rem {
  column-gap: 5rem;
}
<article class="col col-gap-5rem col-3">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。

列ルール

ルールは、コンテンツを含む2つの列の間の単なる線です。 column-rule の値は、境界線プロパティの値と同じ形式です。

.col-fancy-rule {
  column-rule: 3px dotted hotpink;
}
<article class="col col-fancy-rule col-3 col-gap-5rem">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。

列スパン

column-spanプロパティをallの値に設定すると、複数列の要素内に全幅にまたがる要素を含めることができ、行を強制的に分割できます。

.col h3 {
  column-span: all;
  border-bottom: 2px solid var(--subtle-green1);
}
<article class="col col-fancy-rule col-3 col-gap-5rem">
  <p>...</p>

  <h3>Fancy-enough Title</h3>

  <p>...</p>

  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

派手なタイトル

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。

この記事の執筆時点では、Firefoxはcolumn-spanをサポートしていません。

列の区切り

break-before break-inside break-after プロパティを使用し、 avoidの値を使用して、要素が列間でどのように分割されるかを制御できます。 またはavoid-column。 段落要素が複数の列に分割されない簡単な例を次に示します。

.breaks p {
  break-inside: avoid-column;
}
<article class="col col-3 breaks">
  <p>...</p>

  <h3>Fancy-enough Title</h3>

  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

派手なタイトル

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。 Praesent dapibus、neque id cursus faucibus、tortor neque egestas augue、eu vulputate magna eroseuerat。 Aliquameratvolutpat。 Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus。

break-inside ルールがない同じ例は、次のようになります。ここでは、段落が複数の列に流れる可能性があります。

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

派手なタイトル

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。 Praesent dapibus、neque id cursus faucibus、tortor neque egestas augue、eu vulputate magna eroseuerat。 Aliquameratvolutpat。 Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus。

列の塗りつぶし

column-fill は、コンテンツが列間でどのように分散されるかを制御します。 初期値balanceは、コンテンツが列間で均等に分散される必要があることをブラウザーに示します。

まず、マルチカラムコンテナにハードコードされた高さを設定し、balanceの初期値のためにコンテンツが均等に分散される例を次に示します。

<article class="col col-3 b30" style="height: 400px;">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。 Praesent dapibus、neque id cursus faucibus、tortor neque egestas augue、eu vulputate magna eroseuerat。 Aliquameratvolutpat。 Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus。

これは同じ例ですが、代わりにcolumn-fillautoに設定しています。

<article class="col col-3" style="column-fill: auto; height: 500px;">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Lorem ipsum dolorはアメットに座り、consectetueradipiscingelitです。 ドネコディオ。 Quisque volutpatmattiseros。 Nullam malesuada eratutturpis。 Suspendisse urna nibh、viverra non、semper suscipit、posuere a、pede。

Donec nec justo eget felisfacilisisfermentum。 Aliquamporttitormaurisはametorciに座っています。 Aenean dignissimpellentesquefelis。

sem quis duiplaceratornareのモルビ。 Pellentesque odio nisi、euismod in、pharetra a、ultricies in、diam。 Sedarcu。 Crasconsequat。 Praesent dapibus、neque id cursus faucibus、tortor neque egestas augue、eu vulputate magna eroseuerat。 Aliquameratvolutpat。 Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus。

結論

マルチカラムプロパティは、CSSグリッドおよびフレックスボックスとともにさらに別の最新のCSSレイアウトツールであり、作成者は柔軟で動的なレイアウトをすばやく定義できます。

ブラウザのサポート: 2020年現在、マルチカラムを使用できますか?は、99% ofの世界中のブラウザが上記のマルチカラムプロパティをサポートしていることを示しています。 partial をサポートしているとフラグが付けられたブラウザは、この記事で説明されていないcolumn-context: avoid-columnのようなプロパティをサポートしていません。