gridの暗号解読に励む

columnとrow、縦と横、列と行、こんがらがる。

こんにちは。サキナオコです^ ^
良いお天気です。

いつもご覧いただき、スキ、フォロー、コメント、サポート、オススメまでも本当にほんとうにどうもありがとうございます＊^o^＊
今日また投稿する元気をそんなあなたにいただいております^o^/

ウェブサイトを作りたく、楽をしようとサンプルを元にしてやっておりますが、メインにしたい画像が変なところに表示されてしまいました。

勝手に書き変えているからです。きっとグリッドの指定か何かが合わないに違いありません。

グリッド、ウェブにてなんとなくは理解しました。しかし、すぐに使いこなせるほどの理解はしていません。

だいたい、エクセルでもこんがらがるのですが、列と行。パッと出ません…
ゆっくり落ち着いて考えれば大丈夫ですけど。右と左もパッと出ないことがありますのでね。（重症）

grid-rowが行？ですよね。rowですもんね。下向きに横方向の行ですよね。で、grid-columnが列で横向きに縦方向の列ということですよね。うああ！！><

ゆっくり考えてもこんがらがりますので、先へ行きます。
それで、書き方として

.wrapper {
 display: grid;
}

これが基本でgridコンテナー化すると。とりあえず基本となるgridを作成するのでしょう。

grid-template-columns: 1fr 1fr 1fr;

templateをつけるようです。
単位がピクセルでなく、この見慣れないfrというものでも書けるようで。

調べるとfraction(分数、比)の略のようです。fr、なんて読むんだろう。pxがピクセルだからフラクションでいいのでしょうか。頭の中で勝手に「フラァ〜」と読んでいます。

元の幅を比率で指定するということで、便利ですフラァ〜。
で、更に上の1fr 1fr 1frを略することができるようで

grid-template-columns: repeat(3, 1fr);

repeatを使えると。楽でいいじゃないですか。

横行を指定するには　grid-template-rows: を使用。　

でもって、大きく指定したグリッドを使って指定するのがtemplateと複数形のsを抜いたこちらみたいです。まだここら辺ちゃんと理解してません。

grid-column: 1 / 4;

日付みたいなのは前の値が開始行、後の値が終了行。
グリッド線を左上から１と数えて、右方向へ４本までのこと。rowだったら、左上から１と数える。終了行を省略できる場合あり。　　　　

その他spanというものもあるんですよね。

なんだろうスパン。と思って調べたらちょっとわかりました。スパンとは何かと何かの間みたいな意味で挿入するものがグリッド線をまたがる時に使う感じです。日付みたいなのとどう違うのか…挿入するものがあるかどうか、なのか？？また調べます。

（↓翌日わかりました）

ちょっとわかってきましたので、サンプルのCSSを解読中です。
部分部分はわかりますが、全体像がまだわかりません。

もしかしたら解読するよりも１から自分で書いた方が早いんじゃないか、と思い１から書いてみましたが、調べるにレスポンシブがどうのこうのとか、いろいろとても面倒な指定がありそうで、早くもげんなりしています。

ま、サンプルをとりあえず解読しよう。と思います。