グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。
静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。
さらに、デザイン面も枠線とか余白とかのクセが強く、残念な感じになりがちです。
そこでこちら。
A1
A2
A3
B1
B2
B3
C1
C2
C3
HTMLは以下でとてもシンプルです。
<div class="demo_box">
<div class="demo_item">A1</div>
<div class="demo_item">A2</div>
<div class="demo_item">A3</div>
<div class="demo_item">B1</div>
<div class="demo_item">B2</div>
<div class="demo_item">B3</div>
<div class="demo_item">C1</div>
<div class="demo_item">C2</div>
<div class="demo_item">C3</div>
</div>
左上から右に３つずつ３行の枠組ができます。
CSSもシンプルです。
.demo_box {
display: grid;
grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px;
background-color:#CCC;
padding:5px;
width:240px;
}
.demo_item {
margin:5px;
background-color:#99F;
color:#FFF;
border-radius: 5px;
align-items: center;
justify-content: center;
display: flex;
}
ポイントはここだけ
display: grid;
grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px;
左から80pxのところで縦に区切る、さらに80px右で縦に区切る、さらに80px右で縦に区切る。
上から80pxのところで横に区切る、さらに80px下で横に区切る、さらに80px下で横に区切る
となっています。
...エクセルで言うところの列A,B,Cと行1,2,3が80pxの正方形のイメージです。
スタイルを見るとわかりますが、余白を親要素に5px、子要素に5px撮っているので、子要素の色のついている部分は70pxになります。
ちなみに子要素の
align-items: center;
justify-content: center;
display: flex;
この部分はテキストを中央に寄せるためのものなので、グリッドの表には必須ではありません。
なので、けっこう少ない記述で、tableも使わない、floatも使わない、比較的扱いやすい表が作れるということになります。
ぜひ、お試しを。
