何年もの間、CSSの浮動小数点は、ウェブサイトのレイアウトを作成する際に、まだまだ複雑でありながらも必要なコンポーネントでした。デザインで複数の列が呼び出された場合は、浮動小数点数に変わります。この方法の問題点は、Webデザイナーや開発者が複雑なサイトレイアウトを作成する際に驚くべき工夫をしていたにもかかわらず、CSS浮動小数点は実際にはこのように使用されることは決してないということです。
浮動小数点数とCSSの配置は、今後数年間Webデザインの分野を確実にしていますが、CSS GridやFlexboxなどの新しいレイアウト手法は、Webデザイナーにサイトレイアウトを作成する新しい方法を提供しています。潜在的に多くを示す別の新しいレイアウトテクニックは、CSSの複数の列です。
CSS Columnsは数年前から存在していましたが、古いブラウザ（主に旧バージョンのInternet Explorer）ではサポートが不足しているため、多くのWeb専門家が制作作業にこれらのスタイルを使用することができませんでした。
これらの古いバージョンのIEのサポートが終了すると、一部のWebデザイナーは新しいCSSレイアウトオプション、CSS Columnsをテストしています。
CSS列の基本
その名前が示すように、CSS複数列（CSS3複数列レイアウトとも呼ばれます）では、コンテンツを設定された数の列に分割できます。使用する最も基本的なCSSプロパティは次のとおりです。
- 列カウント
- 列ギャップ
列数については、必要な列数を指定します。列のギャップは、それらの列間の溝または間隔になります。ブラウザはこれらの値を使用して、指定した列数にコンテンツを均等に分割します。
実際のCSS複数列の一般的な例は、新聞記事で見られるようなテキストコンテンツのブロックを複数の列に分割することです。次のHTMLマークアップがあるとします（実際には、このマークアップには複数の段落の内容が存在する可能性がありますが、例としては1段落の先頭にしています）。
次に、これらのCSSスタイルを記述した場合：
.content {-moz-column-count：3; -webkit-column-count：3;列カウント：3; -moz-column-gap：30px; -webkit-column-gap：30px;列ギャップ：30px; }
このCSSルールは、コンテンツの分割を3つの等しい列に分割し、それらの間に30ピクセルのギャップを設けます。 3つではなく2つの列が必要な場合は、その値を変更するだけです。ブラウザは、列の新しい幅を計算してコンテンツを均等に分割します。ベンダー接頭辞付きのプロパティーを最初に使用し、接頭辞なしの宣言を使用することに注意してください。
これほど簡単ではありませんが、この方法での使用はウェブサイトでの使用に疑問があります。はい、複数の列に複数のコンテンツを分割することはできますが、特に、これらの列の高さが画面の「折りたたみ」を下回っている場合、これはWebにとって最高の読書体験ではありません。
読者は完全な内容を読むために上下にスクロールする必要があります。それでも、CSS Columnsのプリンシパルはここで見ているように簡単ですし、いくつかの段落の内容を分割するだけでなく、実際にはレイアウトに使用することができます。
CSS列によるレイアウト
3列のコンテンツを持つコンテンツエリアを持つウェブページを持っているとします。これは非常に典型的なウェブサイトのレイアウトであり、これらの3つの列を実現するためには、通常、複数の列を含む浮動小数点数を浮動させることになります。
HTMLのサンプルをいくつか紹介します：
