問題タブ [vertical-rhythm]

display: table-cellCSS の「等高列」、「Holy Grail」レイアウト、巧妙な実装、そしてもちろんいくつかのおいしいdisplay: flexアイデアの例がたくさんあります。SO には特にそうです。

しかし、私は他のどこにも見つけることができず、むしろ避けたいJSに頼らなければ達成できなかったことを達成しようとしています。

カード間で高さを共有する子要素のセットを持つ、同じ高さの親コンテナーのセットを作成しようとしています。各カードは、ガターによって隣接する他のカードから分離されています。どうやら私は新人なので画像を投稿できないようですが、視覚的に説明する方がはるかに簡単です。無料の画像ホスティング サイトへのリンクは次のとおりです: http://postimg.org/image/ltcd8ns1l/

画像には、3 つのカード (1、2、3) があり、それぞれに 3 つのセクション (1a、1b、1c、2a、2b、2c、3a、3b、3c) があります。カード内の各セクションは、他のカードの同等のセクションと同じ高さです (つまり、1b = 2b = 3b、1c = 2c = 3c など)。同等の各セクション (例: 1b、2b & 3b) の高さは、それらのセクションの中で最も高いセクション (つまり、最も高い「b」) の高さによって決まります。最も高いセクションの高さは、このセクション内のコンテンツの量によって決まります。

カード間のガター用の個別の「テーブルセル」要素を含む方法を使用して、これを視覚的に達成できましたdisplay: tableが、残念ながら、マークアップは無秩序で意味がありません。次のようなものです。

...最悪。

だから私も何かを動かすことができましたdisplay: flex。CodePen の簡単なデモを次に示します: http://codepen.io/anon/pen/xbXWpQ

後世のために、HTML は次のとおりです。

そしてSCSS：

flex正しい順序であり、無意味な要素が含まれていないため、私は HTML を使用する方がはるかに好きです。

しかし、それだけでは十分ではありません。各カードを独自の要素内にラップできるようにしたいのです。<article>...</article>. 部分的にはカード全体をリンクにすることができますが、私の目には、これにより、より明確で適切に分離されたマークアップが提供されるからです。しかし、そうはいきflexませんので、大変です。

私は何年もの間いじりましたが、JS または厄介な HTML を使用せずにこれを行う方法がわかりません。どちらも私は避けたいと思います。

そのようなことを達成する方法についてのアイデアはありますか?

ベースライン グリッドに等しい場合line-height、行の高さとテキストの折り返しはグリッドに従って適切に機能します。しかし、水平方向の仕切りが必要な場合は、ベースラインから外れます。display:table-cell通常、境界線の高さを考慮して負のマージンを使用しますが、要素には影響しません。

それを補うために行の高さを変更することはできません19px。これは、テキストの折り返しがグリッドから外れることを意味するためです。1px各行の追加の高さを補う他の方法はありますか?

見出しが複数の行にまたがる場合にバラバラにならない CSS ベースライン グリッド (垂直リズム) をセットアップする方法はありますか?