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.

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.

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;
}

Maintains the aspect ratio of an image in a card, while letting you resize the card.

Autobot

<article class="autobot">
  <h1>Autobot</h1>
</article>

.autobot {
  display: flex;
}

.autobot > * {
  margin: auto;
}

A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only.

See the full article for many more details about this technique and when it's efficient.

Full article · Video on YouTube · Source on Github

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%;
  }

Sets an absolute min and max size, and an actual size for the card.

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;
  }
}

Card that owns its independent style logic and is styled based on its parent's inline width.

Content Center

<article class="content-center">
  <h1>Content Center</h1>
</article>

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

A centering technique that is only a few lines of CSS, works great for many elements, but has the side effect of making children match the width of the widest element.

See the full article for many more details about this technique and when it's efficient.

Full article · Video on YouTube · Source on Github

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;
}

Create a layout that stretches to fit the space, and snaps to the next line at a minimum size.

Fluffy Center

<article>
  <h1 class="fluffy-center">Fluffy Center</h1>
</article>

.fluffy-center {
  padding: 15vmin;
  /* any large amount of padding works */
}

A centering technique that puts the content in the center via equal padding around all its sides.

See the full article for many more details about this technique and when it's efficient.

Full article · Video on YouTube · Source on Github

Gentle Flex

<article class="gentle-flex">
  <h1>Gentle Flex</h1>
</article>

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

A centering technique that only aligns content and doesn't change their size during the process.

See the full article for many more details about this technique and when it's efficient.

Full article · Video on YouTube · Source on Github

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;
}

Classic layout with a header, footer, and two sidebars flanking a main content area.

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
}

A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.

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;
}

Commonly referred to as a sticky footer, this layout is often used for both websites and apps.

Pop n' Plop

<article>
  <h1 class="pop-n-plop">Pop n' Plop</h1>
</article>

article {
  position: relative;
}

.pop-n-plop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

A centering technique for overlaying other content.

See the full article for many more details about this technique and when it's efficient.

Full article · Video on YouTube · Source on Github

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));
}

A responsive layout with automatically-placed and flexible children.

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;
}

A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.

Super centered

<div class="parent">
  <div class="box" contenteditable="">
    :)
  </div>
</div>

.parent {
  display: grid;
  place-items: center;

  /* Just for parent demo size */
  height: 100vh;
}

Centering a child div in one line of code

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
}

A grid broken up into 12 segments where you can place areas onto the tracks evenly.