Css Grid Wrapカラムが行の高さを維持する

Question

これがcss gridやcss flexboxで解決できるかどうかはわかりませんが、私は試してみると思います。で

https://codepen.io/anon/pen/QMOWwr

あなたは、ビューポートが小さすぎるラップ、複数の列でCSSグリッドを参照してくださいcodepen。これは、それがすべきことであり、CSSグリッドでこれがいかに簡単かがとても良いです。

しかし、私が追加したいのは、列の高さが最も高いセルに基づいて行の高さが等しいことです。

これを説明するために、各列の1つのセルにテキストを追加し、境界線をシミュレートする要素<hr>を追加しました。これを言いますと、<hr>のタグをすべての列で同じ高さにしたいとします。セル内の任意のコンテンツ任意のヒントのための

Thxを、

マリウス

Answer 1

一つの解決策は、各列内の各セルの最大の高さを確認し、それに応じて他のすべてのセルのサイズを変更するためにJavaScriptを使用することであろう。このような

何か：https://codepen.io/anon/pen/rzYaEY

は、しかし、おそらくより多くの慣用的な解決策はただ<table>要素を用いることであろうと、それに応じてスタイル。