45 views
【1】やりたいこと
Webページ上に 表を表示する 手段はいくつもあるが、
flex: grid を使うと非常に楽
なのだとか。
ぜひこれを使って楽をしてみたい。
【2】やってみる
(1) 基本実装
display: grid を使って、以下の条件で表を作ってみた。
・2列
・表の要素間の隙間は 10px
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample#157</title>
<style>
*{
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2列 */
gap: 10px; /* 各セル間の縦横スペース */
width: 100%;
border: 3px #000 solid;
background-color: #80d080;
}
.grid-item {
background-color: #f08080;
padding: 20px;
text-align: center;
border: 1px solid #888;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1行1列目</div>
<div class="grid-item">1行2列目</div>
<div class="grid-item">2行1列目</div>
<div class="grid-item">2行2列目</div>
<div class="grid-item">3行1列目</div>
<div class="grid-item">3行2列目</div>
</div>
</body>
</html>
grid-template-columns: 1fr 1fr; について少しばかり解説を…
・グリッド上の列を定義する。
・単位 fr は、グリッドコンテナー内の利用可能な空間の比 を表す。
・上記の 1fr 1fr は、1:1 で 2列に並べる ことを意味する。
仮に 2fr 1fr とすれば、 2:1で 2列に並べる ことを意味する。
サンプルコードを以下にアップした。
https://www.dogrow.net/hp/sample/00157
(2) レスポンシブ対応（スマホ時は 1列に変更）
スマホ時は、以下を変更するだけでよい。
PC時: grid-template-columns: 1fr 1fr; /* 2列 */
↓
スマホ時: grid-template-columns: 1fr; /* 1列 */
.grid-container {
display: grid;
grid-template-columns: 1fr; /* 1列 */
gap: 10px; /* 各セル間の縦横スペース */
width: 100%;
border: 3px #000 solid;
background-color: #80d080;
}
サンプルコードを以下にアップした。
https://www.dogrow.net/hp/sample/00157/index2.html
(3) 固定長列 + 可変長列
以下の条件で 2列を表示する。
・1列目 : 表示幅が 200px固定
・2列目 : 残りの表示領域すべて
.grid-container {
display: grid;
grid-template-columns: 2oopx 1fr; /* 2列 */
gap: 10px; /* 各セル間の縦横スペース */
width: 100%;
border: 3px #000 solid;
background-color: #80d080;
}
サンプルコードを以下にアップした。
https://www.dogrow.net/hp/sample/00157/index3.html
(4) 複雑な表
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample#157</title>
<style>
*{
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2列 */
grid-template-rows: 1fr 1fr; /* 2行 */
grid-template-areas:
"item1 item2"
"item1 item3"; /* 1列目の要素が2行にまたがるように指定 */
gap: 10px; /* 各セル間の縦横スペース */
width: 100%;
border: 3px #000 solid;
background-color: #80d080;
}
.grid-item {
background-color: #f08080;
padding: 20px;
text-align: center;
border: 1px solid #888;
&.item1 { grid-area: item1; } /* 1列目の要素 */
&.item2 { grid-area: item2; } /* 2列1行目の要素 */
&.item3 { grid-area: item3; } /* 2列2行目の要素 */
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1,2行1列目</div>
<div class="grid-item item2">1行2列目</div>
<div class="grid-item item3">2行2列目</div>
</div>
</body>
</html>
サンプルコードを以下にアップした。
https://www.dogrow.net/hp/sample/00157/index4.html
https://www.dogrow.net/hp/sample/00157/index5.html
【3】所感
・display: grid を知る前は、inline-block要素を margin指定付きで並べて表示していた。
→ 表の上端、下端、左端、右端の隙間の扱いに苦労した。
→ display: grid ではこれを気にしなくてよいのが楽だ。