6:46 2023/08/31
凸凹だった画像一覧を、タイル状？みたいな形で敷き詰めることを
やってみたいんだけど、どういうことをすればいいんだろうか。
CSSグリッドていう機能があるんだと。
子要素を親要素に対してタイルのように並べることが可能になるそう。
タイルが子要素、グリッドアイテム。それをグリッドコンテナで囲むらしい。
グリッドアイテム同士の間隔をグリッドギャップ。
並べたいアイテムを1つのコンテナで囲む。
コンテナに対してdisplay:grid;を記述
レイアウトを調整。
の流れで出来るらしい。
なんだ、簡単じゃない。
親に
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 20px;
まず横に何枚、どのくらいの大きさのタイルを作るのかを決めるのは
grid-template-clumns
これ、複数値指定、とあるけど、何個なんだろうか。3つ？
3つだとしたらそれぞれは何を表している？
指定する数値の数は、そのまま列数になっている。
2つ指定すれば、2列のタイルができるし、3つ指定すれば、3つのタイルができている。
なるへそ、そういうことか。
ならば、パソコンなら、３つでスマホなら2つくらいにしようかな。
そうしよう。
はい、朝終わり
7:04 2023/08/31
21:58 2023/08/31
今日は少し遅くから開始。とてつもなく眠い。
11時までで終わりにしよう。
今日はcssをいじってみようかな。
cssグリッドの記憶が新しいうちに。
たしか、display:gridを親の入れ物に指定して、
列の指定と行？の指定みたいなことをすればよかったはず。
わからん、調べよう。
flexboxとcssグリッドの違いは1次元か2次元かみたいだね。
確かに。似たようなことやっているから、言われてみればそうなんだね。
flexboxは子要素を1方向に並べられる。
対してcssグリッドは子要素を列と行という2方向に並べられる、らしい。
display:flex とflex-wrap,flex-grow等を使えば
pinterestみたいに画像を敷き詰めるようなレイアウトを作ることも可能らしい。
たしかに。敷き詰まっている。
だめだ、頭が働かない。腰が疲れた。足がむくんでいる。
寝よう。
22:32 2023/08/31
