フレックスボックスグリッドを利用したブートストラップ4組積造レイアウト
Bootstrap 4 Masonry Layout Utilizing Flexbox Grid
解決:
これは、標準のBootstrap4クラスでほぼ実行可能です。カード列機能に関するドキュメントには、セクション全体もあります。
ドキュメントから:
カードを包むことで、CSSだけで石積みのような列に整理できます。.card-columns。カードはで構築されています
フレックスボックスの代わりにCSS列のプロパティを使用すると、位置合わせが簡単になります。カードは上から下、左から右の順に並べられています。
注意喚起!カードの列でのマイレージは異なる場合があります。カードが列をまたがるのを防ぐために、次のように設定する必要があります。表示:インラインブロックとして
column-break-inside:回避はまだ防弾ソリューションではありません。
だから、あなたがしなければならないのはあなたを包むことです.cards into a
このような.card-columnsコンテナ:
改行に折り返されるカードタイトル
これは、追加コンテンツへの自然な導入として、以下のサポートテキストを含む長いカードです。このコンテンツは少し長くなっています。
Lorem ipsum dolorは、amet、consectetur adipiscingelitに座っています。ロゴは前に配置されました。
ソースタイトルで有名な人
カードタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポートテキストがあります。
最終更新日は3分前
Lorem ipsum dolorは、amet、consectetur adipiscingelitに座っています。彼は完成する準備ができていた。
ソースタイトルで有名な人
カードタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポートテキストがあります。
最終更新日は3分前
Lorem ipsum dolorは、amet、consectetur adipiscingelitに座っています。ロゴは前に配置されました。
ソースタイトルで有名な人
カードタイトル
これは、追加コンテンツへの自然な導入として、以下のサポートテキストを含む幅の広いカードです。このカードの内容は最初のカードよりもさらに長く、同じ高さのアクションを示しています。
最終更新日は3分前
Mosonry GridLayoutsには多くの選択肢があります。
組積造グリッドレイアウトを作成するための10個のコードスニペットを確認してください
私は使用することを好む CSS
.masonry {/ *組積造コンテナ* / -webkit-column-count:4; -moz-column-count:4;列数:4; -webkit-column-gap:1em; -moz-column-gap:1em;列ギャップ:1em;マージン:1.5em;パディング:0; }body {font-family:sans-serif;マージン:0;背景:#f2f2f2; } h1 {text-align:center;マージントップ:50px; } p {text-align:center; margin-bottom:60px; } h4 {text-align:center; line-height:80px; font-weight:normal; } .masonry {/ *組積造コンテナ* / -webkit-column-count:4; -moz-column-count:4;列数:4; -webkit-column-gap:1em; -moz-column-gap:1em;列ギャップ:1em;マージン:1.5em;パディング:0; -moz-column-gap:1.5em; -webkit-column-gap:1.5em;列ギャップ:1.5em;フォントサイズ:.85em; } .item {display:inline-block;背景:#fff;パディング:1em;マージン:0 0 1.5em;幅:100%; -webkit-transition:1sはすべてを容易にします。ボックスサイズ:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;ボックスシャドウ:2px 2px 4px 0 #ccc; } .item img {max-width:100%;高さ:自動;} @media only screen and(max-width:320px){。masonry {-moz-column-count:1; -webkit-column-count:1;列数:1; }} @media only screen and(min-width:321px)and(max-width:768px){。masonry {-moz-column-count:2; -webkit-column-count:2;列数:2; }} @media only screen and(min-width:769px)and(max-width:1200px){。masonry {-moz-column-count:3; -webkit-column-count:3;列数:3; }} @media only screen and(min-width:1201px){。masonry {-moz-column-count:4; -webkit-column-count:4;列数:4; }} 純粋なCSSのみのレスポンシブ組積造。
1 2 3 4 5 6 7 8 9 10 十一 12 からの写真 グーグル 。