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

Open demo

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

Learn more

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

Open demo

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

Learn more

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

Open demo

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

Learn more

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

Open demo

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

Learn more

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

Open demo

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

Learn more

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
}

Open demo

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

Learn more

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

Open demo

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

Learn more

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

Open demo

A responsive layout with automatically-placed and flexible children.

Learn more

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

Open demo

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

Learn more

Super centered

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

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

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

Open demo

Centering a child div in one line of code

Learn more

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
}

Open demo

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

Learn more