CSS 変数を使ってdisplay:grid使ったコーディングを速くする方法

投稿日: カテゴリー: css

display:gridは非常に便利でありますが、
2コラムや3コラムレイアウトを組む時に使うと、その幅を決める必要があります。
幅の種類が少ない場合はクラスをその種類分書けば問題ありませんが、
色々な幅がある場合その都度クラスを作成すると非常に面倒なことになるので、
どうにかして楽には幅を変化させたいと考えました。
具体的には以下のようなcssを考えてみました。

:root {
–num01:auto;
–num02:auto;
–num03:auto;
–grid-num-01:var(–num01);
–grid-num-02:var(–num02);
–grid-num-03:var(–num03);
–grid-num:var(–grid-num-01) auto;
}
.num01-10{
–num01:10%;
}
.num01-20{
–num01:20%;
}
.num01-30{
–num01:30%;
}
.num01-40{
–num01:40%;
}
.num01-50{
–num01:50%;
}
.num01-60{
–num01:60%;
}
.num01-70{
–num01:70%;
}
.num01-80{
–num01:80%;
}
.num01-90{
–num01:90%;
}
.num02-10{
–num02:10%;
}
.num02-20{
–num02:20%;
}
.num02-30{
–num02:30%;
}
.num02-40{
–num02:40%;
}
.num02-50{
–num02:50%;
}
.num02-60{
–num02:60%;
}
.num02-70{
–num02:70%;
}
.num02-80{
–num02:80%;
}
.num02-90{
–num02:90%;
}
.num03-10{
–num03:10%;
}
.num03-20{
–num03:20%;
}
.num03-30{
–num03:30%;
}
.num03-40{
–num03:40%;
}
.num03-50{
–num03:50%;
}
.num03-60{
–num03:60%;
}
.num03-70{
–num03:70%;
}
.num03-80{
–num03:80%;
}
.num03-90{
–num03:90%;
}
.grid02{
display: grid;
grid-template-columns:var(–grid-num);
}
.grid03{
display: grid;
–grid-num-01:var(–num01);
–grid-num-02:var(–num02);
–grid-num-03:var(–num03);
–grid-num:var(–grid-num-01) var(–grid-num-02) var(–grid-num-03);
grid-template-columns:var(–grid-num);
}

<div class=”num01-10 grid03″>
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
</div>

左:中:右=10%:10%:80%
の3カラムのレイアウトを組む場合
このようにクラスを振ることで、もしそれぞれの幅を変える必要が生じた場合でも
簡単に変更可能です。

例えば、2カラムの 左:右=20%:80%
に変更の場合は

<div class=”num01-20 num02-80 grid03″>
<p>aaa</p>
<p>bbb</p>
</div>

のようにすればOKです。