CSS Grid: Subgrid and Masonry Layouts

Diving Deeper with CSS Grid: Subgrid and Masonry

We’ve all used CSS Grid for creating structured layouts. It’s become a go-to tool for anything from simple page structures to complex component arrangements. But CSS Grid isn’t standing still. Two features, Subgrid and Masonry layouts, are changing how we think about grid-based design, making it even more powerful and flexible.

Understanding Subgrid

Imagine you have a main grid for your page, and within one of its cells, you need to create another, more granular grid. Before Subgrid, you’d typically define a new grid context within that cell. This often led to alignment issues between the outer grid and the inner grid’s tracks. Subgrid solves this.

With grid-template-columns: subgrid; or grid-template-rows: subgrid;, an item within a grid container can adopt the tracks of its parent grid. It doesn’t create its own independent set of tracks; instead, it aligns itself with the parent’s.

Let’s look at a simple example. Suppose we have a card component that needs to align its internal elements with the main page grid.

1
<div class="page-grid">
2
  <div class="page-item">Content A</div>
3
  <div class="page-item card">
4
    <div class="card-header">Title</div>
5
    <div class="card-body">Some text here.</div>
6
    <div class="card-footer">Action</div>
7
  </div>
8
  <div class="page-item">Content C</div>
9
</div>
10

11
<style>
12
.page-grid {
13
  display: grid;
14
  grid-template-columns: 1fr 2fr 1fr;
15
  gap: 1rem;
16
}
17

18
.page-item {
19
  background-color: #eee;
20
  padding: 1rem;
21
}
22

23
.card {
24
  display: grid;
25
  /* This is where Subgrid comes in! */
26
  grid-template-columns: subgrid;
27
  grid-column: 2 / 3; /* Occupies the second column of the parent */
28
  background-color: #f9f9f9;
29
  border: 1px solid #ccc;
30
}
31

32
.card-header, .card-body, .card-footer {
33
  background-color: lightblue;
34
  padding: 0.5rem;
35
}
36

37
.card-header {
38
  grid-column: 1 / -1; /* Span all columns of the subgrid */
39
}
40

41
.card-body {
42
  grid-column: 1 / -1;
43
}
44

45
.card-footer {
46
  grid-column: 1 / -1;
47
}
48
</style>

In this setup, .card becomes a grid container itself, but its columns are inherited from .page-grid. This ensures that the .card-header, .card-body, and .card-footer will align perfectly with the tracks of the parent .page-grid, specifically the second 2fr column. This is incredibly useful for complex UIs where consistent alignment across nested structures is crucial.

Exploring Masonry Layouts

Masonry, often seen in image galleries or card lists, is a layout where items pack tightly together, filling gaps vertically. Think of bricks in a wall. Traditionally, this required JavaScript. Now, CSS Grid offers a native solution.

While not officially part of the CSS Grid Layout Module Level 1, Masonry is being standardized by CSS Working Group. It’s available in Firefox and Chrome behind a flag, or with vendor prefixes. The core idea is to allow items to flow and fill space in a staggered manner.

The syntax is straightforward:

1
.masonry-container {
2
  display: grid;
3
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
4
  grid-auto-rows: 10px; /* Defines the base unit for row height */
5
  grid-template-rows: masonry; /* The key property for masonry */
6
  gap: 1rem;
7
}
8

9
.masonry-item {
10
  /* Items will automatically span rows and pack */
11
}

Here, grid-template-rows: masonry; is the magic. It tells the grid container to lay out its items in a masonry fashion, packing them tightly and filling gaps. grid-auto-rows becomes important as it defines the small increment by which row heights are measured, allowing for finer control over the masonry packing.

It’s important to note that Masonry layout is still evolving. Browser support might require experimental flags or prefixes. However, its potential for creating dynamic, visually appealing layouts without JavaScript is immense.

Why These Matter

Subgrid brings much-needed alignment capabilities to nested grids, simplifying complex UI development and ensuring visual consistency. Masonry provides a native, performant way to achieve staggered, space-efficient layouts. Together, they showcase CSS Grid’s continued evolution, pushing the boundaries of what we can achieve with pure CSS. Keep an eye on these features; they’re set to become fundamental parts of modern web layout.