Building a Print-Ready Resume Layout with CSS Grid

CSS Grid is a natural fit for resume layouts: it lets you split a page into distinct regions and rearrange those regions without touching your HTML. The same layout can adapt to a printed A4 sheet or a phone screen, which makes it worth exploring whether you are actively job hunting or just want a practical project to learn Grid.

The core idea is simple. You define a grid container for the resume, give each section a named area, and then map those names onto a grid template. Changing where a section appears is a matter of editing the template, not the markup.

Start with a container element and sections for the usual resume content: name and title, contact details, skills, work experience, education, and a photo.

Set display: grid on the container and declare a two-column, four-row grid. The fr unit splits available space proportionally. Giving the first column 2fr and the second 1fr makes the main content column twice as wide as the sidebar column.

<article class="resume">
  <section class="name"></section>
  <section class="photo"></section>
  <section class="about"></section>
  <section class="work"></section>
  <section class="education"></section>
  <section class="community"></section>
  <section class="skills"></section>
</article>

Each section gets a named grid-area, and these names are arranged in grid-template-areas. The string-based syntax reads like a visual map of the page. Repeating a name in consecutive cells makes that section span those rows or columns. A work history section with a lot of content, for example, can be listed twice so it stretches across two rows.

.resume {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

That markup, combined with the grid definitions, produces a clean two-column resume where the main content flows down one side and secondary details sit in the narrower column.

Rearranging Sections Without Editing HTML

The most useful trait of named grid areas is how easy it makes reordering content. Moving a section is a one-line change. If you decide an employer is more likely to scan your skills before your education, swap the two names in grid-template-areas and the layout updates. No changes to the HTML or other CSS rules are needed.

The same technique flips the layout so the narrow column sits on the left instead of the right. Because the sections are positioned by their grid area names, the source order in the HTML stays unchanged. The visual arrangement follows the template, which means you can experiment with alternative designs freely without worrying about breaking document semantics.

Adding More Columns

Extending the layout is straightforward too. If you want to add a references section, introduce a third column to the grid definition and a new named area. The existing sections need to span two of the columns in places to keep the layout balanced, so their names appear accordingly in grid-template-areas.

.name {
  grid-area : name;
}

.photo {
  grid-area : photo;
}

/* define a grid-area for every section */

Spacing between sections is controlled with the grid-gap property, which handles both row and column gaps in one declaration.

Responsive Behavior

Resumes get viewed on more than paper. The grid can collapse to a single stack of full-width sections for narrow screens, then expand into the multi-column layout once there is room.

A base rule sets single-column stacking:

.resume {
  grid-template-areas:
    "name photo"
    "work about"
    "work education"
    "community skills";
}

Then a media query switches to the broader layout at a suitable breakpoint:

.resume {
  grid-template-areas:
    "name photo"
    "work about"
    "work skills"  /* skills now moved above education */
    "community education";
}

Intermediate breakpoints give finer control on tablets. You might keep most of the page in one column but let the photo and personal information sit side by side at the top.

Planning for a Single Printed Page

Fitting a resume on one sheet is mostly a content problem; keep the wording tight. Don’t respond by shrinking fonts until they are illegible. A more practical debugging method while you build is to give the resume container a fixed A4-size outline. Content that visibly spills past this border will require a second page, making overflow obvious well before you print.

.resume {
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "photo education"
    "name work"
    "about work"
    "skills community";
}

For print-specific CSS, you can also hide elements the browser inserts, such as the date or page numbers. Print rendering does vary by browser, largely because fonts can substitute at slightly different metrics. If absolute fidelity matters, producing a PDF export and linking to it may be a more dependable option than relying on a direct print from the page.

Browser Support and Fallbacks

Modern browsers handle CSS Grid well. Internet Explorer is the exception; it implements an earlier draft of the specification and needs prefixed properties:

  • grid-template-columns becomes -ms-grid-columns, and other properties follow the same pattern.
  • Tools like Autoprefixer can add the prefixes, but the old syntax behaves differently in places, so manual testing is still necessary.
  • Some properties in the modern spec do not exist in the IE version at all.

A fallback layout is worth considering even if you do not target IE, simply so the content remains readable in any browser that does not support Grid.

Even if hosting an online resume is not on your immediate list, a grid-powered layout is a good way to experiment with layout techniques, produce a polished PDF, and pick up an essential part of modern CSS along the way.