【CSS】display:gridを使って爆速でレスポンシブ対応させよう!
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はCSSのdisplay: gridを使いレスポンシブ対応させてみようと思います。
IEのサポート対応が終了したので、これからはGrid Layoutメインでレスポンシブ対応させても良いのかなと感じました。
対象読者
- CSS/HTMLでGrid Layoutを使ってレスポンシブ対応させたい方
Grid Layoutを使ってみよう
完成後の画面
今回作っていく画面はこんな感じです。
複雑なレイアウトなどのときにかなり早く実装できるのでFlexboxを使用するのも良いですが、Gridも一度使ってみてもいいと思います。
少しハードルが高いなと感じると思いますが、使ってみるとかなり楽だなと感じました。
Grid Layoutを使おう
Grid LayoutはFlexboxと違い2次元での指定方法になります。
概要の詳しい説明は下記になります。
CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります...
qiita.comコードの紹介になります。
<div class="grid-container">
<div class="grid-area1"><p>grid1</p></div>
<div class="grid-area2"><p>grid2</p></div>
<div class="grid-area3"><p>grid3</p></div>
<div class="grid-area4"><p>grid4</p></div>
<div class="grid-area5"><p>grid5</p></div>
</div>p {
color: white;
font-size: 80px;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 8px 8px;
grid-template-areas:
"grid1 grid1 grid2"
"grid3 grid4 grid4"
"grid3 grid5 grid5";
min-height: 100vh;
}
.grid-area1 {
grid-area: grid1;
background: red;
}
.grid-area2 {
grid-area: grid2;
background-color: green;
}
.grid-area3 {
grid-area: grid3;
background-color: black;
}
.grid-area4 {
grid-area: grid4;
background-color: blue;
}
.grid-area5 {
grid-area: grid5;
background-color: blueviolet;
}コードの解説ですが、親クラスの.grid-containerにエリアの指定をしていきます。
まずは親クラスにdisplay: gridを指定し、その次に列と行の指定です。
- 列:
grid-template-columns - 行:
grid-template-rows
frは等分という指定方法になります。
1つのエリアは等分にしてねということになります。
pxなどで指定することも可能です。
gapでエリアとエリアの隙間を指定します。
grid-template-areasでエリアの箇所の指定です。
ここで行いたいレイアウトを上から決めていくことができます。
上記からレスポンシブ対応させようとするとどうなるかというと、grid-template-areas内を変えるだけでできます。
@media screen and (max-width: 500px) {
.grid-container {
grid-template-areas:
"grid1 grid1 grid1"
"grid2 grid2 grid2"
"grid3 grid3 grid3"
"grid4 grid4 grid4"
"grid5 grid5 grid5";
}
}上記のようにgrid-template-areas内をレスポンシブ後のようにエリア指定してしまえば簡単に対応できます。
またなかなかレイアウトを考えながらプロパティを当てていくのは時間がかかるので、私はGridジェネレーターのようなものを使い実装しています。
Layoutit Grid — CSS Grids layouts made easy!
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
grid.layoutit.comエリア内でドラッグして自分で好きなようにレイアウトを指定してエリア名を決め、右のHTMLとCSSをコピペするだけで実装完了です。
さいごに
今回はCSSのGrid Layoutを使いレイアウトのレスポンシブ対応を行ってみました。
Grid Layoutを使う前はハードルが高いなと感じていましたが、ジェネレーター等を使えば手軽に使えるなと感じました。
また複雑なレイアウトを可能にするので、実装の幅も広がるなーと感じました。
この記事を書いた人
