Equal Height Grid

Custom Happy! Equal Height Grid

Raindropsテーマには、投稿内でも使用可能な組み込み済みのグリッドクラスがあります。

1/2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1/4

<div class="line">
<div class="unit size1of2 color3">1/2<p class="custom-field-shortcode ">Lorem ...</p>
</div>
<div class="unit size1of4 color2">1/4</div>
<div class="unit size1of4 color1">1/4</div>
</div>

のように、横方向にコンテンツを並べて表示するためのクラスですが、高さをそろえて表示する簡単な方法を模索していました。

次回のアップデートで、これが実現できるようにテストを始めています。

1/2

1/4

<div class="line equal-height">
<div class="unit size1of2 color3">1/2<p class="custom-field-shortcode ">Lorem ...</p>
</div>
<div class="unit size1of4 color2">1/4</div>
<div class="unit size1of4 color1">1/4</div>
</div>

equal-heightクラスを記述する事で、簡単にイコールハイトグリッドが実現できます。

1/2

1/4

1/3

2/3

Tab Area

tab 1

tab 2

tab 3

1/4

1/5

2/5

1/5

3/5

1/5

4/5

1/5

1/3

ビジュアルエディタでの表示

ビジュアルエディタでは、フロントエンドと異なるスタイルを適用

今回のイコールハイトのアイディアは、line クラスの高さが不確定なため、子要素にheight:100%をしても、それは無視されるため、lineクラスにjavascriptで高さを取得して、styleとして高さを設定する事で、height:100%が動作するというものです。（flex使えばいいですが、今回は使っていません）

ビジュアルエディタで、フロントエンドと同じ方法でイコールハイトを設定しようとすると、今回の実装では、javascriptを追加する必要があります。
wordpress.orgのホスティングテーマでは、javascriptを追加するといった方法は許可されていないため、display:tableを使ってスタイルを作っています。

ビジュアルエディタの場合は、メディアクエリ―によるスタイルの変更が必要ないのでこの方法をとりました。

イコールハイトというと、いまだにマイナスマージョンとパッディングによるトリックが紹介されていたりして、何か周期的にトライはするものの、「これだっ」というのがありません。

類似クラスcolmuns

段組みクラスcolmunsを使っても似たようなレイアウトが可能です

<div class="columns">
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

CSS note

Equal Height Grid