2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい!そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ!もちろんレスポンシブにも対応させたいと思います! ↑私が10年以上利用している会計ソフト! CSSグリッドの基本の書き方は動画で確認! 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう! 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に!慣れるま
![CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e5e8f54454b1b652e953293dac1cc7ec042672f/height=288;version=1;width=512/https%3A%2F%2Fwww.webcreatorbox.com%2Fwp-content%2Fuploads%2F2017%2F04%2Fthumb_grid.jpg)