Gridの使い方はよく分からないけど、Flexboxの方が簡単そうだからFlexboxを使っているという方も多いのではないでしょうか。GridはFlexboxと比べると少し扱いづらく、最初に触れる時に抵抗を感じてしまう人もいるかもしれません。Gridの簡単な使い方をご紹介したいと思います。Flexboxと並んでよく使われるスタイル定義の方法です。Flexboxと比べると、HTMLをシンプルに記述することができたり、細かなレイアウトの作成を行いやすいというメリットがあります。Gridを使うデメリットは、学習コストが高いということが挙げられると思います。柔軟にレイアウトを指定することができる一方で、使用することができるプロパティもたくさんあるため、それらの使い方を覚えるのが少し大変です。IEやEdgeに一部のプロパティが対応していないなどもデメリットとして挙げられますが、これらはAutoprefixerなどを使ってベンダープレフィックスを付与することで対応することが可能です。Gridは独特の記法から難しく感じてしまう人も少なくありません。Gridでレイアウトを作ることができるようになります。Gridで作ってみるケースを見ていきましょう。HTMLのコードは次のようになります。class="footer"></footer></div>基本的なCSSの書き方grid-templateを使わずに記述すると、下記のようになります。yという書き方が個人的に分かりづらく感じてしまいます。grid-templateを使ったCSSの書き方grid-templateを使うと、上記のコードが次のようなコードで済みます。footer;}さらに、Sass(.scss)を使えば@eachを使ってさらにシンプルに記述することが可能です。#{$area};}}grid-rowとgrid-templateを使った場合に比べて、かなり直感的でシンプルなコードになりました。grid-templateを正しく理解する実は、grid-tempalteを使って行っていることは、下記の3つのプロパティをまとめて指定しているだけです。20%;このコードを書き換えると下記のようなコードになります。{エリア名}を指定することでそれぞれ表示位置を指定することができます。yのような書き方をせずに済み、個人的にはこちらの方が直感的で分かりやすいと思います。20%;のように記述することができます。IEやEdgeなどのブラウザ対応には注意が必要IEやEdgeなどはgrid-areaプロパティが対応していないため、上記のCSSをそのまま使ってしまうと上手く表示されません。Autoprefixerなどを使ってベンダープレフィックスを自動で付与すれば問題なく使用することができます。ベンダープレフィックスを付与すると、下記のようなコードが出力されます。Gridを使う場合はAutoprefixerなどを使ってベンダープレフィックスを自動で付与することをおすすめします。Flexbox」の2つが一般的になりつつあります。どちらの方が優れているということは無く、それぞれメリットとデメリットがあり、場面によって使い分けることが大切です。Flexboxのどちらも身に付けて、より分かりやすく、メンテナンスしやすいコードを目指してみてください。Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。trends【2019年版】Flexboxの対応ブラウザとベンダープレフィックスまとめFlexboxはCSSによるレイアウト作成の人気の方法です。比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱えています。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。