Page Layout

Default page

Without any @page rule, EggPdf renders on A4 portrait with no margins. Content starts at the top-left corner of the page. Use @page to set the size and add whitespace:

@page {
    size: A4 portrait;
    margin: 2cm;
}

See the Configuration page for the full list of named sizes, orientation keywords, and custom dimensions.

Mixed orientations

Named pages let individual elements use a different page size or orientation. Define a named @page rule and assign it via the CSS page property:

/* Default: portrait */
@page { size: A4 portrait;  margin: 2cm; }

/* Named page: landscape */
@page wide { size: A4 landscape; margin: 1.5cm; }

/* Assign to elements */
.chart { page: wide; }

Elements with page: wide will render on their own landscape pages; all other content uses the default portrait layout.

Page breaks

Use CSS break properties to control where EggPdf starts new pages. Both the modern break-* properties and the legacy page-break-* aliases are supported:

/* Start each chapter on a new page */
.chapter { break-before: page; }

/* Keep a figure together with its caption */
.figure { break-inside: avoid; }

/* Don't split table rows */
tr { break-inside: avoid; }

Flexbox and Grid

Both display: flex and display: grid work exactly as in a browser. EggPdf uses the same CSS box model, so multi-column layouts flow naturally within the page's content area.

/* Two equal columns with a gap */
.two-col {
    display: flex;
    gap: 24px;
}

/* Three equal columns */
.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

Flex and grid items flow within the page's content area. If the combined height exceeds the available space, the layout continues on the next page. Apply break-inside: avoid to individual items to prevent them from being split across pages.