CSS (および JavaScript の代替手段) を使用して石積みスタイルのレイアウトを作成するにはどうすればよいですか?

CSS を使用した石積みスタイルのレイアウトの作成

多くの Web デザイナーは、コンテンツ ブロックが列に配置され、各ブロックが適応するレイアウトの作成に努めています。一貫した美しい外観を維持しながら、独自の高さに調整できます。これは石積みスタイルのレイアウトとして知られています。

以前は、CSS だけではこの効果を効果的に実現できませんでした。しかし、CSS3 の出現により、シンプルなソリューションが得られました。

CSS3 ソリューション

CSS3 では、複数列レイアウトの概念が導入され、開発者が列の数と列間の間隔。 column-count プロパティと column-gap プロパティを設定することで、石積みスタイルのレイアウトを作成できます。

たとえば、次の CSS コードは、2 つの列とそれらの間に 10 ピクセルのギャップがあるコンテナを定義します。

.container {
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

コンテナ内の各項目は、列内で使用可能な幅の 100% を強制的に占有するようになります。これは、異なる高さのブロックが垂直に積み重なり、望ましい石積みスタイルの外観を作成することを意味します。

非 CSS3 ソリューション

プロジェクトが CSS3 をサポートしていない場合は、石積みスタイルのレイアウトを実現するには、JavaScript を使用する必要があります。これらのレイアウトの作成に使用できる、Masonry や Isotope など、利用可能な JavaScript ライブラリがいくつかあります。

以上がCSS (および JavaScript の代替手段) を使用して石積みスタイルのレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。