ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強79日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

今日はグリッドでの移動です!

 

【打ち込んだコード】

表示した画面は一つですが、色々な記述方法がありました!

grid-row-start: 3;  = 行方向の始まりが3

grid-row-end: 4; = 行方向の始まりが4

grid-row: 3 / span 1 ; = 行方向の始まりが3,終わりまで一つ分(つまり4)

grid-row: 3; = 行方向の始まりが3,終わりまで一つ分(つまり4)

grid-row: 3 / 4; = 行方向の始まりが3,終わりが4
grid-column-start: 2; = 列方向の始まりが2

grid-column-end: 4; = 列方向の終わりが4

grid-column: 2 / span 2; = 列方向の始まりが2で、そこから二つ分(つまり終わり4)

grid-column: 2 / 4; = 列方向の始まりが2で、終わりが4

grid-area: 3 / 2 / 4 / 4; = 行始 / 列始/ 行終 / 列終

f:id:terushi-diary:20191108231842p:plain

【表示したHP】

f:id:terushi-diary:20191108231852p:plain

今日は、ここまで。