ブロック要素は、レストランやカフェでのメニューで使うことが多い
キャプショーン付きやブロック要素は、指定が無ければ上下になるので、それを横並びにしたい時
※スマホやタブレッでの見え方も指定されていることが多い
<ul class="gallery-columns-3"> 数字はコンテンツ幅全体に3列並べる、幅を超えると改行される
<li class="gallery-item"> その中のひとつのブロック
.gallery {
margin-bottom: 1.6em; ・・・続くブロックの下に余白を取りたい時だけ使う、単位は px が分かりやすい
}
.gallery-item {
display: inline-block; ・・・ディスプレイ上で横に並べる
padding: 0.5% 1%; ・・・ブロック内周りの余白
text-align: center; ・・・ブロックの真ん中
vertical-align: top; ・・・高さをトップに揃える
width: 100%; ・・・ブロック幅いっぱい使う(画像がそのサイズを超えても、それに合わさる)
}
.gallery-columns-2 .gallery-item {
max-width: 50%; ・・・画像の両サイドに余白を取ってことが多いので、49%などに減らす
}
max-width: 33.33%; max-width: 25%; も然り
コンテンツ幅を分割する gallery-columns に対して、グリッドを組み合わせられる
テーマになければ、追加しておくと便利
<div class="grid-50 tablet-grid-50 mobile-grid-100">
.grid-50 {
float: left;
width: 50%;
}