What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To convert HTML to PDF with CSS Grid layouts intact, choose a renderer that supports the Grid features your page actually uses, then test it using the intended print or screen styles. WeasyPrint documents support for simple Grid cases but lists important limitations; Playwright’s PDF API uses print CSS by default. Neither a browser preview nor a renderer’s general claim of CSS support guarantees that a complex layout will paginate as intended.
Choose a renderer by the Grid features your page uses
“CSS Grid support” is not a single yes-or-no capability. Start by checking your layout’s track sizing, named areas, auto-placement, intrinsic sizing, subgrid use, and behavior across page breaks against the renderer’s current documentation. The available documentation does not establish a controlled comparison of renderer speed, cost, or fidelity, so test your own representative pages before settling on a tool.
| Renderer | What its documentation establishes | What to verify |
|---|---|---|
| WeasyPrint | The stable API reference says CSS Grid Layout Module Level 2 “works for simple cases, but has some limitations.” It documents a useful set of Grid properties and identifies unsupported or untested cases. | Check its explicit limitations against your CSS, especially subgrid, auto-fill/auto-fit, intrinsic sizing, and fragmentation. |
| Playwright | page.pdf() generates PDF using print CSS by default and provides controls for page dimensions, margins, backgrounds, scaling, ranges, and related output options. |
Choose print or screen media deliberately, confirm the installed version’s API defaults, and inspect pagination in the generated PDF. |
| Prince | Prince 15 documentation describes HTML/XML-to-PDF conversion using CSS and JavaScript, with PDF-focused output controls. | The cited documentation does not establish a specific CSS Grid support matrix. Check current vendor documentation and test the Grid features your page needs. |
Check WeasyPrint’s Grid support against your stylesheet
WeasyPrint’s stable API reference lists support for display: grid; grid-auto-*, grid-template-*, and other grid-* properties and shorthands; flexible fr lengths; line names and grid areas; auto rows and columns; z-index; repeat(X, *); minmax(); alignment; gaps; dense auto flow; ordering; box styling on grid containers and items; and fragmentation between rows. These documented capabilities can make it a candidate for straightforward Grid layouts, but they are not a guarantee for every combination of CSS.
The same reference marks the following features unsupported or untested. Treat them as items to verify rather than assuming they will work:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
display: inline-gridand automatic content sizing for Grid containers.grid-auto-flow: column, subgrids, andrepeat(auto-fill, *)orrepeat(auto-fit, *).- Automatic margins on Grid items;
spanwith line names or flexible tracks; safe or unsafe alignment; and baseline alignment. - Intrinsic-size Grid items such as images; distribution beyond limits; items larger than their containers; and min/max width or height on Grid items.
- Complex min-content/max-content cases, absolutely positioned or floating Grid items, and fragmentation within rows.
For requirements beyond layout, WeasyPrint also documents PDF output that can include hyperlinks, bookmarks, attachments, and forms. Its font documentation notes that a missing glyph can trigger a warning and appear as a .notdef glyph, so inspect text as well as layout.
Set Playwright’s media and PDF options deliberately
Playwright’s page.pdf() uses print CSS media by default. That means a page that looks correct in a normal browser view can change when converted: print-specific rules may apply, and screen-only styles may not. If the output should use screen styles, emulate screen media before creating the PDF. This changes the media mode; it does not prove that every CSS Grid layout will paginate correctly.
Rank #2
The PDF API exposes options for paper format, width and height, margins, background printing, scale, page ranges, tagged output, and whether CSS @page size takes priority over explicit dimensions or format. Its documented defaults include Letter paper, backgrounds off, and preferCSSPageSize false. Defaults can vary by installed version, so consult the API documentation for the version you run.
Render and inspect a representative PDF
- Inventory the layout. Identify Grid constructs and responsive breakpoints, especially any features the selected engine documents as unsupported or untested.
- Choose the media mode. Decide whether the PDF should use print CSS or screen CSS. Adjust the print stylesheet intentionally instead of assuming browser-view styles will carry over.
- Specify the page. Set paper size, margins, and whether backgrounds should print. In Playwright, review
format, margins,printBackground,preferCSSPageSize, and media emulation as applicable. - Render difficult examples. Include long content, images inside Grid items, page breaks, and both narrow and wide layouts where relevant. Ensure fonts and images have loaded before capture.
- Inspect the PDF itself. Check the resulting pages at their actual paper size for clipped items, altered tracks, missing backgrounds, unexpected breaks, and missing glyphs. An HTML preview alone cannot reveal all print and pagination issues.
- Check non-visual requirements separately. If the PDF must meet accessibility, archival, or print-production requirements, verify those outputs independently; the cited renderer documentation does not establish a universal compliance result.
Troubleshoot CSS Grid not working in PDF
- The PDF differs from the browser preview: Playwright uses print media by default. Add or correct print CSS, or explicitly emulate screen media before calling
page.pdf()if screen styles are intended. - A specific Grid feature fails: Compare it with the chosen engine’s documented feature list. For WeasyPrint, test the listed unsupported or untested features individually; do not infer support from other Grid properties working.
- Items are clipped or break unexpectedly: Inspect the page at its output dimensions and test long content and page breaks. WeasyPrint lists fragmentation between rows as supported but fragmentation within rows as unsupported or untested.
- Backgrounds are missing: Check the PDF API’s background-printing option. Playwright documents backgrounds as off by default.
- Text shows a missing-character glyph: Check that the required font and glyph are available. WeasyPrint’s font documentation warns that missing glyphs may trigger a warning and display as
.notdef. - Prince seems promising but its Grid behavior is unclear: Prince’s cited documentation establishes HTML/XML-to-PDF capabilities, not the exact Grid feature coverage. Check current documentation for the specific feature and test the resulting PDF.
Or skip the browser setup
For a quick screenshot of a web page, ScreenshotNeo provides a one-call API. This returns a screenshot, not a PDF; it is not a replacement when you need a paginated document or must validate CSS Grid behavior in a PDF renderer.
cURL example, with the API details in the ScreenshotNeo documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server provides screenshot and page-information tools for AI agents. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does Playwright use print or screen CSS when generating a PDF?
It uses print CSS by default. To generate with screen media, call page.emulateMedia({ media: 'screen' }) before page.pdf().
Does WeasyPrint support CSS Grid?
Its stable API reference documents support for many Grid features in simple cases, alongside a list of unsupported or untested features. Check the specific constructs your layout uses.
Recommended Free Tools
Does ScreenshotNeo convert HTML to PDF?
The ScreenshotNeo API described here returns screenshots in PNG, JPEG, or WebP, not PDFs. Use a PDF renderer when you need a paginated document.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
