Grid Layout（グリッドレイアウト）とは、html/cssで二次元レイアウトを可能にする機能です。
flexboxは直線的にしかレイアウトを配置できないので、 Grid Layout を使うことでレイアウトの幅が広がります。
Grid Layout は以下のようなマス目に区切り、区切った要素の好きなところに要素を配置していきます。
上の図を参考にしながら以下のようなレイアウトを作ってみます。
CSS3で登場したボックスレイアウトは便利なのですが、ブラウザごとに対応がまちまちだったりベンダープレフィックスがついたりと面倒なので、調査した記録を残します。
FirefoxとGoogleChrome・SafariなどWebkit系についてはそれなりに分かってきた気がしますが、IEとOperaについては調査不十分です。
あまり大々的に主張してきませんでしたが、Webサイトはリキッドレイアウトであるべきだと思っております。
程度の大小はあれど、ブラウザのウィンドウサイズを変えても横スクロールなしに閲覧できるのが当たり前なんじゃないの?閲覧するウィンドウサイズはユーザ本位で決めるものじゃないの?という思いがずっとありましたが、諸々の事情でリキッドレイアウトを採用することはほとんどありませんでした。
簡単に言うと、「リキッドレイアウトは手間がかかる割にそのメリットがエンドユーザに理解されにくく、逆に”合意を得たデザイン”が崩れているような印象を持たれやすい」というのがリキッドレイアウトを採用してこなかった理由です。あんまり簡単じゃないですね。
PC上でウェブサイトを制作する際の悩みの種の1つといえば、ブラウザの特性によるスタイルシート(CSS)の仕様の違いではないでしょうか？
携帯に関してもそれは例外ではなく、キャリア(DoCoMo、au、SoftBank など)によって使用できる属性や記載の仕方に違いがある、いわゆる「機種依存問題」に頭を悩まします。
特にDoCoMoに関していえば…
