DEV Community

Cover image for Michael Scott Quoted in the Scranton Times with CSS Grid
Cody Pearce
Cody Pearce

Posted on • Originally published at

Michael Scott Quoted in the Scranton Times with CSS Grid

Newspapers are a great way to practice creating layouts with CSS Grid because their layouts are separated so distinctly into columns and rows. Below is a recreation of The Scranton Times newspaper from the Office created by Etsy user datemike1. The title and quotes are from season 3 episode 20, "Product Recall", where Michael holds a press conference with a reporter, Chad Light, from The Scranton Times. Earlier in the episode, Michael pitches the crazy long article headline.

This was originally published on

Convention banner

The banner is one of the more complicated objects to create due to its unique shapes. Essentially, there are 3 main parts: the center rectangle, left and right rectangles, and the connecting pieces between those two.

CSS banner

The connecting pieces, highlighted as 3, are right triangles with a darker shade of red to give the illusion of a shadow.

Scranton Times title

The newspaper's title is using the UnifrakturCook font, which does not match the font in the original very well. As far as I could tell, the original is using a paid font that I could not find a free alternative to that looked as good so I went with the best font on Google Fonts.

Main article title

The title's font is Impact, which makes the long title stand out so much more. Getting each line to line up was a challenge because each line has a different font-size. I ended up using CSS Grid to keep the required number of words per line, then played around with the font-size until each lined up how it should.

Main Article Title

Main grid

The layout is broken into 5 columns of equal width with a column-gap of 20px. The image and quote span the middle three columns. There's several ways that this can be accomplished with CSS Grid, but I went with a nested grid where the main grid is three columns. The left and right columns are the same widths, while the middle column spans three columns including the gaps.

.newspaper__grid {
  display: grid;
  grid-template-columns: 208px 1fr 208px;
  grid-gap: 20px;

Main Grid

The middle column, within the main grid, is also a grid with three columns. Each of these sub columns has the same width.

.newspaper__threecolumn {
  display: grid;
  grid-template-columns: repeat(3, 208px);
  grid-gap: 20px;

Nested Grid

Bottom Grid

The bottom grid is made up of 8 columns with different widths. The 1px columns are the divider lines. This certainly isn't the only way to achieve this effect, but it shows how flexible a grid layout can be.

.newspaper__bottom {
  display: grid;
  grid-template-columns: 270px 100px 1px 240px 1px 240px 1px 208px;
  grid-gap: 10px;

Bottom Grid


CSS Grid allows us to create complex layouts with just a few lines of CSS, which, in many cases, is dramatically simpler than previous CSS methods.

Top comments (12)

nickyoung profile image
Nick Young

Thanks for sharing. This is a great way to practice CSS layouts. I also find that converting video game screens (like a character select) to CSS can be quite a helpful way to learn as well!

coryrunn profile image

What a fun way to combine two of your interests!

sanderdebr profile image


mertocak profile image
Mert Ocak

Thank you very much!

davidvalenciait profile image

So cool!

balvinder294 profile image
Balvinder Singh

Surely a fun and easy way to learn..

Some comments may only be visible to logged-in visitors. Sign in to view all comments.