gird layout 学習記録。
flexbox やったので grid layout をやっていく。 いまのレベル感は、display: grid して grid-template-rows か grid-template-column 設定して、gap でいい感じにスペース入れるくらい。 あと grid-template-column とかのときに使う repeat も雰囲気で使ってる。
mdn にいい感じのチュートリアルあるからこれやるかあ。
グリッドとは、水平方向と数位直方向のラインを集めたもので、デザイン要素を並べて表示することができます。 ページ間を移動するときに要素が飛び回ったり幅が変わったりしないようなゼザ員を作成するのに役立ちます。
チュートリアルの途中に動画あるので観る。
この動画めちゃめちゃよかった。いや gird layout たいへん便利じゃないか。とくにモバイルのレイアウトなんて超楽勝じゃん。 これ知っておかないとけないやつだな。(フロントエンジニア 4 年目)。この動画わかりやすすぎる。
youtube の動画の埋め込みをしてるけど、アスペクト比を保ったままの動画の埋め込みはググって最初にでてきたこのサイトのコードをそのままパクった。
padding-top で container の要素の高さを指定して、position: absolute で動画を top: 0, left: 0, width; 100%, height: 100% にするといいらしい。 padding-top を % で指定しているのなんなんだよ、何に対しての比率なんだよと思って調べたら、margin, padding の % は、要素の幅に対しての % らしい。
なるほどー。だからアスペクト比が指定できるわけか。9 / 16 * 1000 で 56.25 だもんな。grid 関係ないけど勉強になった。
動画で出てきたやつやるか
grid-template-columns, grid-template-rows, gap で全体のレイアウトを整えて、 grid-column, grid-row で個々の要素を整えてる。 使いやすい。
grid-template-areas, grid-area でレウアウトを整えた。
grid layout 完全に理解したといいたくなるくらい、便利な武器を手に入れた気分。
grid-column-end, grid-column-start を一括指定できるプロパティらしい。
初期値は auto
span && integer
グリッドアイテムのグリッド領域の先頭の端が末尾から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します
...日本語へたくそか？
先頭の端ってなんだ？ ふつうに先頭ってことでいいのか？ 先頭から末尾までが n 行になる、だったら自分の感覚とあった文章になる。 n 個分のセルを使うっていう理解なんだけどあってるのかな。まあいいや。
grid-column-end: -1 は末尾ってことか。
grid-row も同じかんじでいいぽいな。