ランドスケープ、ポートレイト混在のCSSグリッドレイアウトを考えてみた
こんにちわ。nap5です。
今回は小ネタですが、ランドスケープ、ポートレイト混在のCSSグリッドレイアウトを考えてみたので紹介したいと思います。
以下を参考にしました。
ユースケースとしてはコレクションのようなギャラリーではなく、ブロックの個数限定であくまでカチッと決めたいような場合を想定しました。今回はブロックの数としては12個です。今回のスタイリングをPinterestのようなギャラリーレイアウトで使いたい場合はN個のブロックが来た場合に間隙ができてしまうので、注意が必要です。Pinterestのようなギャラリーレイアウトで使いたい場合はcolumn-countやbricks.jsのライブラリの導入を考えたほうがいいかもしれません。
今回のデモサイトです。
今回のデモコードです。
ブロックのサイズ感に関してはいい感じにならないかトライしていたんですが、やはり難しいですね。
やるとしたら、グリッドコンテナのmax-widthやアイテムのmin-heightをメディアクエリでうまく調節するぐらいですかね。
最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？