Css

フレックスボックスグリッドを利用したブートストラップ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

からの写真 グーグル