Layout patterns

Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS grid and flexbox to help you achieve common UI patterns such as cards, dynamic grid areas, and full-page layouts, and are supported on all modern browsers.

{% Aside 'caution' %} This collection also includes some experimental patterns that use container queries. These patterns are denoted by a yellow warning icon (⚠️), and are not currently supported in stable browsers. {% endAside %}