how-to-make-a-grid-powered-resume

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during the new year!

First, we will create a resume container, and our resume sections.

To start using Grid, we add display: grid to our outer resume element. Next, we describe how things should be placed on the grid. In this case, we will specify two columns and four rows.

We are using the CSS Grid’s fr unit to specify how many fractions on the available space to give. We will give the rows equal space (1fr each), and make the first column two times wider than the second (2fr).

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

Next we will describe how these elements should be placed on the grid by using the grid-template-area property. First we need to define a named grid-area for each of our sections. You can use any name but here we will use the same name as our sections:

.name {
  grid-area : name;
}

.photo {
  grid-area : photo;
}

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

Now comes the fun part, and one that makes changing the design a breeze. Place the grid areas in the grid-template-areas property how you want them to be laid out. For example, here we will add the name section at the top left of the the grid-template-area to place our name at the top left of the resume. Our work section has a lot of content so we add it twice, meaning that it will stretch over two of the grid cells.

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

Here’s what we have so far:

See the Pen


grid resume lines
by Ali C (@alichur)


on CodePen.

The CSS Grid specification provides many useful properties for sizing and laying things out on the grid and well as some shorthand properties. We are keeping things simple in this example by showing one possible method. Be sure to check out some of the great resources out there to learn how best to incorporate CSS Grid in your project.

Adjusting layout

grid-template-areas make it very easy to change your layout. For example, if you think an employer will be more interested in your skills section than your education you can switch the names in grid-template-areas and they will swap places in your layout, with no other changes required.

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

See the Pen


grid resume swapping sections
by Ali C (@alichur)


on CodePen.

We can achieve a popular resume design where the thin column is on the left with minimal CSS changes. That’s one of the nice things about grid: We can rearrange the named grid areas to shift things around while leaving the source order exactly where it is!

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

See the Pen


grid resume left design
by Ali C (@alichur)


on CodePen.

Dividing columns

Perhaps you want to add personal references to the mix. We can add a third column to the grid template and slip those into the bottom row. Note that we also need to change the column units to equal fractions then update the template areas so that certain elements span two columns in order to keep our layout in place.

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

See the Pen


grid resume split columns
by Ali C (@alichur)


on CodePen.

The gap between sections can be controlled with the grid-gap property.

Making it responsive

For small screens, such as a mobile device, we can display the resume sections in a single full-width column.

grid-template-columns: 1fr;
grid-template-areas:
  "photo"
  "name"
  "about"
  "work"
  "education"
  "skills"
  "community"
  "references"
}

Then we can use a media query to change the layout for wider screens.

@media (min-width: 1200px) {
  .resume {
    grid-template-areas:
      "name photo"
      "work about"
      "work education"
      "community skills";
  }
}

Additional breakpoints can be added in between. For example, on medium screens like a tablet, we might want everything in a single column, but the personal and image sections to sit side-by-side at the top.

@media (min-width: 900px) {
  .resume {
      grid-template-columns: 2fr 1fr;
      grid-template-areas:
        "name image"
        "about about"
        "work work"
        "education education"
        "skills skills"
        "community community"
        "references references"
  }
}

Planning for single-page printing

If you want your resume to print nicely to a single piece of physical paper, there are a few things to keep in mind. The hardest challenge is often cutting down the number of words so that it fits on one page.

Avoid reducing the font size to squeeze more information, as it may become hard to read. One trick is to add a temporary size constraint to your resume element just while while you are developing.

.resume {
  /* for development only */
  width : 210mm;
  height: 297mm;
  border: 1px solid black;
}

By making this A4 paper-sized border it will be clearer to see if the sizes are too small, or the content spills out of the border, indicating it would print onto a second page.

You can provide printing CSS to hide things, like the date and page numbers, that the browser may insert.

@media print {
  /* remove any screen only styles, for example link underline */
}

@page {
  padding: 0;
  margin: 0cm;
  size: A4 portrait;
}

One thing to note is that different browsers may render your resume with different fonts that can vary slightly in size. If you want a very precise printed resume, another option is to save it as a PDF and provide a download link on your site.

Browser support

CSS Grid has good support in modern browsers.

Internet Explorer (IE) supports an older version of the CSS Grid specification using prefixes. For example grid-template-columns is written as -ms-grid-columns. Running the code through an Autoprefixer can help with adding these prefixes, but manual changes and thorough testing will be required because in the old specification some properties behave differently and some do not exist. It’s worth checking out Daniel Tonon’s article on how Autoprefixer can be configured to make things work as well as possible.

An alternative approach to autoprefixer is to provide a fallback, for example by using a float layout. Browsers that don’t recognize CSS Grid properties will display using this fallback. Regardless of whether you need to support IE, a fallback is sensible for ensuring (potentially unknown) browsers that don’t support CSS Grid still display your content.


Even if you’re not ready to host an online resume, it is still fun to play around with CSS Grid, explore different layouts, generate a great looking PDF, and learn an awesome part of CSS at the same time.

Happy job hunting!

fine-tune-your-designer-resume-with-cv-compiler

Home hero illustration

We’ve analyzed 1M tech resumes to create an online revision tool that scans your resume and indicates its weak points in real time.

DOC, DOCX, PDF — supported formats

Upload resume illustration

Upload

your resume

Upload your resume in English as a PDF or DOC(X) file. The max file size is 5MB.

Unlock illustration

Unlock

the full toolkit

Want to craft an effective tech resume and cover letter? CV Compiler has everything you need in one place.

Examination illustration

Improve

your resume today

It’s a huge time saver. We’ll show you what to improve and how to do it.

CV review illustration

Get

the job you want

A good resume is only half the battle, but it will definitely increase your chances of getting interviews.

Powered by NLP, along with tons of data and insights from recruiters

The current version of CV Compiler works well for Software Engineers, Mobile Developers, Data Scientists, DevOps, QA Specialists, Designers, and Product Managers.

For other tech-related professions, the service will be available in due course.

Also check out our other two products: Relocate.me and GlossaryTech.

CV Illustration

CV Compiler transparent pricing

Note that you can upgrade your plan at any time

  • Advanced Lite
  • 7-day access

    Buy now and use (access the content) at any time within seven days.

  • 1 Automatic Resume Review

    Immediate feedback on your resume and tips on how you can make it better.

  • 1 Eye-Catching Resume Template

    1 downloadable IT resume template. Simple and effective.

  • Cover Letter Examples

    Tips and templates for creating an amazing cover letter.

  • One-off payment (non-recurring)

  • Advanced
  • 3-month access

    You’ll have access to all the content for three months after purchase.

  • 3 Automatic Resume Reviews

    Immediate feedback on your resume and tips on how you can make it better.

  • 5 Eye-Catching Resume Templates

    5 downloadable IT resume templates. Simple and effective.

  • Cover Letter Examples

    Tips and templates for creating an amazing cover letter.

  • Effective Lines

    Bullet point writing tips and examples.

  • Resume ‘Power’ Words

    Words and phrases that will transform your tech resume.

  • Tech Insights

    See how well your resume matches up to the actual employers’ needs.

  • ATS Facts

    Everything you need to know about Applicant Tracking Systems.

  • LinkedIn Hacks

    Quick and easy tips to be noticeable for recruiters.

  • One-off payment (non-recurring)

    June special offer

  • Premium
  • 3-month access

    You’ll have access to all the content for three months after purchase.

  • 3 Automatic Resume Reviews

    Immediate feedback on your resume and tips on how you can make it better.

  • 5 Eye-Catching Resume Templates

    5 downloadable IT resume templates. Simple and effective.

  • Cover Letter Examples

    Tips and templates for creating an amazing cover letter.

  • Effective Lines

    Bullet point writing tips and examples.

  • Resume ‘Power’ Words

    Words and phrases that will transform your tech resume.

  • Tech Insights

    See how well your resume matches up to the actual employers’ needs.

  • ATS Facts

    Everything you need to know about Applicant Tracking Systems.

  • LinkedIn Hacks

    Quick and easy tips to be noticeable for recruiters.

  • Review by a Tech Recruiter

    An in-depth critique of your revamped resume by our moderators.

  • One-off payment (non-recurring)

pricing table backgroundpricing table background

Group plans

  • Enterprise 10
  • For Coding Bootcamps and Tech Universities
  • Show Details

pricing table backgroundpricing table background

Frequently Asked Questions

Is it free?

You can check your resume score free of charge. However, to get access to all the tools and content, there is a one-time service fee. The price varies depending upon the plan you choose.

Who is it intended for?

At the moment, CV Compiler is designed for tech and creative professionals: Software Engineers, Data Scientists, DevOps, QA Specialists, DBAs, Designers, Product Managers, CPOs, Product Owners, Engineering Managers, VPs of Engineering, and the like. Our list is always growing, so stay tuned to our website and social media pages to catch the latest updates.

Is it a resume builder?

No, not really. CV Compiler parses, analyzes, and scores your resume, giving concise recommendations on how it can be improved. We’re doing our best, however, to turn it into a smart online resume builder in the near future.

Do we plan to make it available for other specialities as well?

Absolutely! However, it may take some time. We need to market test the two current versions of CV Compiler first.

How does CV Compiler compare with other services on the market?

  • CV Compiler
  • $
  • One-time fee
  • Online Resume Builders
  • $$
  • Subscription
  • Classic Resume Writing Services
  • $$$-$$$$
  • /-
  • One-time fee

Just returned from a job interview at Amazon. Massive THANKS to the CV Compiler team who helped make this happen!

Great value for the money. Immediate feedback on your resume, concise tips to improve it, resume templates, all in one place.

After several interviews at Google HQ and other tech giants, I’ve finally landed a job in the Netherlands. Hats off to CV Compiler!

16869

professionals have compiled their resumes.

Check your resume score too; it’s free!

DOC, DOCX, PDF

Authorize with

This will help to keep your data more safe and secure.

CV CompilerCV Compiler

It doesn’t work

Please try another file format. You may use broken file format, size is too big, use pictures in your resume, etc

Profile deleted

Your profile has been successfully deleted