function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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">
    <head>
        <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}"/>
    </head>

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

}

body{
    font-family:  BrownStd,serif;
    font-size: 14px;
    display: grid;
}
.top{
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: auto;
}
.score-label{
    grid-area: 1 / 9/ 2 / 10;
    font-size:  12px;
    float: right;
}
.engagement-label{
    grid-area:  2 / 1/  2 /4;
    font-size: 26px;
    font-weight: bold;
}
.final-grade{
    font-size: 39px;
    font-weight: bold;
    grid-area: 2/9/4/10;
    float: right;
}
.region-name{
    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;
}
h4{
    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: https://salesforceguides.com/index.php/2023/03/28/how-to-implement-grid-system-using-css-in-vf-page-with-renderas-pdf/