ブートストラップで石積みレイアウトを作成する方法

Bootstrap 5.3で石積みレイアウトを作成するには、class = "masonry"をrow and class = "masonry-brick"にclass = "masonry"を各子列に適用して、組み込みのCSSグリッドベースのメーソンリーユーティリティを使用します。 2。ブートストラップ5.2の場合、別々に含めることでMasonry.js JavaScriptプラグインを使用し、データマソーリーで初期化することができますが、外部スクリプトが必要です。 3. COL-SM-6やCOL-LG-4などのレスポンシブグリッドクラスを使用して、画面サイズあたりの列カウントを制御し、最適な視覚的效果の可変コンテンツの高さを可能にします。 4. -masonry-columnsのようなCSS変数を使用してレイアウトをカスタマイズして、列の数を設定し、-masonry-gapはアイテム間の間隔を調整し、Boottrap 5.3を使用する際にサードパーティのライブラリにオーバーラップまたは依存せずに清潔で応答性のある、柔軟な石積みのレイアウトを確保します。

bootstrapでメーソンリーレイアウトを作成したのは、masonry.jsのようなサードパーティのJavaScriptライブラリを必要とするために使用されていましたが、Bootstrap 5のリリースにより、組み込みのユーティリティクラスを使用してメーソンスタイルのグリッドを実現できるようになりました。この最新のアプローチは、CSSグリッドとmasonry-*クラスを活用しています。

ブートストラップ5で石積みレイアウトを作成する方法は次のとおりです。

1. masonryクラスでブートストラップ5を使用します

ブートストラップ5.2は、 masonryクラスを介してネイティブメーソンのサポートを導入しました。 masonryクラスを備えたコンテナにグリッドアイテムを包む（または、フルハイトが必要な場合はh-100 ）、子供にmasonry-brickを使用する必要があります。

基本的なHTML構造：

 <div class = "container">
  <div class = "row" data-masonry = &#39;{"パーセントポジション"：true}&#39;>
    <div class = "col-sm-6 col-lg-4 mb-4">
      <div class = "p-3 border bg-light">アイテム1 </div>
    </div>
    <div class = "col-sm-6 col-lg-4 mb-4">
      <div class = "p-3 border bg-light"> item 2 <br>ここに長いコンテンツ... </div>
    </div>
    <div class = "col-sm-6 col-lg-4 mb-4">
      <div class = "p-3 border bg-light">アイテム3 </div>
    </div>
    <div class = "col-sm-6 col-lg-4 mb-4">
      <div class = "p-3 border bg-light">アイテム4 <br> <br>さらにコンテンツを高くする。</div>
    </div>
    <div class = "col-sm-6 col-lg-4 mb-4">
      <div class = "p-3 border bg-light"> item 5 </div>
    </div>
  </div>
</div>

⚠⚠️注：上記の例では、 masonry.js javascriptプラグイン（Bootstrapのオプションプラグインの一部）を使用していますが、これはデフォルトでは含まれていません。別々に含める必要があります。

2。CSSグリッドメーソンの使用（JavaScriptなし） - 推奨されます

JavaScriptなしで真の石積み効果が必要な場合は、Bootstrap 5.3で導入されたBootstrapのCSSベースの石積みユーティリティを使用してください。

class="masonry"を使用した例

<div class = "container">
  <div class = "row masonry">
    <div class = "col-sm-6 col-lg-4石積み - レンガ">
      <div class = "p-3 border bg-light">アイテム1 </div>
    </div>
    <div class = "col-sm-6 col-lg-4石積み - レンガ">
      <div class = "p-3 border bg-light">より多くのコンテンツを備えたアイテム2 ... </div>
    </div>
    <div class = "col-sm-6 col-lg-4石積み - レンガ">
      <div class = "p-3 border bg-light">アイテム3 </div>
    </div>
    <div class = "col-sm-6 col-lg-4石積み - レンガ">
      <div class = "p-3 border bg-light">さらに多くのコンテンツを備えたアイテム4 <br> <br>およびいくつかの追加の行。</div>
    </div>
    <div class = "col-sm-6 col-lg-4石積み - レンガ">
      <div class = "p-3 border bg-light"> item 5 </div>
    </div>
  </div>
</div>

この方法では、フードの下でCSSグリッドを使用します。 masonryクラスは、行をカラムベースの石積みレイアウトを備えたグリッドコンテナに変えます。 masonry-brickクラスは、各列が柔軟なアイテムとして動作することを保証します。

3。覚えておくべき重要なポイント

• bootstrapバージョン：masonry.jsサポートにはBootstrap 5.2 、純粋なCSSメーソンに5.3を使用していることを確認してください。
• masonry.jsを含める（JSバージョンを使用する場合） ： data-masonry属性を使用している場合は、bootstrapのCDNまたはビルドのmasonry.jsプラグインを含めます。
• Responsive Columns ：Bootstrapのグリッドクラス（ col-md-6 、 col-lg-4など）を使用して、異なる画面で行ごとに表示されるアイテムの数を制御します。
• ✅変数の高さ：メーソンの効果は、カードやコンテンツの高さが異なる場合に最適に機能します。

4.オプション：ギャップと列をカスタマイズします

ユーティリティクラスを使用して、間隔と列を制御できます。

 <div class = "row masonry" style = " - 石工 -  columns：3;  -  masonry-gap：1.5rem;">
  <！ - ブリック - >
</div>

利用可能なCSS変数：

• --masonry-columns ：列の数を設定します（デフォルトはAUTOです）。
• --masonry-gap ：アイテム間のギャップを制御します。

まとめ

• 純粋なCSSメーソンの場合、 class="masonry"を使用し、子どもにmasonry-brick使用します（Bootstrap 5.3）。
• 古いバージョンの場合は、 Masonry.jsプラグインを使用してdata-masonryを使用します。
• 両方の方法を混ぜないでください。
• レスポンシブな列のクラスと不均一なコンテンツの高さで最適に機能します。

基本的に、最新のブートストラップを使用している場合、Masonryは組み込みで実装しやすくなりました。追加のライブラリは必要ありません。

以上がブートストラップで石積みレイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。