Grid Layout Examples · Visual Playground

Pattern 1

Block grid

The simplest grid: full-width blocks stacked in one column. Used for single-focus pages and mobile layouts — one idea after another, top to bottom.

Header

Hero

Content

Footer

HTML

<div class="g-block">
  <div class="tile" style="min-height:56px">Header</div>
  <div class="tile" style="min-height:80px">Hero</div>
  <div class="tile" style="min-height:64px">Content</div>
  <div class="tile" style="min-height:48px">Footer</div>
</div>

CSS

.g-block {
  display: grid;
  gap: 10px;          /* one column — blocks stack vertically */
}
.tile {
  background: linear-gradient(135deg, #bbf7d0, #a5f3fc);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-weight: 700;
  font-size: .82rem;
  min-height: 46px;
}

Pattern 2

Multicolumn grid

Equal columns with consistent gutters — the backbone of most pages. Great for card rows, feature lists, and text-heavy layouts. repeat() keeps the columns even.

HTML

<div class="g-multi">
  <div class="tile"><img src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1547658719-da2b51169166?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=300&q=80" alt=""></div>
</div>

CSS

.g-multi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 equal columns */
  gap: 10px;
}
.tile {
  background: linear-gradient(135deg, #bbf7d0, #a5f3fc);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-weight: 700;
  font-size: .82rem;
  min-height: 46px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* make it responsive without media queries: */
.g-multi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

Pattern 3

Modular grid

Columns and rows create a uniform set of modules — every cell the same size. Clean and orderly; perfect for galleries, dashboards, and product grids.

HTML

<div class="g-mod">
  <div class="tile"><img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1547658719-da2b51169166?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=300&q=80" alt=""></div>
</div>

CSS

.g-mod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 58px;   /* every module the same height */
  gap: 10px;
}
.tile {
  background: linear-gradient(135deg, #bbf7d0, #a5f3fc);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-weight: 700;
  font-size: .82rem;
  min-height: 46px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

Pattern 4

Hierarchical grid

Cells of different sizes signal importance — a big feature next to smaller items. Dynamic and editorial; ideal for homepages and portfolios where one thing should dominate. Use span to size cells.

HTML

<div class="g-hier">
  <div class="tile feat"><img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?w=600&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt=""></div>
  <div class="tile wide"><img src="https://images.unsplash.com/photo-1547658719-da2b51169166?w=500&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=300&q=80" alt=""></div>
</div>

CSS

.g-hier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 58px;
  gap: 10px;
}
.g-hier .feat { grid-column: span 2; grid-row: span 2; font-size: 1rem; }  /* big */
.g-hier .wide { grid-column: span 2; }                                     /* medium */
.tile {
  background: linear-gradient(135deg, #bbf7d0, #a5f3fc);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-weight: 700;
  font-size: .82rem;
  min-height: 46px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

Pattern 5

Masonry grid

Staggered columns where items keep their natural height — the Pinterest look. Great for image galleries and notes. The easy version uses CSS columns.

HTML

<div class="g-masonry">
  <div class="tile"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1547658719-da2b51169166?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=300&q=80" alt=""></div>
</div>

CSS

.g-masonry {
  columns: 3;            /* 3 vertical columns */
  column-gap: 10px;
}
.tile {
  background: linear-gradient(135deg, #bbf7d0, #a5f3fc);
  border-radius: 8px;
  overflow: hidden;
  color: #0f766e;
  font-weight: 700;
  font-size: .82rem;
}
.g-masonry .tile {
  width: 100%;
  min-height: 0;         /* let images keep their natural height */
  margin-bottom: 10px;
  break-inside: avoid;   /* don't split an item across columns */
}
.tile img { width: 100%; display: block; object-fit: cover; }
.g-masonry .tile img { height: auto; }  /* stagger the columns */

Coming soon: native grid-template-rows: masonry is on the way in CSS — until it's widely supported, the columns trick above is the reliable approach.

Pattern 6

Bento grid

The trendy “bento box” — a modular grid where a few tiles intentionally span more cells for visual interest. Everywhere on modern product and About pages.

HTML

<div class="g-bento">
  <div class="tile b-big"><img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=600&q=80" alt=""></div>
  <div class="tile b-wide"><img src="https://images.unsplash.com/photo-1547658719-da2b51169166?w=500&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80" alt=""></div>
  <div class="tile"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt=""></div>
  <div class="tile b-wide"><img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?w=500&q=80" alt=""></div>
</div>

CSS

.g-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 66px;
  gap: 10px;
}
.g-bento .b-big  { grid-column: span 2; grid-row: span 2; }
.g-bento .b-wide { grid-column: span 2; }
.tile {
  background: linear-gradient(135deg, #bbf7d0, #a5f3fc);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-weight: 700;
  font-size: .82rem;
  min-height: 46px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

JavaScript (optional — shuffle the tiles)

<!-- Add a button somewhere above the grid -->
<button id="shuffle-bento" type="button">Shuffle</button>

<script>
  // Re-order the children of .g-bento at random.
  // The CSS .b-big / .b-wide spans stay attached to their tile,
  // so the layout reshuffles into a new bento on every click.
  const grid = document.querySelector('.g-bento');
  const btn  = document.getElementById('shuffle-bento');

  btn.addEventListener('click', () => {
    const tiles = Array.from(grid.children);
    // Fisher-Yates shuffle
    for (let i = tiles.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
    }
    tiles.forEach(t => grid.appendChild(t));
  });
</script>

Learn the mechanics: these all use the same few properties. The Grid lesson teaches grid-template-columns, gap, and span from scratch.

Pattern 7 · Full Page

The whole thing as one file

A complete, standalone page that puts these grids to work — a bento layout and a self-sizing responsive card grid — in one HTML file. Copy it into a new file called index.html, open it in a browser, and it just works: no libraries, no build step. Here's the live result, then the full code.

Live preview

Complete HTML — copy this whole file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Gallery</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2433; background: #f7f8fb; }
    header.page-head { padding: 28px 24px; text-align: center; background: #fff; border-bottom: 1px solid #e9edf3; }
    header.page-head h1 { font-size: 1.8rem; margin-bottom: 6px; }
    header.page-head p { color: #6b7280; }
    main { max-width: 900px; margin: 0 auto; padding: 28px 24px 48px; }
    h2 { font-size: 1.15rem; margin: 26px 0 12px; color: #111; }

    /* Bento grid: a modular grid where some tiles span extra cells */
    .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; gap: 14px; }
    .tile { border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #0f766e; font-weight: 700; background: linear-gradient(135deg, #bbf7d0, #a5f3fc); }
    .tile.dk { background: linear-gradient(135deg, #0ea5e9, #22c55e); color: #fff; }
    .big  { grid-column: span 2; grid-row: span 2; font-size: 1.1rem; }  /* big feature cell */
    .wide { grid-column: span 2; }                                       /* spans two columns */

    /* Responsive card grid: columns fit themselves, no media query needed */
    .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
    .card { background: #fff; border: 1px solid #e9edf3; border-radius: 12px; padding: 18px; }
    .card h3 { font-size: 1rem; margin-bottom: 6px; }
    .card p { color: #6b7280; font-size: .9rem; }

    @media (max-width: 560px) {
      .bento { grid-template-columns: repeat(2, 1fr); }   /* fewer columns on phones */
    }
  </style>
</head>
<body>

  <header class="page-head">
    <h1>Grid Gallery</h1>
    <p>One page, two grids &mdash; a bento layout and an auto-fitting card grid.</p>
  </header>

  <main>
    <h2>Bento grid</h2>
    <div class="bento">
      <div class="tile big">Feature</div>
      <div class="tile wide dk">Wide</div>
      <div class="tile">A</div>
      <div class="tile">B</div>
      <div class="tile wide">Wide</div>
      <div class="tile dk">C</div>
      <div class="tile">D</div>
    </div>

    <h2>Responsive card grid</h2>
    <div class="cards">
      <div class="card"><h3>Cards</h3><p>Resize the window &mdash; columns add and drop on their own.</p></div>
      <div class="card"><h3>auto-fill</h3><p>minmax(180px, 1fr) sets a floor, then fills the row.</p></div>
      <div class="card"><h3>No media query</h3><p>The grid reflows itself at every width.</p></div>
      <div class="card"><h3>gap</h3><p>One property spaces rows and columns evenly.</p></div>
    </div>
  </main>

</body>
</html>

That's a real, standalone page. The live preview above is rendered from the exact code in the box — so what you copy is precisely what you see.