クエリコンテナ単位と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;
}