メイソンリーレイアウト

メイソンリーレイアウトの作成 最も一般的なメイソンリーレイアウトを作成するには、列がグリッドの軸、行がメイソンリーの軸になり、 grid-template-columns と grid-template-rows で定義します。 これで、このコンテナー内の子要素は、通常のグリッドレイアウトの自動配置と同様に、行に沿ってアイテムごとにレイアウトされます。 アイテムが行の新しい段に移されると、メイソンリー・アルゴリズムに従って表示されます。アイテムは最もスペースのある列に読み込まれ、厳密な行のトラックなしで、ぎっしりと詰まったレイアウトになります。 * { box-sizing: border-box; } body { font: 1.2em sans-serif; } .grid { padding: 10px; border: 2px solid #f76707; border-radi