How to Make a Grid-Powered Resume

css-tricks.com css-tricks.com6 months ago in #Funny Love308

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.<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>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 layoutgrid-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 columnsPerhaps 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…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply