グリッドレイアウトを使ってみた【HTMLとCSS】

2019年11月12日2019年11月18日

何を作るのか

グリッドレイアウト

・HTMLとCSSは最適なものを使う

・コード量は少なく

・グリッドの行列の指定方法

グリッドレイアウトは行と列でレイアウトを決めることができる。その行や列に画像や要素をくんでいく感じがパズルするような印象。

今回はプログラムを組むことをやめましたが、「clip-path: polygon」を使用したレイアウトをぜひやってみたい。

ヘッダー、メイン、フッターをグリッドでレイアウトする手法もあるようなので、これも試したい。

今回は、Codepenで他の方が作られたプログラムを閲覧した際に、グリッドレイアウトを学んでみようと思ったのがきっかけです。

参考にした作品は「clip-path: polygon」で綺麗なレイアウトを作られていたのですが、まだ私のレベルでは模写して理解して違う作品にするような技術がなかったので悔しい限りです。

ただ、グリッドレイアウトはレイアウトと画像を決める時間が楽しめたので満足です。

あと、このサイトはpolygonを簡単に作れるので神！！

Posted by temochic