【30代からのプログラミング】CSSでグリッドレイアウトをラクーに使ってみる。

さて、前回の練習サイトを作る際イラストを並べるのに非常に苦労しました。そこで色々調べているうちに出てきたワードは、グリッドレイアウトとFlexというキーワードでした。そこで今回はこの２つを使ってみることに。

今回の成果物はこちらになります。よかったら遊びに行ってみてください。
https://ponsmama.github.io/pon-and-mama/

まずはグリッドレイアウトというものを学ぼう。

グリッドレイアウトを学ぶのにとても分かりやすかったサイトはこちらです。
今度こそわかかった！CSSグリッドレイアウトの作り方と基本知識。

グリッドレイアウトを簡単に説明してみる。

グリッドレイアウトとは、サイト内に枠線を引き、その枠線を使って色々な要素を配置できるようにする方法です。この方法を使うと要素を重ねたりすることもできます。

それでは4つのアイテムをグリッドレイアウトを使って、サイト上に配置してみましょう。

まずはHTMLを書こう

4つのアイテムを、グリッドコンテイナーの中に入れ子にします。

<div class=grid-container>
       <div=grid-item1>1</div>
       <div=grid-item２>２</div>
       <div=grid-item３>３</div>
       <div=grid-item４>４</div>
</div>

ポイント：アイテムの中はとりあえずで良いので何か書いておくと良い。空で作るとうまくいかないことがありましたので。

CSS　グリッドコンテイナーに枠線を設定します。

.grid-container{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(3, 100px);
｝

ポイント：columnsは縦の列、rowsは横の行です。列や行を増やしたい場合は、スペースで〇ｆｒ、や〇〇ｐｘなどの値を増やしていきます。アイテムの間に隙間を開けたいときは、grid-gap:〇〇rem;とコンテイナーに記述します。
あと、あらかじめアイテムに背景色を付けておくとレイアウトがどうなったかわかりやすいですよ。

CSSでアイテムの位置を設定します。

グリッドコンテイナーで枠線の設定をすると自動でアイテムごとに配置が振り分けられていますが、任意で位置を設定できます。

たとえば、grid-item1をBのエリアに配置する場合、書き方が色々あります。

書き方１：column: start/end; row: start/end;　を使う。

.grid-item1{
     grid-column: 1/3;
     grid-row: 2/4;
}

書き方２：grid-area: row-start / column-start / row-end / column-end;

.grid-item1{
     grid-area: 2/1/4/3;
}

コンテナを2×２で作った時はこんな感じ

書き方３：グリッドコンテナにエリアの名前を先に決めておくこともできます。

.grid-container{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(3, 100px);
　　grid-template-areas:"box-A box-A box-A box-A"
                                    "box-B box-B box-C box-C"
                                     "box-B box-B box-D box-D";
}

.grid-item1{
     grid-area: box-B;
｝

わからん？超簡単な方法があります！Layoutit!でコピペする。（無料）

それはこちらの超便利サイトLyoutit!でレイアウトを作ってCSSをジェネレートする！英語サイトですが、感覚で使えるので大丈夫です！

1.CSS Grid Generatorをチョイス。

２．好きなようにレイアウトを組みます。列、行の数、幅も自由に動かせます。

３．出来たらGet Code!でコードをコピペします。
この時HTMLとCSSの両方のコードを作ってくれるので、両方使いましょう。

どうです？簡単でしょう？

まとめ

グリッドレイアウトを覚えよう！ということでまとめてみました。
一度覚えるととても便利なのでこの機会にぜひ使ってみてください。Layoutit!はとても便利なのでぜひ使ってみてくださいね。配置したアイテムを親にして、その中身にさらに入グリッドレイアウトやFlexを使う事もできますよ。
ぜひ色々試してみてくださいね！

私ははじめアイテムを空にしていて、さっぱりうまく使えずに苦労してしまいました。
HTMLを作る際にすでに中身が決まっていたほうが、レイアウトがバシッと決まりやすいかもしれないですね。

それでは、続きはまた書きます。