glidで作るテーブルレイアウト

頂いたデザインが、tableで作れるかと言われるとできなさそう。そんなときにはglidレイアウトも検討しましょう。

【PCデザイン】

【SPデザイン】

これのSPデザインが難しくて、tableやflexでやるの結構たいへんでは？

まぁ、いろいろとdisplay:noneで消したりすれば良いんだけど、なるべくそれは避けたい。

でもglidならできるかも、ということでdisplay: glid;を使ったら簡単にできました。

【html】

<div class="Container">
<div class="GridItem1"></div>
<div class="GridItem2">見出しA</div>
<div class="GridItem3">見出しB</div>
<div class="GridItem4">見出し1</div>
<div class="GridItem5">テキスト入ります</div>
<div class="GridItem6">テキスト入ります
</div>
<div class="GridItem6-sp">見出し1</div>
<div class="GridItem7">見出し2</div>
<div class="GridItem8">テキスト入ります</div>
<div class="GridItem9">テキスト入ります
</div>
<div class="GridItem9-sp">
見出し2
</div>
<div class="GridItem10">見出し3</div>
<div class="GridItem11">テキスト入ります</div>
<div class="GridItem12">テキスト入ります</div>
<div class="GridItem12-sp">
見出し3
</div>
</div>

【css】
@includeは適当なメディアクエリを読み込み。

.Container {
display: grid;
grid-template-columns: 17.14% 41.43% 41.43%;
grid-template-rows: 40px 130px 130px 100px;
border: solid #ff6a00 1px;
@include md{
grid-template-columns: 30% 70%;
grid-template-rows: 50px 100px 100px 100px 50px 100px 100px 100px;
}
}
.GridItem1 {
grid-column: 1 / 1;
grid-row: 1 / 2;
background-color: #ff9c9c;
@include md{
display: none;
}
}

.GridItem2 {
grid-column: 2 / 2;
grid-row: 1 / 2;
background-color: #ffcb70;
@include md{
grid-column: 1 / 3;
}
}

.GridItem3 {
grid-column: 3 / 3;
grid-row: 1 / 2;
background-color: #55b063;
@include md{
grid-column: 1 / 3;
grid-row: 5/ 6;
}
}

.GridItem4 {
grid-column: 1 / 1;
grid-row: 2 / 3;
background-color: #b1baba;
}

.GridItem5 {
grid-column: 2 / 2;
grid-row: 2 / 3;
background-color: #ffe2af;
}

.GridItem6 {
grid-column: 3 / 3;
grid-row: 2 / 3;
background-color: #8fde9b;
@include md{
grid-column: 2 / 3;
grid-row: 6/ 7;
}
}

.GridItem7 {
grid-column: 1 / 1;
grid-row: 3 / 4;
background-color: #99b9b9;
}

.GridItem8 {
grid-column: 2 / 2;
grid-row: 3 / 4;
background-color: #ffeac6;

}

.GridItem9 {
grid-column: 3 / 3;
grid-row: 3 / 4;
background-color: #b8f7c1;
@include md{
grid-column: 2 / 3;
grid-row: 7/ 8;
}
}

.GridItem10{
grid-column: 1 / 1;
grid-row: 4 / 5;
background-color: #78b2b2;
}

.GridItem11 {
grid-column: 2 / 2;
grid-row: 4 / 5;
background-color: #fff4e0;
}

.GridItem12{
grid-column: 3 / 3;
grid-row: 4 / 5;
background-color: #ddffe2;
@include md{
grid-column: 2 / 3;
grid-row: 8/ 9;
}
}
// SPだけで表示
.GridItem6-sp{
display: none;
@include md{
display: block;
grid-column: 1 / 2;
grid-row: 6/ 7;
background: #eee;
}
}
.GridItem9-sp{
display: none;
@include md{
display: block;
grid-column: 1 / 2;
grid-row: 7/ 8;
background: #ddd;
}
}
.GridItem12-sp{
display: none;
@include md{
display: block;
grid-column: 1 / 2;
grid-row: 8/ 9;
background: #eee;
}
}

ちょっと癖があるけど、かなり便利ですね。glidレイアウト。