Grid で横並びのブロックを作ってみよう
Box や Card を組み合わせて横並びのブロック要素を作ってみます。 といっても markdown の中に HTML をごりごり書きたくない。またできるだけ Grid System でやりたい。
で、markdown で作ろうとしたら要素を入れ子にできる記法をつかわなくてはならないわけですが、まさかリストでやるわけにもいかない。そこでそういうのに使える記法が１つだけあります。blockquoteです。
3 Columns Box
次の例は左右３コラムの Box、内側に３個の Card を持っている。
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.box .grid-col3でできるようにした。内側のCardに.mgn-0を指定しているのは、blockquote内の PタグでCardを作っているので、Pタグデフォルトのマージンを消すため。
スマートフォンの場合、外の入れ物に外枠罫線があると、画面サイズに対するコラム数とアイテム数の関係でボトムが枠からはみ出たりするのが難点。そこで手動でpadding-bottomを変更できるようにした。.pad-b-flexクラスを指定し style="--pad-b:値;"で値を渡す。max-width: 640pxの条件の場合のみ適用される。
[markdown]
> Nested paragraph 1.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .card .mgn-0}
>
> Nested paragraph 2.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .card .mgn-0}
>
> Nested paragraph 3.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .card .mgn-0}
{: .box .grid-col3 .fc-gray .pad-b-flex style="--pad-b:0.8rem;"}
[css]
.grid-col3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(2.0rem, auto);
justify-content: center;
grid-row-gap: 2%;
grid-column-gap: 1%;
grid-auto-flow: dense;
}
外側の罫線が不要なら.border-noneで消せる。もちろん内側にこれを指定すれば内罫線も消える。.fc-gray は内側の文字の色をグレーにしているだけ。
{: .box .grid-col3 .fc-gray .border-none .bg-transparent}
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
外の箱と内の箱は、Box と Card のどういう組合せでもOK.
ここまで作ってきた中でいろいろと仕組みができてきたので、一部分だけバックの色を変えるとかも可能。次の例は内側の Card のバックや文字の色を変えたり、外の Card にタイトル(H4)やちょっとした文章、フッターとなる一文など追加した例。
Gridはそのままだと一番文章の長い要素に合わせて高さが決まってしまうので、タイトルやパラグラフなどに見せようとしても高さが広がりすぎてしまったりする。そこで.block-title, .block-para, .block-footerといったクラスを追加して空きを調整している。またデフォルトのままだと横幅が１コラムになる。タイトルとかパラグラフ、フッターなどは横幅100％使わないとダメなので.grid-col3でコラム3つ分の巾にする。ただし640px以下のスマートフォン・スクリーンではコラム１の巾にしないと中のボックスが伸縮して縦並びになってくれない。ま、そこはMedia Queriesで対処した。
Headers in box 3 columns
A blockquote box. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[markdown]
> #### Headers in box 3 columns
> {: .grid-col-span3 .block-title}
>
> A blockquote box.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .grid-col-span3 .block-para}
>
> Nested paragraph 1.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .card .mgn-0 .fc-darkblue .bg-whitesmoke}
>
> Nested paragraph 2.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .card .mgn-0}
>
> Nested paragraph 3.
> John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .card .mgn-0 .fc-white .bg-dark-gray3}
>
> This is the outer quote again.
> {: .grid-col-span3 .block-footer .text.align-r}
{: .card .grid-col3 .fc-gray .pad-b-flex style="--pad-b:1.5rem;"}
まあここまでくると HTML 直書きと変わらないややこしさになってくるが、いろいろ出来るのはいいかと。
以下コラム数を変えたパターン。.grid-col数字で 2〜6まで作ってみた。サイトのレイアウトに用いる Grid は直接 Jekyll のテンプレートや CSS に書いていくし、文中に使うものとしては６コラム以上はいらんだろうと考えた。
一応スマートフォン対応で、どのコラム数設定の場合も640px以下のスクリーンでコラム数１(縦並び)になる。
2 Columns Box
次の例は左右２コラムの Card、内側に２個の Box を持っている。
{: .card .grid-col2 .fc-gray}
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4 Columns Box
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 4. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
5 Columns Box
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 4. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 5. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
6 Columns Box
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 4. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 5. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 6. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
もちろん Grid の仕様でアイテムの数がコラム数より多ければ、自動的に次の行に配置される。たとえば.grid-col4でアイテムが６なら、
Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 2. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 3. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 4. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 5. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested paragraph 6. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.