Layout patterns
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.
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. Maintains the aspect ratio of an image in a card, while letting you resize the card. Sets an absolute min and max size, and an actual size for the card. Card that owns its independent style logic and is styled based on its parent's inline width. Create a layout that stretches to fit the space, and snaps to the next line at a minimum size. Classic layout with a header, footer, and two sidebars flanking a main content area. A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space. Commonly referred to as a sticky footer, this layout is often used for both websites and apps. A responsive layout with automatically-placed and flexible children. A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space. Centering a child div in one line of code A grid broken up into 12 segments where you can place areas onto the tracks evenly.Aspect ratio image card
<div class="parent">
<div class="card">
<h1>Video Title</h1>
<div class="visual"></div>
<p>Descriptive Text goes here</p>
</div>
</div>
.parent {
display: grid;
place-items: center;
}
.visual {
aspect-ratio: 16 / 9;
}
.card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
}
Clamping card
<div class="parent">
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
</div>
.parent {
display: grid;
place-items: center;
}
.card {
width: clamp(23ch, 60%, 46ch);
display: flex;
flex-direction: column;
padding: 1rem;
}
.visual {
height: 125px;
width: 100%;
}
Container query card ⚠️
<div class="container">
<div class="card">
<div class="visual"></div>
<div>
<div class="meta">
<h1>Card Title Here</h1>
<h2 class="time">Subtitle</h2>
</div>
<p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
<button>I'm a button</button>
</div>
</div>
</div>
/* Set containment on parent */
.container {
container: inline-size;
width: 100%;
max-width: 750px;
margin: 0 auto;
}
/* Base Styles */
.visual {
aspect-ratio: 1 / 1;
}
.desc {
display: none;
}
.card {
text-align: center;
padding: 0.5rem;
}
/* Responsive styles */
/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
.card {
display: grid;
grid-template-columns: 40% 1fr;
align-items: center;
gap: 1rem;
text-align: left;
}
}
/* Display description at >=500px */
@container (min-width: 500px) {
.desc {
display: block;
}
}
Deconstructed pancake
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}
Holy grail layout
<div class="parent">
<header class="section coral">Header</header>
<div class="left-side section blue">Left Sidebar</div>
<main class="section green"> Main Content</main>
<div class="right-side section yellow">Right Sidebar</div>
<footer class="section coral">Footer</footer>
</div>
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
header {
padding: 2rem;
grid-column: 1 / 4;
}
.left-side {
grid-column: 1 / 2;
}
main {
grid-column: 2 / 3;
}
.right-side {
grid-column: 3 / 4;
}
footer {
grid-column: 1 / 4;
}
Line up
<div class="container">
<div class="card">
<h3>Title - Card 1</h3>
<p contenteditable>Medium length description with a few more words here.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 2</h3>
<p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 3</h3>
<p contenteditable>Short Description.</p>
<div class="visual"></div>
</div>
</div>
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.visual {
height: 100px;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
}
h3 {
margin: 0
}
Pancake stack
<div class="parent">
<header class="section yellow">Header</header>
<main class="section blue">Main</main>
<footer class="section green">Footer Content</footer>
</div>
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
/* Just for parent demo size */
height: 100vh;
}
RAM (Repeat, Auto, Minmax)
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sidebar says
<div class="parent">
<div class="section yellow" contenteditable>
Min: 100px / Max: 25%
</div>
<div class="section blue" contenteditable>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</div>
</div>
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}
Super centered
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}
12-span grid
<div class="parent">
<div class="span-12 section coral">Span 12</div>
<div class="span-6 section green">Span 6</div>
<div class="span-4 section yellow">Span 4</div>
<div class="span-2 section blue">Span 2</div>
</div>
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.span-12 {
grid-column: 1 / span 12;
}
.span-6 {
grid-column: 1 / span 6;
}
.span-4 {
grid-column: 4 / span 4;
}
.span-2 {
grid-column: 3 / span 2;
}
/* centering text */
.section {
display: grid;
place-items: center;
text-align: center
}