グリッド/タイルビューを作成する方法

129

たとえば、いくつかのクラス.articleがあり、このクラスをグリッドビューとして表示したいとします。だから私はこのスタイルを適用しました：

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

そのスタイルは、.articleをタイル/グリッドのように見せます。高さを固定しても問題ありません。しかし、高さを自動に設定したい場合（その中のデータに応じて自動的に拡大する）、グリッドは見苦しく見えます。

ここに画像の説明を入力してください

そして、私はこのようなビューを作りたいです：

ここに画像の説明を入力してください

css  grid  positioning  css-float  tiles 
— アリオナリアン
ソース

回答:

78

このタイプのレイアウトは、組積造レイアウトと呼ばれます。組積造は別のグリッドレイアウトですが、要素の高さの違いによって生じる空白を埋めます。

jQuery Masonryは、石積みのレイアウトを作成するためのjQueryプラグインの1つです。

または、CSS3を使用できますcolumn。ただし、CSS3列との互換性の問題があるため、現時点ではjQueryベースのプラグインが最適です。

— 本棚
ソース
3
ここにCSS3-wayを追加しました！
— behradkhodayar 2017年
27

フレックスボックスを使用できます。

  1. 要素を複数行の列フレックスコンテナーに配置する

    #flex-container {
  display: flex;
  flex-flow: column wrap;
}

  2. 要素を並べ替えて、DOMの順序が垂直方向ではなく水平方向になるようにします。たとえば、3つの列が必要な場合、

    #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

  3. 各列の最初の項目の前で列を強制的に分割します。

    #flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

    残念ながら、まだすべてのブラウザがflexboxの改行をサポートしているわけではありません。Firefoxでも動作します。

コードスニペットを表示

— オリオール
ソース
うわー、これは古い質問でした。また、フレックスボックスを使用してメーソンリーのレイアウトをシミュレートすることは最良のオプションではありません。あなたのスニペットは方法で機能していません：D、私はあなたがここでポイントを逃したと思います この問題を解決する別の回避策は、CSS3列を使用することです。しかし、答えてくれてありがとう
— Ariona Rian 2016年
1
@ArionaRian Firefoxでスニペットを試してください。他のブラウザは、強制改行をまだサポートしていません。はい、CSS列も機能する可能性がありますが、レイアウトよりもテキスト用に設計されているように見えるフレックスボックスとは異なります。
— Oriol
ええ、それが問題です:)、それが今まで、この種のデザインをレイアウトするために石積み/アイソトーププラグインに固執している理由です。
— Ariona Rian 2016年
ディスプレイを置くだけです：flex; flex-wrap：wrap; （そしてそれ以上）コンテナでは、Win11とWin7上のChrome、Firefox、Safari、IE11で完璧に動作します。ただし、min-heightには注意してください（caniuse.com/#search=flex-wrapを参照）
— LBJ
@LBJしかし、要素は行に配置されます。これは望ましい動作ではありません
— Oriol
11

CSS3が広く利用可能になり、主要なブラウザーを通じて互換性を持つようになった今、SOのスニペットツールを備えた純粋なソリューションの時が来ました。

CSS3を使用して石積みのレイアウトを作成column-countするにcolumn-gapは、で十分です。しかし、私はmedia-queriesそれをレスポンシブにするためにも使用しました。

実装に入る前に、jQuery Masonryライブラリフォールバックを追加して、コードをレガシーブラウザー、特にIE8と互換性のあるものにする方がはるかに安全であることを考慮してください。

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

さあ行こう：

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>
スニペットを展開

— Behradkhodayar
ソース
石積みとコンテナーのアイテムの間に等間隔を置く方法を知っていますか？
— intcreator 2017
5
それは良いことですが、多くの人にとって、を注文する必要がありmasonry bricksます。列は上から下に順番に並べます。質問は、垂直に切り替えるのではなく、水平に同じままにするための順序を求めていました。たとえば、上記で見つかった最も短いブロックは、3番目の列であるが一番上の行にある必要があります（SHOULD）。
— jscul 2018
3

表示を使用できます：グリッド

例えば：

これは7列のグリッドで、行には自動サイズがあります。

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

詳細については、次のリンクにアクセスしてください：https ://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
ソース
2

CSSグリッドモジュールあなたが作成することができ、かなり類似しましたレイアウトを。

CodePenデモ

1）3つの固定幅グリッド列を設定する

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2）高さが大きいアイテムが2行にわたることを確認します

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

コードスニペットを表示

Codepenデモ

問題点：

— ダニエル
ソース
1

石積みよりもさらに進みたい場合は、アイソトープhttp://isotope.metafizzy.co/を使用してくださいは、これは石積みの高度なバージョン（同じ作者が開発）であり、純粋なCSSではなく、Javascriptのヘルプを使用します。しかし、それは非常に人気があるので、あなたはたくさんのドキュメントを見つけるでしょう

それが非常に複雑であるとわかった場合は、すでに同位体に基づいた開発に基づいた多くのプレミアムプラグインがあります。たとえば、メディアボックスhttp://codecanyon.net/item/media-boxes-sensitive-jquery-grid/5683020

— user1978456
ソース
1

グリッドベースの例が1つあります。

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}
<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>
スニペットを展開

Rachel Andrew FTWによるこのコードペンに基づく

— ウラジミール・イシェンコ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.