function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Brooks Johnson 6Brooks Johnson 6 

CSS Grid and Visualforce PDF

Hi Friends I have a form that I need to write in Visualforce because it must be exportable to PDF. I  was using CSS Grid for my layout but when I switched to renderAs="PDF" my grid formatting was gone. If I add floats the PDF responds. Am I a making a mistake or does the  CSS Grid not work with the PDF? Here is my <head> 
<apex:page id="Region_Health_Check" showHeader="false" standardController="Region__c" docType="html-5.0"
    sideBar="false" standardStylesheets="false" renderAs="pdf">
        <title>Region Health Check Report</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <apex:stylesheet value="{!$Resource.HealthCheckStyle}"/>

CSS forgive having floats and grid in place. 
/* HealthCheckStyle */
    size: letter;
    margin: 25mm;


    font-family:  BrownStd,serif;
    font-size: 14px;
    display: grid;
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: auto;
    grid-area: 1 / 9/ 2 / 10;
    font-size:  12px;
    float: right;
    grid-area:  2 / 1/  2 /4;
    font-size: 26px;
    font-weight: bold;
    font-size: 39px;
    font-weight: bold;
    grid-area: 2/9/4/10;
    float: right;
    font-size: 24px;
    grid-area: 3/ 1/ 4/ 3;
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid red;
    margin: 1em 0;
    padding: 0;
    font-size: 14px;

Raj VakatiRaj Vakati
As per my knowlegde   grid-template- wnt work on pdf rendering ..  i tried also dnt wokr 

I can suggess to use the custom css for grid ..
Talha SaqibTalha Saqib
As soon as you use "renderAs=PDF", you lose CSS Grid and ofc the SLDS Grid system. In order to achieve the grid layout in a Visualforce PDF you would need to design your own custom grid system in CSS.

I have implemented a very simple but quite useful Grid system that I always use to design PDFs on VF.

Detailed Answer: