---
layout: pattern-set
title: Layout patterns
description: A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
hero: image/HodOHWjMnbNw56hvNASHWSgZyAf2/PRyD1Ad1GtT6IZLqWtu1.svg
---

Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS [grid](/learn/css/grid) and [flexbox](/learn/css/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](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries). These patterns are denoted by a yellow warning icon (⚠️), and are not currently supported in stable browsers.
{% endAside %}