クエリコンテナ単位とaspect-ratioを使ったマガジンUI

ブログやニュースサイトなど、トップページに記事が並んでいるデザインを作るときに、クエリコンテナ単位やaspect-ratioを使うと、最小のCSSでレスポンシブなページを実装できる。

<section class="magazine">
  <article>
    <img src="..." alt="...">
    <h2>Title 01</h2>
  </article>
  <article>
    <img src="..." alt="...">
    <h2>Title 02</h2>
  </article>
</section>

.magazine {
  display: flex;
  gap: 1rem;
}

article {
  /* アスペクト比を4:3に固定 */
  aspect-ratio: 4/3;
  flex-grow: 1;
  /* .magazineのコンテナサイズによってfont-sizeが変わる */
  font-size: 2cqw;
}

デモ