PDFs in 2024: Modern Layouts with CSS Grid & Flexbox

<header class="doc-header">
  <img src="logo.png" alt="Logo">
  <div class="doc-title">Quarterly Report</div>
</header>

.doc-header {
  display: flex;
  justify-content: space-between; /* Pushes items to the edges */
  align-items: center; /* Vertically aligns them */
  padding: 20px;
  border-bottom: 2px solid #eee;
}

No floats, no clears, no weird margin hacks. Just clean, descriptive code.

CSS Grid: For Two-Dimensional Structure

If Flexbox is for arranging items on a string, Grid is for arranging them on a checkerboard. It excels at managing the overall page structure—the intersection of rows and columns. This is where it truly shines for PDF layouts, which are inherently two-dimensional pages.

Use Grid for:

• The entire page layout: Defining header, footer, main content, and sidebar areas.
• Complex Dashboards: Creating card-based layouts with varying column and row spans.
• Magazine-style articles: Effortlessly creating multi-column text flows next to images.
• Intricate Forms: Laying out complex grids of information, like an invoice's "Bill To" and "Ship To" sections.

How It Works: The Magic of Headless Browsers

So, how do we get from a webpage styled with CSS to a pixel-perfect PDF? The secret sauce is a headless browser. Tools like Puppeteer (Chrome) and Playwright (Chrome, Firefox, Safari) allow you to control a real web browser programmatically, without a visible UI.

The workflow is beautifully simple:

1. Build an HTML file: Create your document using clean, semantic HTML.
2. Style it with CSS: Link an external stylesheet where you use Grid, Flexbox, and any other CSS you need.
3. Run a script: Use a library like Puppeteer to open your HTML file in a headless instance of Chrome.
4. Print to PDF: Command the browser to "print" the page, saving the output as a PDF file.

The browser's rendering engine does all the heavy lifting, interpreting your modern CSS just as it would for a website and outputting a high-fidelity PDF.

A Practical Example: Building a Modern Invoice

Let's put theory into practice. An invoice is a classic PDF use case that benefits immensely from a solid grid system.

We'll use Grid for the main structure (addresses, items, totals) and Flexbox for the individual line items within the items table.

The HTML Structure

Our HTML is semantic and simple. We define a `grid-container` for the overall layout.

<div class="invoice-box grid-container">
  <header class="header">... Your Header ...</header>

  <section class="from-address">
    <strong>From:</strong><br>
    Your Company Inc.
  </section>

  <section class="to-address">
    <strong>To:</strong><br>
    Client Corp.
  </section>

  <section class="invoice-items">
    <div class="item-header">
      <div>Description</div>
      <div>Qty</div>
      <div>Price</div>
    </div>
    <div class="item">
      <div>Web Development Services</div>
      <div>40</div>
      <div>$100.00</div>
    </div>
    <!-- more items -->
  </section>

  <section class="totals">
    <div>Total: $4,000.00</div>
  </section>

  <footer class="footer">Thank you for your business!</footer>
</div>

The CSS Magic

Here's where Grid and Flexbox work together. We define a grid for the page and then use Flexbox for the rows inside the `invoice-items` section.

/* -- CSS Grid for the main layout -- */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: auto auto 1fr auto auto; /* Header, addresses, items, totals, footer */
  grid-template-areas:
    "header header"
    "from   to"
    "items  items"
    ".      totals"
    "footer footer";
  gap: 20px;
  width: 21cm; /* A4-ish width */
  min-height: 29.7cm; /* A4-ish height */
  padding: 1cm;
  box-sizing: border-box;
}

/* Assigning elements to grid areas */
.header { grid-area: header; }
.from-address { grid-area: from; }
.to-address { grid-area: to; }
.invoice-items { grid-area: items; }
.totals { grid-area: totals; text-align: right; }
.footer { grid-area: footer; text-align: center; }

/* -- Flexbox for the line items -- */
.item-header,
.item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ccc;
}

.item-header div:first-child, 
.item div:first-child {
  flex-grow: 1; /* Description takes up available space */
}

.item-header div:not(:first-child),
.item div:not(:first-child) {
  flex-basis: 15%; /* Assign fixed basis for Qty and Price */
  text-align: right;
}

This approach is incredibly robust. Need to move the totals? Just change the `grid-area`. Need to add a column to the line items? It's a simple CSS adjustment. This is maintainability you just can't get with floats or tables.

Gotchas and Pro Tips

While this method is powerful, here are a few things to keep in mind:

• Page Breaks: The web is a continuous scroll, but PDFs have pages. Use the CSS Paged Media Module properties like break-before: page; to force a new page, and break-inside: avoid; on elements (like our invoice `.item` rows) to prevent them from splitting across two pages.
• Fonts: Web fonts are your friend! Use @font-face to embed custom fonts directly into your PDF for a professional look. Just make sure your generation script waits for network assets to load before printing.
• Units: While `px` works, for print it's often more reliable to use physical units like cm, mm, or pt for page dimensions, margins, and font sizes to ensure consistency across different systems.
• Headers & Footers: For repeating page headers and footers (with page numbers!), look into the @page CSS rule. It allows you to define margin boxes (e.g., @top-center, @bottom-right) and use CSS counters (`content: counter(page);`) to automatically insert page numbers.

Conclusion: Build PDFs Like You Build the Web

The days of dreading PDF generation are over. By combining the power of modern CSS with the simplicity of headless browsers, we can finally treat PDF creation as a first-class citizen of web development. It's a workflow that uses the skills you already have to produce results that are more beautiful, flexible, and far easier to maintain.

So next time a project requires generating an invoice, a report, or a certificate, don't reach for an ancient library. Reach for CSS Grid and Flexbox, and build something you can be proud of.