Material-ui: 【グリッド】自動高さ調整（レスポンシブレイアウト）

あなたが達成しようとしていることは、ユーザーランドに実装してニッチをターゲットにすることができると私は感じています。そのため、問題を解決します。 コードベースをシンプルにしましょう。

コードの基本が単純なままであるという事実を完全に理解していますが、材料仕様では、「単一列形式の要素は、さまざまな組み合わせでコンテンツ領域を埋めるためにリフローする可能性があります」と宣言して

しかし、現在、グリッドでできる最善のことはこれです：

それから私はコードが機能性を持ちながらシンプルなままでいられると真剣に考えています

NS、

PS：仕様と同じ結果を出す小さなコンポーネントを知っているなら、私に知らせてください。
（しかし、マテリアルUIへの統合は、すべての人にとって有益だと思います）

たぶんあなたは石積みライブラリを探しています： https ：

ええ、これはマテリアルUIへのネイティブ統合を待っている間は良い考えです_^:)

PS：問題の再開を検討できますか？

NS、

この機能を統合するためのヘルプが必要な場合は、ここでGoogleのマテリアルフレームワークのCSSコードをサポートできると思います

Material uiは確かにReactコンポーネントの最高のセットです！

getmdlでそれができるとは思いません。確認していませんが、提供したリンクは静的な例であると確信しています。 動的コンテンツの場合、 Angular Material2グリッドリストまたはAngularMaterial 1 GridListでのみ機能することを確認しました。 しかし、彼らは複雑なアルゴリズムを使用しています...

はい、その通りですが、ダッシュボードのコンテンツを静的にしないように指定したことはありません😄
どうやら、マテリアルの角度はグリッドが実行しないことを非常にうまく実行します...しかし、ロジックが複雑すぎます！

実際、私が理解していることから、グリッドxs 、 sm 、 mdなどのレスポンシブブレークポイントですでに実装できるものがあります。
「100％」自動の何かが必要な場合は、石積みライブラリが必要に適していますが、プロジェクトの範囲外です。

こんにちは@oliviertassinari 、
しかし、グリッドの材料仕様は？ 以前のコメントで説明したように？

ブレークポイントを使用して実装する方法がわかりません。グリッドではサイズを変更できません。 問題はここにあります！

2枚目のミュージックカードが「aperçu」カードにくっつかないのはなぜですか？ これは材料仕様に反しています。

より一般的には、なぜグリッドはユーザーが望むようにカードを配置するかをユーザーに任せないのですか？

私のリクエストをご理解いただき、問題を再開していただければ幸いです。
そして心から、これはプロジェクトの外ではないと思います、material.angularはそれを統合しました。

• withWidth()高次コンポーネントを使用して、さまざまなブレークポイントのグリッド構造を変更できます。 グリッドはフレックスボックスモデルのスリムなラッパーであり、このレイアウトモデルで実行できることはすべてグリッドコンポーネントを使用して実現できます。
• また、行から列への方向を変更して、目的の動作をさせることができます。

うーん、私は対処できると思いますが、同じ質問をする初心者のためのドキュメントにこの例を追加することが可能であれば？
ダッシュボードをどのように実装するかを考える必要があります...あなたの助けに感謝します

ねえ、私もこの機能が欲しいのですが、提案どおりに実装する方法がわかりませんでした。 HelloEdit、これを機能させることができましたか？ 例を挙げていただけますか？ このユースケースはドキュメントにあるべきだと思います。

ねえ、私は解決策を見つけられませんでした（石積みのような外部ライブラリを使用すると機能します）が、ネイティブにはありません。 私はまだこの機能をネイティブに実装するという私の考えを維持しています！

最終的に2つの列を作成し、データを均等に分割しました。 問題は、列の1つがすべて大きなカードで終わる場合、一方の側がもう一方の側よりもはるかに長くなる可能性があることです。

@HelloEditに同意し

私のアプリには、Material-UIグリッドのように機能させたいグリッドが1つもありません。また、グリッドのドキュメントページが単純すぎて、これがグリッドの機能であることを示すことができないため、これに気づきませんでした。私のアプリでそれを発見する前は、グリッドの「機能」でした。

私は@ marco-silva0000が1つのインスタンスで行ったのと同じことをしましたが、それは明らかなハックであり、アイテムがすべてほぼ同じサイズでない限り、下部も醜く見える可能性があります。

@HelloEditを
さらに、前述のように、それは重要なガイドラインに準拠していません。

あなたにはたくさんの仕事があり、あなたのライブラリは素晴らしいと思いますが、完全にレスポンシブなレイアウトを実装したい場合、この特定の点は本当に問題があります。

@oliviertassinariレイアウト例についてはこちらの可能性...

これについて何か進展はありますか？

グリッドrowHeightプロパティは手動で設定できますが、デフォルトでは1：1であると想定されています。 動的データがループしているカードを表示する場合、高さは調整されません。

1. ケース1、カードが5つのデータを保持でき、2つのデータしか存在しない場合、カードの高さは調整されますが、グリッドの高さは1：1のままです。
2. ケース2、カードが5つの値を保持できるが、7が存在する場合、残りのデータは切り取られ、画面に表示されません。

この問題の解決策が利用できる場合は、例をいただければ幸いです。 ネイティブサポートへの私の投票。 これは、グリッドコンポーネントの基本的な機能の一種だと思います。

このようなものがあなたが望むものになりますか： https ：
CSSグリッドを利用しているため、どこでも使用することはできません： https ：

@joshwooding iPadで見ることができるものに基づいて、とてもよく見えます！ デスクトップで明日チェックします。

デスクトップで編集します。

1. これは、グリッドが現在のように、ブレークポイントに基づいて応答する必要があります。
2. MacCardコンポーネントにいくつかのタイポグラフィ要素を追加し（私のユースケースである可変高さのカードをシミュレートするため）、背を高くしました。 その後、結果には行間にこれらの不要な空のスペースがあります。 したがって、これは結局機能しません。 以下のスクリーンショット：
   

グリッドでの組積造レイアウトのサポートは素晴らしいでしょう👍、理論的にはJSを使用しても機能しますが、理想的ではありません

cssグリッドレイアウトはこれを目的としていません。https ： ください。

一時的な解決策は、必要に応じて列を作成し、それらを広げることです。
例えば
ここに2つの列があり、キーが奇数の場合はそれらを分割します
モバイル用の1つの列にすべてを備えた1つのメイングリッド
smDownで最初のものを非表示にします
mdUpでメインを非表示にします

これについてのいくつかのニュース？

フレックスボックスを使用する方が簡単な場合は、確かに問題があるはずです。

@CloudNineK Flexboxはこの問題を解決しません（グリッドはflexboxベースです）。 さまざまな数の列にコンテンツを均等に分散する場合は、石積みライブラリを使用する必要があります。

MUIからもある種の組積造機能を見たいと言ってチャイムを鳴らしたいと思います。 機能をサポートするようにMuiGridを変更しないかもしれませんが、代わりにそれをサポートする新しいコンポーネントを追加するかもしれません。 そのため、石積み効果のためにMuiGridをラップするための粗いコンポーネントを作成しました。 これがコンポーネントの作成の始まりになることを願っていますか？

ここに興味のある人のためのものです： https ：

もちろん問題はあります。 現在の動作方法は、事前定義されたブレークポイントを取得し（theme.breakpoints.valuesから取得します）、それに基づいて作成する列の数を計算することです。 これがMUIのコンポーネントの動作方法ではないことはわかっていますが、現時点では、このメソッドを使用して列全体の幅を設定することしかできませんでした。

@weiluntongそれも可能な解決策ですが、私はそれがエレガントだとは思いません
多分誰かがラボをフォークして、新しいコンポーネントとしてこれのPRまたは提案をする必要があります

@nikandlv私はあなたに完全に同意します。 現在のところ、MUIでも、石積みのレイアウトでもない、ある種の問題があります。 コンポーネントを作成してPRを作成できれば幸いです。 実際、それがここでの最終目標になることを望んでいましたが、どこから始めればよいかわからなかったため、サンドボックスを作成しました。 繰り返しますが、私はそれが始まりかもしれないと思っていましたか？ それとも、コンポーネントの基本構造に関して完全に左翼手ですか？ 私は私を動かすために入力が欲しいです。

@weiluntongコンポーネントは正しい方向に
そしてhttps://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.mdが言うように

新しいコンポーネントを提出するときは、ラボに追加してください。

https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab

問題の解決を検討するには、この問題についてさらに賛成票を投じる必要があります。

@weiluntongがまだ提案を準備する時間があると感じている場合は、別の専用の組積造コンポーネントに投票する可能性があり

react-virtualized Masonryコンポーネントを使用していました。 ただし、 react-virtualizedは最新のbabelおよびcore-jsでは機能しません。 後継のreact-windowにもMasonryコンポーネントが含まれている可能性は低いようです。 おそらく、 react-virtualized Masonryコンポーネントを更新して、 material-ui採用することができますか？

賛成票をまとめることができる提案をまとめてもかまいません。 使用すべき提案テンプレートはありますか？

@weiluntong https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.mdとして推測し

@weiluntong新しい問題を作成するときのテンプレートがあります。

何かが足りない場合は修正してください。ただし、スタックオーバーフローからこのソリューションを適用することで、この正確な問題のように見えるものを解決することができました。
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

@dylanmartinの場合は

＃17000の締めくくり