A quick guide to
CSS grids
in Prince

Off-grid no more

CSS Grids offer new ways of laying out web content. Common browsers support CSS Grids, as does the newly released Prince 16. This guide will show you how to use CSS Grids in some basic examples. Grids that span multiple pages are not yet supported.

Our starting point

We start out with simple document that has one container element with four boxes inside. Without any special styling, the document looks like:

html.container { font: bold 10vh sans-serif }
.box {
  background: blue;
  color: white; 
  padding: 1rem;
  margin: 1rem;
}

<div class=container>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Adding a grid

A few lines of CSS turns creates a grid layout with three columns:

html.container {
   display: grid;
   grid-template-columns: auto auto auto;
   grid-gap: 1rem;
}

Placing elements

By setting grid-column and grid-row, boxes can be moved and sized inside the grid:

html.a { grid-column: 1 / span 2 }
.b { grid-column: 3; grid-row: 1 / span 2 }
.c { grid-column: 1; grid-row: 2 }
.d { grid-column: 2; grid-row: 2 }

Sizing columns and gaps

html.container {
   display: grid;
   grid-template-columns: 20vw 50vw 20vw;
   grid-gap: 3rem;
}

Shake it up

html.d { 
  grid-column: 2; grid-row: 2;
  transform: rotate(-10deg);
  background: red;
}

Multi-page grids

Grids that span multiple pages are not yet supported.

html

2025-03-10 Håkon Wium Lie

A quick guide to CSS grids in Prince