10 modern layouts in 1 line of CSS がすごい

今月 Google の YouTube チャンネルで公開された動画ですが、とても勉強になりました。

自分が知らなかったやつ、詳しくなかったやつを書き出すと、

• #01 place-items: center;
• #02 flex: 1 1 150px;
• #09 width: clamp(23ch, 50%, 46ch);
• #10 aspect-ratio: 16 / 9;

です、どれもめっちゃ使えそうです。

ちなみにブラウザの対応状況は以下のとおりです。

• place-items
• flex
• clamp
• aspect-ratio

調べた感じでは aspect-ratio 以外は業務でもいけそうです、今時 IE に対応する必要があるプロジェクトもそうそうないでしょうし。

ただ個人的には aspect-ratio を一番使いたかったので、ちょっと残念です。