CSSグリッドを可変レイアウトにする方法

CSSグリッドでレイアウトしたのはいいが、固定サイズはできたけれどもリキッドレイアウトにならないと頭を抱え込んでいませんか。

CSSグリッドは慣れると紙のデザインをやっていた人には馴染みやすいかもしれませんが、あまり細かくグリッドを作ってしまうとリキッドレイアウトにするのが大変です。

何よりも困るのは幅を固定でサイズ指定するだけなら良いのですが、高さまで固定で指定されると大変です。これを可変サイズにするには横幅のサイズに応じて高さを変更する必要があるからです。

困ったことに紙のデザイナーはこういうことを平然とやってしまい無理なコーディングを要求してくるものです。

今回シンプルなCSSグリッドの固定レイアウトを作成したものが次のサンプルです。今回のサンプルは計算をするのが面倒なのでそれぞれのグリッドのサイズはfr単位を使用して比率で決めています。

HTMLコード

<div class="container">
　<div class="item item--1">1: Red</div>
　<div class="item item--2">2: Orange</div>
　<div class="item item--3">3: Gold</div>
　<div class="item item--4">4: Yellow</div>
　<div class="item item--5">5: Greenyellow</div>
　<div class="item item--6">6: Green</div>
　<div class="item item--7">7: Lightseagreen</div>
　<div class="item item--8">8: Dodgerblue</div>
　<div class="item item--9">9: Darkviolet</div>
</div>

CSSコード

.container{
	background-color: #eee;
	width: 1000px;
	height:600px;
	margin:30px auto;

	display: grid;
	grid-template-rows: repeat(3,1fr);
	grid-template-columns: 1fr 2fr 1fr;
	grid-gap:20px;
}
.item{
	padding: 20px;
	font-size:24px;
	color:white;
}
.item--1{
	background-color:red;
	grid-row:2/3;
	grid-column:2/3;
}
.item--2{
	background-color:orange;	
}
.item--3{
	background-color:gold;	
}
.item--4{
	background-color:yellow;	
}
.item--5{
	background-color:greenyellow;
	grid-area:1 / 3 / 2 / 4;
}
.item--6{
	background-color:green;	
}
.item--7{
	background-color:lightseagreen;	
}
.item--8{
	background-color:dodgerblue;	
}
.item--9{
	background-color:darkviolet;	
}

CSSグリッドの固定レイアウトを縦横比を固定してリキッドタイプに変更する方法

IE8が現役の一昔前ならきっと大変だったと思います。

けれども今は便利な手段があります。それはvw単位を使うことです。vwはビューポートの幅に対する割合を決めることができます。つまりブラウザやデバイスの幅に応じてサイズを柔軟に変えることができます。しかもこのvw単位はheightにも使えるということです。これで縦横比を固定してグリッドのサイズを変更できるようになります。

また可変サイズであるvwと固定サイズのpxを使用する場合（例えばpaddingに固定サイズを適用する場合）それぞれを含めた割合の計算ができません。このような場合はcalc()関数を使えば簡単に解決できます。

リキッドレイアウトのサンプル

変更したCSSコード

.container{
	background-color: #eee;
	width: 100vw;
	height:100vw;
	margin:30px auto;
	display: grid;
	grid-template-rows:calc(20vw - 20px) calc(20vw - 20px) calc(20vw - 20px); 
	grid-template-columns:calc(25vw - 20px) calc(50vw - 20px) calc(25vw - 20px); 
	grid-gap:20px;
}
.item{
	padding: 20px;
	font-size:1.6vw;
	color:white;
}

デザイナーさんは自分ならどうコーディングするか考えてデザインしなければなりませんし、コーダーさんもどんな無理な要求もさらりと応えたいものですね。

いずれにしてそれがUXにつながるものなら良いのですがね。