Layoutの簡単な「書き方」を学ぶ2019/11/23前回はグリッドレイアウトで登場する「用語」について解説しました。用語が曖昧な方は先に前回の記事を見てくださいね。簡単に書き方を学んで行きましょう。想定するグリッドとしては以下になります。2行4列のグリッドを想定します。このグリッドセルは合計で8つですね。(※グリッドラインでは3×5となってますが、これはラインだからです。グリッドトラックとしては2×4です)また、それぞれのグリッドセルは「200px」×「200px」とします。このグリッドをCSSで作成していきましょう。グリッドコンテナを作成するグリッドコンテナ用のdivを用意します。containerというclass名をつけておきました。class="container"></div>続いて、このdivをグリッドコンテナ化します。grid;を設定すればOKです。「行」と「列」のグリッドラインのサイズと個数を決めています。今回の場合は、200pxで2行、200pxで5列にしてます。グリッドアイテムの配置グリッドコンテナが出来たので、ここにグリッドアイテムを配置していきましょう。今回グリッドアイテムの個数は3つとします。この3つを横に並べたり、縦に並べたり、縦横に違う配置で並べたりしてみましょう。グリッドアイテムのdivを作成します。class="item3">item3</div></div>こうですね、divを3つ追加して、それぞれitem1〜item3までclass名をつけました。最初に以下のような横並びをコーディングしていきましょう。HTMLは一緒ですが一応cssと一緒に載せておきます。2;}新しいプロパティ「grid-row-startとgrid-row-end」が出てきました。これはグリッドアイテムを、どこからどこまでのグリッドラインに表示するかを設定します。rowなので行ですね(もちろんrowがあればcolumnの設定もあります、これは後ほど)。1行目のグリッドライン(赤線)から始まり、終わりが2行目のグリッドラインまでということです(endを3にすれば3のグリッドラインまで伸びます)。この設定をitem1〜item3にしているので、それぞれ「同じ行」・「同じサイズ」で表示されます。1/2;というふうにstart、endを一気に指定することができます。1;とendの2を省略できます。省略できるのかというと隣のグリッドラインだからです(1と2のような)。1/3;このように書かなければいけません。ここからはなるべく省略して書いていきます。縦にも並べてみる次は以下の配置をコーディングしていきましょう。ポイントはitem3が縦に並んでいるところです。*/}コーディング自体はほぼ変わらず、item3のgrid-rowを2にするだけです。「item3は2行目に配置してくれ」といった感じですね。列も指定してみる次はrow(行)だけでなくcolumn(列)も指定してみましょう。2/5;}こうですね。図のグリッドラインの番号と見比べならがコードを読むとわかりやすいと思います。2/5;この書き方は違う方法でも書くことができます。これはstartの列が2から始まり、3つ分列を伸ばすという意味になります。2から3つ分は5の位置になるので、同じ配置となります。全てのアイテムにrowとcolumnを指定するここまで来れば、分かるようになってきたかと思いますが、一応すべてのアイテムのrowとcolumn指定をしてみましょう。1/5;}コードはこうですね。これで、grid-rowとgrid-columnの指定は終わりです。ある程度ここについてはマスターできたと思います。グリッドラインを多くしたり、グリッドアイテムを増やしたりしてもっと複雑なレイアウトを表現すれば、力がついていくと思います。