CSS

css gridレイアウト

css gridレイアウト


2019年までに見直しておきたい
CSS・JavaScriptの手法

上記のサイトの資料を見て、codepenでCSS3の新しい機能、gridレイアウトを試しました。floatとflexは使ったことあったのですが、確かにflexはflex-wrap:wrap指定すると、折り返してくれるんですけど、最終列がセンターぞろえになっちゃうんですよね。それも回避できるとのことで。とても便利そうです。

使ってみて、
エクセルのセルを連結するみたいなイメージで使えると感じました。また、列や行の幅や高さを○:○で指定すれば伸び縮みさせられるのが便利だなと思いました。まるでBootstrapのグリッドシステムのような使い勝手?

主要なブラウザーはほぼサポートされていますで、安心して使えそうです^^

ちなみに、ベンダープレフィックスって必要だと思うのですが、今まであまり気を使っておらず、確認やいちいち記述するのが手間になりそうなので、近いうちにGulp?で自動で付けられるようにしたいです。
追記:http://autoprefixer.github.io/←オンラインでサービスでひとまずはいいかもしれないです。エディターによっては拡張機能でつけられるのですが、Dreamweaverにも早く機能を追加して欲しいです。